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

  const PILLARS = [
    { icon: 'hammer', t: 'Vakmanschap tegen een eerlijke prijs', d: 'Wij werken met eigen monteurs in vaste dienst. Geen onderaannemers, geen verrassingen op de factuur: één team dat verantwoordelijk is voor het resultaat.' },
    { icon: 'leaf', t: 'Een duurzame samenleving', d: 'Iedere geïsoleerde woning verbruikt minder gas. Wij kiezen waar mogelijk voor biobased materialen en isoleren volgens de richtlijnen voor natuurvriendelijk isoleren.' },
    { icon: 'package-check', t: 'Hoogwaardige materialen', d: 'Wij werken uitsluitend met materialen van gerenommeerde fabrikanten zoals Knauf, Kingspan en Isovlas, zodat de isolatiewaarde ook over tien jaar nog klopt.' },
  ];

  const FACTS = [
    { n: '10 jaar', l: 'garantie op vochtdoorslag' },
    { n: '48 uur', l: 'van inspectie naar offerte' },
    { n: '1 dag', l: 'gemiddelde uitvoeringstijd' },
    { n: '5,0', l: 'gemiddelde beoordeling op Google' },
  ];

  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' }, 'Over ons'),
          React.createElement('h1', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-lg)', margin: '16px 0 14px', lineHeight: 'var(--lh-tight)' } }, 'Een lokale isolatiespecialist met eigen vakmensen'),
          React.createElement('p', { style: { color: 'var(--ink-200)', fontSize: 'var(--fs-body-lg)', lineHeight: 'var(--lh-body)', maxWidth: '52ch', margin: '0 0 28px' } },
            'ISOKÖNIG Onderhoud B.V. isoleert en onderhoudt woningen en bedrijfspanden in Nederland. Vanuit Groesbeek werken wij voor particuliere en zakelijke opdrachtgevers, van één spouwmuur tot een compleet woningbestand.'),
          React.createElement('div', { style: { display: 'flex', gap: 14, flexWrap: 'wrap' } },
            React.createElement(Button, { variant: 'primary', size: 'lg', onClick: () => onNavigate('contact') }, 'Vrijblijvend advies aanvragen'),
            React.createElement(Button, { variant: 'outline-light', size: 'lg', onClick: () => onNavigate('diensten') }, 'Bekijk onze diensten'))
        ),
        React.createElement('img', { src: 'assets/hero-van.jpeg', alt: 'Bedrijfswagen van ISOKÖNIG Onderhoud', 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', display: 'grid', gridTemplateColumns: 'minmax(0,380px) minmax(0,1fr)', gap: 56, alignItems: 'start' } },
        React.createElement('div', null,
          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('target'), alt: '', style: { width: 16, height: 16 } }), 'Onze missie'),
          React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-md)', margin: '0 0 14px' } }, 'Waar wij voor staan'),
          React.createElement('p', { style: { fontSize: 'var(--fs-body-md)', color: 'var(--text-secondary)', lineHeight: 'var(--lh-body)', maxWidth: '38ch', margin: 0 } },
            'Isoleren is bouwwerk. Het valt of staat bij de voorbereiding, het juiste materiaal en de monteur die het aanbrengt.')
        ),
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          PILLARS.map((p) => React.createElement(Card, { key: p.t, padding: 'var(--space-6)' },
            React.createElement('div', { style: { display: 'flex', gap: 18, alignItems: 'flex-start' } },
              React.createElement('div', { style: { width: 44, height: 44, borderRadius: '50%', background: 'var(--brand-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } },
                React.createElement('img', { src: ICON(p.icon), alt: '', style: { width: 20, height: 20, filter: 'brightness(0) invert(1)' } })),
              React.createElement('div', null,
                React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 19, margin: '0 0 8px', color: 'var(--ink-900)' } }, p.t),
                React.createElement('p', { style: { margin: 0, fontSize: 15, lineHeight: 'var(--lh-body)', color: 'var(--text-secondary)' } }, p.d))
            )
          ))
        )
      )
    ),

    React.createElement('section', { style: { background: 'var(--ink-900)', color: '#fff' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '56px 40px', display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 28 } },
        FACTS.map((f) => React.createElement('div', { key: f.l },
          React.createElement('div', { style: { fontFamily: 'var(--font-display)', fontSize: 38, color: 'var(--brand-primary)', lineHeight: 1 } }, f.n),
          React.createElement('div', { style: { marginTop: 8, fontSize: 14, color: 'var(--ink-200)', lineHeight: 'var(--lh-body)' } }, f.l)
        ))
      )
    ),

    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,460px) minmax(0,1fr)', gap: 56, alignItems: 'center' } },
        React.createElement('img', { src: 'assets/about-work.jpeg', alt: 'Monteur aan het werk', style: { width: '100%', height: 340, objectFit: 'cover', borderRadius: 16, display: 'block' } }),
        React.createElement('div', null,
          React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-md)', margin: '0 0 16px' } }, 'Hoe wij werken'),
          React.createElement('p', { style: { fontSize: 'var(--fs-body-md)', color: 'var(--text-secondary)', lineHeight: 'var(--lh-body)', margin: '0 0 16px', maxWidth: '58ch' } },
            'Een goed advies begint met persoonlijk contact. Wij komen kosteloos langs, bekijken de constructie, meten in en leggen uit welke maatregel in uw situatie het meeste oplevert. Binnen 48 uur ontvangt u een heldere offerte, inclusief een indicatie van de ISDE-subsidie.'),
          React.createElement('p', { style: { fontSize: 'var(--fs-body-md)', color: 'var(--text-secondary)', lineHeight: 'var(--lh-body)', margin: '0 0 24px', maxWidth: '58ch' } },
            'Na akkoord plannen wij de werkzaamheden in overleg in. Onze monteurs werken netjes, ruimen op en leveren schoon op. Waar nodig verzorgen wij ook de afbouw, zodat u met één partij te maken heeft.'),
          React.createElement(Button, { variant: 'outline', onClick: () => onNavigate('contact') }, 'Adviesgesprek aanvragen')
        )
      )
    ),

    React.createElement('section', { style: { background: '#fff' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 40px 80px' } },
        React.createElement('div', { style: { background: 'var(--ink-900)', borderRadius: 32, padding: '40px 48px', display: 'flex', alignItems: 'center', gap: 36, flexWrap: 'wrap' } },
          React.createElement('div', { style: { flex: 1, minWidth: 280 } },
            React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 28, color: '#fff', margin: '0 0 8px' } }, 'Zakelijke opdrachtgever?'),
            React.createElement('p', { style: { margin: 0, color: 'var(--ink-200)', fontSize: 'var(--fs-body-md)', lineHeight: 'var(--lh-body)' } },
              'Wij werken ook voor VvE\u2019s, vastgoedbeheerders, woningcorporaties en aannemers.')),
          React.createElement(Button, { variant: 'primary', size: 'lg', onClick: () => onNavigate('zakelijk') }, 'Naar zakelijk')
        )
      )
    )
  );
}
window.AboutScreen = AboutScreen;