function BusinessScreen(props) {
  const { Button, Card, Badge } = window.ISOKNIGDesignSystem_b5ec1b;
  const { onNavigate } = props;
  const ICON = (n) => 'https://unpkg.com/lucide-static@latest/icons/' + n + '.svg';

  const SEGMENTS = [
    { icon: 'building', t: 'VvE\u2019s', d: 'Spouwmuur-, dak- en vloerisolatie voor complete complexen, met één aanspreekpunt en een planning per blok of portiek.' },
    { icon: 'key-round', t: 'Woningcorporaties', d: 'Seriematige uitvoering in bewoonde staat, met bewonerscommunicatie en oplevering per woning.' },
    { icon: 'briefcase', t: 'Vastgoedbeheerders', d: 'Isolatie en onderhoud van portefeuilles, inclusief inspectierapport en meerjarige planning.' },
    { icon: 'hard-hat', t: 'Aannemers', d: 'Isolatie als onderaanneming binnen uw bouwplanning: inblaaswerk, plaatwerk en afbouw.' },
    { icon: 'store', t: 'Bedrijfspanden', d: 'Kantoren, loodsen en winkelruimtes, met aandacht voor energielabel en werkcomfort.' },
    { icon: 'wind', t: 'Klimaatinstallatie', d: 'Single en Multi Split airconditioning voor kantoren en bedrijfsruimtes, inclusief onderhoudscontract.' },
  ];

  const STEPS = [
    { n: '01', t: 'Inventarisatie', d: 'Wij inspecteren de panden, bepalen per woning of unit welke maatregel mogelijk is en leggen dat vast.' },
    { n: '02', t: 'Voorstel en planning', d: 'U ontvangt een prijs per eenheid, de te verwachten isolatiewaarden en een uitvoeringsplanning.' },
    { n: '03', t: 'Uitvoering', d: 'Ons eigen team voert uit, in bewoonde staat waar dat nodig is, met vaste dagafspraken.' },
    { n: '04', t: 'Oplevering en dossier', d: 'Per eenheid leveren wij foto\u2019s, m² en Rd-waarden aan, zodat subsidie en dossiervorming kloppen.' },
  ];

  const USPS = [
    'Eigen monteurs in vaste dienst',
    'Werken in bewoonde staat',
    'Materialen van Knauf, Kingspan en Isovlas',
    '10 jaar garantie op vochtdoorslag',
    'Ecologisch onderzoek waar vereist',
    'Facturatie per eenheid of per project',
  ];

  return React.createElement('div', null,
    React.createElement('section', { style: { background: 'var(--ink-900)', color: '#fff' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '72px 40px', display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,440px)', gap: 56, alignItems: 'center' } },
        React.createElement('div', null,
          React.createElement(Badge, { tone: 'brand' }, 'Zakelijk'),
          React.createElement('h1', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-lg)', margin: '16px 0 14px', lineHeight: 'var(--lh-tight)' } }, 'Isolatie en onderhoud voor vastgoed'),
          React.createElement('p', { style: { color: 'var(--ink-200)', fontSize: 'var(--fs-body-lg)', lineHeight: 'var(--lh-body)', maxWidth: '52ch', margin: '0 0 28px' } },
            'Van één bedrijfspand tot een compleet woningbestand. Wij isoleren seriematig, in bewoonde staat en met een dossier dat klopt voor subsidie en energielabel.'),
          React.createElement('div', { style: { display: 'flex', gap: 14, flexWrap: 'wrap' } },
            React.createElement(Button, { variant: 'primary', size: 'lg', onClick: () => onNavigate('contact') }, 'Projectaanvraag doen'),
            React.createElement(Button, { variant: 'outline-light', size: 'lg', onClick: () => onNavigate('diensten') }, 'Bekijk onze diensten'))
        ),
        React.createElement('img', { src: 'assets/zakelijk-hero.png', alt: 'Project in uitvoering', style: { width: '100%', height: 320, objectFit: 'cover', borderRadius: 16, display: 'block' } })
      )
    ),

    React.createElement('section', { style: { background: '#fff' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '72px 40px' } },
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, color: 'var(--brand-primary)', fontWeight: 700, fontSize: 13, textTransform: 'uppercase', letterSpacing: 'var(--ls-caps)', marginBottom: 12 } },
          React.createElement('img', { src: ICON('users'), alt: '', style: { width: 16, height: 16 } }), 'Voor wie wij werken'),
        React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-md)', margin: '0 0 12px', maxWidth: 760 } }, 'Opdrachtgevers'),
        React.createElement('p', { style: { fontSize: 'var(--fs-body-lg)', color: 'var(--text-secondary)', margin: '0 0 40px', maxWidth: '62ch', lineHeight: 'var(--lh-body)' } },
          'Wij zijn gewend te werken met meerdere eenheden, bewoners en een planning die vaststaat.'),
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 } },
          SEGMENTS.map((s) => React.createElement(Card, { key: s.t, padding: 'var(--space-6)', style: { minHeight: 190, display: 'flex', flexDirection: 'column', gap: 10 } },
            React.createElement('div', { style: { width: 42, height: 42, borderRadius: '50%', background: 'var(--brand-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' } },
              React.createElement('img', { src: ICON(s.icon), alt: '', style: { width: 19, height: 19, filter: 'brightness(0) invert(1)' } })),
            React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 18, margin: 0, color: 'var(--ink-900)' } }, s.t),
            React.createElement('p', { style: { margin: 0, fontSize: 14, lineHeight: 'var(--lh-body)', color: 'var(--text-secondary)' } }, s.d)
          ))
        )
      )
    ),

    React.createElement('section', { style: { background: 'var(--ink-50)' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '72px 40px', display: 'grid', gridTemplateColumns: 'minmax(0,380px) minmax(0,1fr)', gap: 56, alignItems: 'start' } },
        React.createElement('div', null,
          React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-md)', margin: '0 0 14px' } }, 'Van inventarisatie tot dossier'),
          React.createElement('p', { style: { fontSize: 'var(--fs-body-md)', color: 'var(--text-secondary)', lineHeight: 'var(--lh-body)', maxWidth: '38ch', margin: '0 0 20px' } },
            'Bij projecten zit het werk niet alleen in de uitvoering, maar ook in de administratie eromheen.'),
          React.createElement(Button, { variant: 'outline', onClick: () => onNavigate('contact') }, 'Projectaanvraag doen')
        ),
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 14 } },
          STEPS.map((s) => React.createElement('div', { key: s.n, style: { display: 'flex', gap: 20, alignItems: 'flex-start', background: '#fff', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-lg)', padding: '22px 24px' } },
            React.createElement('div', { style: { fontFamily: 'var(--font-display)', fontSize: 20, color: 'var(--brand-primary)', flexShrink: 0, width: 34 } }, s.n),
            React.createElement('div', null,
              React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 18, margin: '0 0 6px', color: 'var(--ink-900)' } }, s.t),
              React.createElement('p', { style: { margin: 0, fontSize: 15, lineHeight: 'var(--lh-body)', color: 'var(--text-secondary)' } }, s.d))
          ))
        )
      )
    ),

    React.createElement('section', { style: { background: '#fff' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '72px 40px 80px' } },
        React.createElement('div', { style: { background: 'var(--ink-900)', borderRadius: 32, padding: '44px 48px', display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 48, alignItems: 'center' } },
          React.createElement('div', null,
            React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 28, color: '#fff', margin: '0 0 16px' } }, 'Wat u van ons kunt verwachten'),
            React.createElement('ul', { style: { margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: 10 } },
              USPS.map((u) => React.createElement('li', { key: u, style: { display: 'flex', gap: 10, alignItems: 'baseline', color: 'var(--ink-100)', fontSize: 15 } },
                React.createElement('span', { style: { color: 'var(--brand-primary)', fontWeight: 700 } }, '✓'), u)))
          ),
          React.createElement('div', null,
            React.createElement('p', { style: { color: 'var(--ink-200)', fontSize: 'var(--fs-body-md)', lineHeight: 'var(--lh-body)', margin: '0 0 22px' } },
              'Stuur ons het aantal eenheden en het bouwjaar, dan komen wij inventariseren en ontvangt u een prijs per eenheid.'),
            React.createElement('div', { style: { display: 'flex', gap: 14, flexWrap: 'wrap' } },
              React.createElement(Button, { variant: 'primary', size: 'lg', onClick: () => onNavigate('contact') }, 'Projectaanvraag doen'),
              React.createElement('a', { href: 'tel:+31247920023', style: { display: 'flex', alignItems: 'center', gap: 10, border: '1px solid rgba(255,255,255,0.25)', borderRadius: 'var(--radius-pill)', padding: '13px 22px', color: '#fff', fontWeight: 700, fontSize: 14, textDecoration: 'none' } }, '+31 24 792 00 23'))
          )
        )
      )
    )
  );
}
window.BusinessScreen = BusinessScreen;