const HOME_SERVICES = [
  { title: 'Spouwmuurisolatie', desc: 'Isoleer de spouw met inblaaswol of EPS-parels en bespaar direct op stookkosten.', id: 'spouwmuurisolatie' },
  { title: 'Dakisolatie', desc: 'Voorkom warmteverlies via het dak met glaswol, PIR of isolatiefolie.', id: 'dakisolatie' },
  { title: 'Vloerisolatie', desc: 'Een warmere vloer en lagere energierekening met hoogwaardige isolatieplaten.', id: 'vloerisolatie' },
  { title: 'Bodemisolatie', desc: 'Snel en schoon aangebracht in bestaande kruipruimtes met HR+++ isolatieparels.', id: 'bodemisolatie' },
  { title: 'Gevelisolatie', desc: 'Isolatie aan de buitenzijde wanneer spouwmuurisolatie niet mogelijk is.', id: 'gevelisolatie' },
  { title: 'Airconditioning', desc: 'Verkoeling in de zomer en energiezuinig verwarmen in de winter.', id: 'airconditioning' },
  { title: 'Overige diensten', desc: 'Dakramen, dakkapellen, dakrenovatie, gevelreiniging en afbouw.', id: 'overige-diensten' },
];

function ServiceCard(props) {
  const { Card } = window.ISOKNIGDesignSystem_b5ec1b;
  const { title, desc, onClick } = props;
  const [hover, setHover] = React.useState(false);
  return React.createElement('div', {
      onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false),
      style: { cursor: 'pointer' },
    },
    React.createElement(Card, { style: {
        height: 176, boxSizing: 'border-box', display: 'flex', flexDirection: 'column',
        border: `1px solid ${hover ? 'var(--brand-primary)' : 'var(--border-default)'}`,
        boxShadow: hover ? 'var(--shadow-md)' : 'var(--shadow-sm)',
        transform: hover ? 'translateY(-2px)' : 'none',
        transition: 'all var(--dur-fast) var(--ease-standard)',
      } },
      React.createElement('div', { style: { fontFamily: 'var(--font-display)', fontSize: 17, marginBottom: 8, color: hover ? 'var(--brand-primary)' : 'var(--ink-900)' } }, title),
      React.createElement('div', { style: { fontSize: 14, color: 'var(--text-secondary)', lineHeight: 'var(--lh-body)' } }, desc)
    )
  );
}

const HOME_REVIEWS = [
  { name: 'Wil Maas', rating: 5, text: 'Het isoleren van de spouwmuren werd prima uitgevoerd, alles volgens plan en keurig afgewerkt. Het resultaat was direct merkbaar.' },
  { name: 'Gerrit Evers', rating: 5, text: 'Duidelijke informatie vooraf, gratis vleermuisonderzoek en de subsidieaanvraag volledig en gelijktijdig geregeld. Service en kwaliteit zijn top.' },
  { name: 'Scooter Arena', rating: 5, text: 'Betrouwbaar bedrijf voor isolatie en verduurzaming. Goede prijs-kwaliteitverhouding, heldere uitleg en afspraken worden nagekomen.' },
  { name: 'Ruben Kruithof', rating: 5, text: 'Vakwerk geleverd door de mannen van Isokönig, scherpe prijzen en hele duidelijke communicatie. Ook in het weekend (tijdens het strippen van onze zolder) was Soevanty bereikbaar. Zeer vakkundige medewerkers die erg vriendelijk waren.' },
  { name: 'Johan van de Vijver', rating: 5, text: 'Na een prettig en deskundig adviesgesprek in de ochtend, heeft Isokönig diezelfde vrijdagmiddag nog ons huis geïsoleerd, een energierapport over isolatie toegezonden en hebben zij ons ook geadviseerd over de subsidieaanvraag (ISDE). Ik ben zeer tevreden over de snelle én kundige service.' },
  { name: 'Marijn Degen', rating: 5, text: 'Ik zeg het niet vaak, maar ik ben flabbergasted door de service, voor de officiele openingstijden een vraag over PIR platen, uurtje daarna de gratis spulletje thuisbezorgd. Ongelovelijk! Heel erg bedankt voor het meedenken, lijkt mij interessant om in de toekomst service van jullie af te nemen.' },
  { name: 'Marcel Zwiers', rating: 5, text: 'Heb 1 muur laten na-isoleren en het was snel en vakkundig geregeld. Ook goeie na-service en snelle communicatie.' },
  { name: 'Maaike de Vleeschhouwer', rating: 5, text: 'Wij hebben onze spouwmuren laten isoleren door Isokoning en dat is ons heel goed bevallen. Vanaf het begin dacht men goed mee: duidelijk advies, helder over het product en wat het beste bij onze woning paste. Geen verkooppraatjes, gewoon eerlijke uitleg. Tijdens de uitvoering hadden ze pech met de machine, maar ondanks deze tegenvaller zijn ze tot de avond door blijven werken totdat het af was.' },
];

function ReviewsCarousel(props) {
  const { reviews, ReviewCard } = props;
  const trackRef = React.useRef(null);
  function scroll(dir) { if (trackRef.current) trackRef.current.scrollBy({ left: dir * 320, behavior: 'smooth' }); }
  return React.createElement('div', { style: { position: 'relative' } },
    React.createElement('button', { type: 'button', onClick: () => scroll(-1), 'aria-label': 'Vorige', style: {
        position: 'absolute', left: -18, top: '50%', transform: 'translateY(-50%)', zIndex: 2, width: 40, height: 40, borderRadius: '50%',
        border: '1px solid var(--border-default)', background: '#fff', boxShadow: 'var(--shadow-md)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, color: 'var(--ink-900)',
      } }, '\u2039'),
    React.createElement('div', { ref: trackRef, style: { display: 'flex', gap: 20, overflowX: 'auto', scrollSnapType: 'x mandatory', paddingBottom: 4 } },
      reviews.map((r) => React.createElement('div', { key: r.name, style: { flex: '0 0 300px', scrollSnapAlign: 'start', display: 'flex' } }, React.createElement(ReviewCard, r)))
    ),
    React.createElement('button', { type: 'button', onClick: () => scroll(1), 'aria-label': 'Volgende', style: {
        position: 'absolute', right: -18, top: '50%', transform: 'translateY(-50%)', zIndex: 2, width: 40, height: 40, borderRadius: '50%',
        border: '1px solid var(--border-default)', background: '#fff', boxShadow: 'var(--shadow-md)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, color: 'var(--ink-900)',
      } }, '\u203a')
  );
}

const HOME_FAQS = [
  { q: 'Heeft mijn woning een spouwmuur?', a: 'De meeste woningen die na ongeveer 1920 zijn gebouwd hebben een spouw: een holle ruimte tussen de binnen- en buitenmuur. Bij oudere woningen ontbreekt die vaak. Onze adviseur stelt dit tijdens de inspectie vast met een endoscoop via een klein boorgaatje.' },
  { q: 'Hoeveel kan ik besparen met isolatie?', a: 'Dat hangt af van uw woning en verbruik. Bij een nog niet geïsoleerde spouwmuur is een besparing van 15 tot 30% op de stookkosten gebruikelijk; bij een slecht geïsoleerd dak verdwijnt tot 30% van de warmte via het dak. Met de rekentool op onze subsidiepagina krijgt u een indicatie voor uw situatie.' },
  { q: 'Wat is de terugverdientijd?', a: 'Voor spouwmuurisolatie is dat gemiddeld 3 tot 5 jaar; met ISDE-subsidie vaak 2 tot 4 jaar. Dakisolatie ligt meestal tussen 5 en 7 jaar. Hoe hoger de gasprijs, hoe korter de terugverdientijd.' },
  { q: 'Kom ik in aanmerking voor subsidie?', a: 'Via de ISDE-subsidie van de RVO krijgt u een vast bedrag per m² terug. Bij één maatregel is dat ongeveer 15% van de kosten; combineert u twee of meer maatregelen, dan valt het bedrag per m² hoger uit. Wij helpen u desgewenst met de aanvraag.' },
  { q: 'Hoe lang duurt het werk?', a: 'Spouwmuurisolatie wordt meestal binnen één dag aangebracht, met nauwelijks rommel of overlast. Alleen de boorgaatjes in het voegwerk worden na het inblazen netjes dichtgemaakt.' },
  { q: 'Ziet mijn gevel er daarna hetzelfde uit?', a: 'Ja. Na het isoleren herstellen onze monteurs het voegwerk, zodat de gevel in de oorspronkelijke staat wordt teruggebracht.' },
  { q: 'Wat gebeurt er met vleermuizen en vogels?', a: 'Wij isoleren volgens de actuele richtlijnen voor natuurvriendelijk isoleren. Waar nodig laten wij vooraf ecologisch onderzoek uitvoeren, zodat beschermde diersoorten niet worden verstoord.' },
  { q: 'Welke garantie geven jullie?', a: 'Op onze isolatiewerkzaamheden geven wij standaard 10 jaar garantie op vochtdoorslag. Wij werken met materialen van gerenommeerde fabrikanten zoals Knauf en Kingspan.' },
];

function PartnerMarquee() {
  const logos = ['knauf', 'kingspan', 'velux', 'fakro', 'pif-isolatie', 'isovlas'];
  const [paused, setPaused] = React.useState(false);
  const track = logos.concat(logos);
  return React.createElement('div', {
      onMouseEnter: () => setPaused(true), onMouseLeave: () => setPaused(false),
      style: { overflow: 'hidden', maskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)', WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)' },
    },
    React.createElement('style', null, '@keyframes isoMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}'),
    React.createElement('div', { style: { display: 'flex', width: 'max-content', animation: 'isoMarquee 26s linear infinite', animationPlayState: paused ? 'paused' : 'running' } },
      track.map((id, i) => React.createElement('div', { key: id + i, style: { width: 'calc(1200px / 4 - 40px)', padding: '0 20px', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' } },
        React.createElement('img', { src: './assets/partners/' + id + '.png', alt: id, style: { maxWidth: '100%', height: 56, objectFit: 'contain', opacity: 0.85, transition: 'opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard)' },
          onMouseEnter: (e) => { e.currentTarget.style.opacity = '1'; e.currentTarget.style.transform = 'scale(1.08)'; },
          onMouseLeave: (e) => { e.currentTarget.style.opacity = '0.85'; e.currentTarget.style.transform = 'none'; } })
      ))
    )
  );
}

const WERKWIJZE = [
  { number: 1, icon: 'file-pen-line', title: 'Aanvraag', desc: 'De enige stap die u zelf zet. Daarna nemen wij het over.' },
  { number: 2, icon: 'phone-call', title: 'Adviesgesprek', desc: 'Binnen 24 uur nemen wij persoonlijk contact met u op.' },
  { number: 3, icon: 'clipboard-check', title: 'Gratis inspectie', desc: 'Onze monteur meet uw woning in en u ontvangt een offerte op maat.' },
  { number: 4, icon: 'brick-wall', title: 'Uitvoering', desc: 'Vakkundige uitvoering door ons eigen team, meestal binnen één dag.' },
];

function WerkwijzeCard(props) {
  const { number, icon, title, desc } = props;
  const [hover, setHover] = React.useState(false);
  return React.createElement('div', {
      onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false),
      style: {
        background: '#fff', borderRadius: 'var(--radius-lg)', overflow: 'hidden',
        border: `1px solid ${hover ? 'var(--brand-primary)' : 'var(--border-default)'}`,
        boxShadow: hover ? 'var(--shadow-md)' : 'var(--shadow-sm)',
        transform: hover ? 'translateY(-3px)' : 'none',
        transition: 'all var(--dur-fast) var(--ease-standard)',
      },
    },
    React.createElement('div', { style: { position: 'relative', height: 150, background: 'var(--ink-900)', display: 'flex', alignItems: 'center', justifyContent: 'center' } },
      React.createElement('img', { src: 'https://unpkg.com/lucide-static@latest/icons/' + icon + '.svg', alt: '', style: { width: 56, height: 56, filter: 'brightness(0) invert(1)', opacity: 0.95 } }),
      React.createElement('div', { style: { position: 'absolute', right: 14, bottom: -18, width: 36, height: 36, borderRadius: '50%', background: 'var(--brand-primary)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontSize: 16, border: '3px solid #fff' } }, number)
    ),
    React.createElement('div', { style: { padding: '28px 22px 24px' } },
      React.createElement('div', { style: { fontFamily: 'var(--font-display)', fontSize: 18, marginBottom: 8, color: 'var(--ink-900)' } }, title),
      React.createElement('p', { style: { margin: 0, fontSize: 14, lineHeight: 'var(--lh-body)', color: 'var(--text-secondary)' } }, desc)
    )
  );
}

function HomeScreen(props) {
  const { Button, Card, Badge, StepCard, ReviewCard, GoogleReviewsBadge, AccordionItem, SavingsCalculator } = window.ISOKNIGDesignSystem_b5ec1b;
  const { onNavigate } = props;
  const sectionPad = { padding: '80px 40px', maxWidth: 1200, margin: '0 auto' };
  return React.createElement('div', null,
    React.createElement('section', { style: { position: 'relative', height: '100vh', minHeight: 640, overflow: 'hidden' } },
      React.createElement('div', { style: { position: 'absolute', inset: 0, backgroundImage: 'url(./assets/hero-van.jpeg)', backgroundSize: 'cover', backgroundPosition: '68% center', filter: 'saturate(1.05) contrast(1.03)' } }),
      React.createElement('div', { style: { position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(16,16,16,0.92) 0%, rgba(16,16,16,0.74) 38%, rgba(16,16,16,0.28) 68%, rgba(16,16,16,0.10) 100%)', pointerEvents: 'none' } }),
      React.createElement('div', { style: { position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(16,16,16,0.55) 0%, transparent 22%, transparent 72%, rgba(16,16,16,0.6) 100%)', pointerEvents: 'none' } }),
      React.createElement('div', { className: 'iso-hero-inner', style: { position: 'relative', maxWidth: 1200, margin: '0 auto', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 40px', pointerEvents: 'none' } },
        React.createElement('div', { style: { maxWidth: 560, pointerEvents: 'auto' } },
          React.createElement('h1', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-xl)', lineHeight: 'var(--lh-tight)', color: '#fff', margin: '0 0 18px' } }, 'Duurzaam comfort het hele jaar door.'),
          React.createElement('p', { className: 'iso-hide-mobile', style: { fontSize: 'var(--fs-body-lg)', color: 'var(--ink-100)', lineHeight: 'var(--lh-body)', marginBottom: 28 } },
            'Vakmanschap tegen een eerlijke prijs. Onze monteurs isoleren uw spouwmuur, dak of vloer met hoogwaardige materialen van gerenommeerde merken.'),
          React.createElement('div', { style: { display: 'flex', gap: 14, marginBottom: 28, 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('subsidie') }, 'Bereken jouw subsidie')),
          React.createElement('div', { style: { display: 'inline-flex', alignItems: 'center', gap: 12, background: 'rgba(20,20,20,0.55)', border: '1px solid rgba(255,255,255,0.2)', borderRadius: 'var(--radius-pill)', padding: '8px 16px' } },
            React.createElement('span', { style: { color: '#fff', fontSize: 13, fontWeight: 700, textDecoration: 'underline' } }, 'Google reviews'),
            React.createElement('span', { style: { color: 'var(--brand-primary)', fontSize: 14, letterSpacing: 2 } }, '★★★★★'),
            React.createElement(Badge, { tone: 'brand' }, '4.8 / 5'),
            React.createElement('span', { style: { color: 'var(--ink-200)', fontSize: 12 } }, '(40)'))
        )
      )
    ),

    React.createElement('section', { style: sectionPad },
      React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-md)', marginBottom: 8 } }, 'Onze diensten & materialen'),
      React.createElement('p', { style: { color: 'var(--text-secondary)', fontSize: 'var(--fs-body-md)', marginBottom: 32, maxWidth: 640 } }, 'Wij werken met een breed pakket isolatiematerialen, passend bij uw woning en budget.'),
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 20, marginBottom: 28 } },
        HOME_SERVICES.map((s) => React.createElement(ServiceCard, { key: s.title, title: s.title, desc: s.desc, onClick: () => onNavigate('diensten', s.id) }))),
      React.createElement(Button, { variant: 'outline', onClick: () => onNavigate('diensten') }, 'Bekijk alle diensten')
    ),

    React.createElement('section', { style: sectionPad },
      React.createElement('div', { style: { background: 'var(--ink-900)', borderRadius: 32, padding: '40px 48px', display: 'flex', alignItems: 'center', gap: 36, flexWrap: 'wrap' } },
        React.createElement('img', { src: 'assets/adviseur.jpeg', alt: 'Adviseur van ISOKÖNIG Onderhoud', style: { width: 120, height: 120, flexShrink: 0, borderRadius: '50%', objectFit: 'cover', objectPosition: 'center 22%', display: 'block' } }),
        React.createElement('div', { style: { flex: 1, minWidth: 260 } },
          React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-md)', color: '#fff', margin: '0 0 10px', lineHeight: 'var(--lh-tight)' } }, 'Afspraak maken met een adviseur?'),
          React.createElement('p', { style: { margin: 0, color: 'var(--ink-200)', fontSize: 'var(--fs-body-md)' } }, 'Ontdek hoe u comfortabeler kunt wonen en besparen.')
        ),
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 10, minWidth: 240 } },
          React.createElement(Button, { variant: 'primary', size: 'lg', onClick: () => onNavigate('contact') }, 'Adviesgesprek'),
          React.createElement(Button, { variant: 'outline-light', size: 'lg', onClick: () => onNavigate('subsidie') }, 'Bereken jouw besparing'),
          React.createElement('span', { style: { fontSize: 12, fontStyle: 'italic', fontWeight: 700, color: 'var(--ink-300)', textAlign: 'center' } }, 'Een adviesgesprek is altijd vrijblijvend')
        )
      )
    ),

    React.createElement('section', { style: { background: 'var(--ink-50)' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '56px 40px' } },
        React.createElement('div', { style: { fontSize: 12, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 'var(--ls-caps)', color: 'var(--text-secondary)', marginBottom: 28 } }, 'Materialen'),
        React.createElement(PartnerMarquee, null)
      )
    ),

    React.createElement('section', { style: { background: '#fff' } },
      React.createElement('div', { style: { maxWidth: 1100, margin: '0 auto', padding: '80px 40px' } },
        React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-md)', margin: '0 0 48px' } }, 'Waarom klanten kiezen voor ISOKÖNIG Onderhoud'),
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '48px 32px' } },
          [
            { icon: 'house-heart', t: 'Eigen vakkundige monteurs', d: 'Onze monteurs zijn in vaste dienst, vakkundig opgeleid en werken volgens de geldende normen.' },
            { icon: 'clock', t: 'Offerte binnen 48 uur', d: 'Na de inspectie aan huis ontvangt u een heldere offerte, inclusief subsidie-indicatie.' },
            { icon: 'piggy-bank', t: 'Wij helpen u met uw subsidie', d: 'Wij ondersteunen u bij de ISDE-aanvraag via RVO en informeren u over het Warmtefonds.' },
            { icon: 'shield-check', t: '10 jaar garantie', d: 'Standaard 10 jaar garantie op vochtdoorslag bij al onze isolatiewerkzaamheden.' },
            { icon: 'package-check', t: 'Merkmaterialen', d: 'Wij werken met hoogwaardige materialen van Knauf, Kingspan en Isovlas.' },
            { icon: 'leaf', t: 'Natuurvriendelijk isoleren', d: 'Wij isoleren volgens de actuele richtlijnen, met ecologisch onderzoek waar dat nodig is.' },
          ].map((f) => React.createElement('div', { key: f.t, style: { textAlign: 'left' } },
            React.createElement('div', { style: { width: 56, height: 56, borderRadius: '50%', background: 'var(--brand-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 0 16px' } },
              React.createElement('img', { src: 'https://unpkg.com/lucide-static@latest/icons/' + f.icon + '.svg', alt: '', style: { width: 24, height: 24, filter: 'brightness(0) invert(1)' } })),
            React.createElement('div', { style: { fontFamily: 'var(--font-display)', fontSize: 19, marginBottom: 8 } }, f.t),
            React.createElement('p', { style: { margin: 0, color: 'var(--text-secondary)', fontSize: 15, lineHeight: 'var(--lh-body)' } }, f.d)
          ))
        )
      )
    ),

    React.createElement('section', { style: { background: 'var(--ink-50)' } },
      React.createElement('div', { style: { maxWidth: 1000, margin: '0 auto', padding: '80px 40px' } },
        React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-md)', margin: '0 0 12px', maxWidth: 760 } }, 'Bereken jouw besparing en subsidie'),
        React.createElement('p', { style: { color: 'var(--text-secondary)', fontSize: 'var(--fs-body-lg)', margin: '0 0 40px', maxWidth: 620 } }, 'In een paar stappen ziet u wat isoleren u oplevert, inclusief een indicatie van de ISDE-subsidie.'),
        React.createElement(Card, { padding: 'var(--space-6)' }, React.createElement(SavingsCalculator, 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,420px)', gap: 56, alignItems: 'center' } },
        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: 'https://unpkg.com/lucide-static@latest/icons/leaf.svg', alt: '', style: { width: 16, height: 16 } }), 'Natuurvriendelijk isoleren'),
          React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-md)', margin: '0 0 14px', maxWidth: 700 } }, 'In veel spouwmuren wonen vleermuizen'),
          React.createElement('p', { style: { color: 'var(--ink-200)', fontSize: 'var(--fs-body-lg)', lineHeight: 'var(--lh-body)', margin: '0 0 26px', maxWidth: '58ch' } },
            'Bij spouwmuurisolatie verdwijnen hun verblijfplaatsen vaak, en dat is wettelijk verboden. Wij isoleren natuurvriendelijk: de dieren krijgen eerst de kans om weg te vliegen en houden daarna een spouwverblijf in de muur. Uit onafhankelijk onderzoek blijkt dat de woning daarmee nog steeds goed geïsoleerd is en het energielabel gelijk blijft.'),
          React.createElement(Button, { variant: 'primary', size: 'lg', onClick: () => onNavigate('natuurvriendelijk') }, 'Lees over natuurvriendelijk isoleren')
        ),
        React.createElement('img', { src: 'assets/natuur/vleermuis.png', alt: 'Vleermuis', style: { width: '100%', height: 280, objectFit: 'cover', borderRadius: 16, display: 'block' } })
      )
    ),

    React.createElement('section', { style: { background: '#fff' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '80px 40px' } },
        React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-md)', margin: '0 0 12px', maxWidth: 820 } }, 'Onze werkwijze, van aanvraag tot uitvoering'),
        React.createElement('p', { style: { color: 'var(--text-secondary)', fontSize: 'var(--fs-body-lg)', margin: '0 0 48px' } }, 'Wij gaan voor een zorgeloos, efficiënt en vooral persoonlijk proces.'),
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 24 } },
          WERKWIJZE.map((s) => React.createElement(WerkwijzeCard, { key: s.number, ...s }))
        )
      )
    ),

    React.createElement('section', { style: { background: 'var(--ink-50)' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '80px 40px', display: 'flex', gap: 56, alignItems: 'center' } },
        React.createElement('img', { src: 'assets/hero-van.jpeg', alt: 'Bedrijfswagen van ISOKÖNIG Onderhoud', style: { flex: 1, minWidth: 0, height: 320, objectFit: 'cover', borderRadius: 14, display: 'block' } }),
        React.createElement('div', { style: { flex: 1 } },
          React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-md)', marginBottom: 16 } }, 'Over ons'),
          React.createElement('p', { style: { color: 'var(--text-secondary)', fontSize: 'var(--fs-body-md)', lineHeight: 'var(--lh-body)', marginBottom: 12 } }, 'ISOKÖNIG staat voor vakmanschap tegen een eerlijke prijs. Wij geloven in een duurzame samenleving en werken uitsluitend met hoogwaardige materialen van gerenommeerde merken.'),
          React.createElement('p', { style: { color: 'var(--text-secondary)', fontSize: 'var(--fs-body-md)', lineHeight: 'var(--lh-body)' } }, 'Onze monteurs zijn in vaste dienst, vakkundig opgeleid en werken volgens de geldende normen, zodat u zeker weet dat het goed gebeurt.'),
          React.createElement('a', { onClick: () => onNavigate('over-ons'), style: { display: 'inline-block', marginTop: 18, color: 'var(--brand-primary)', fontWeight: 700, fontSize: 15, cursor: 'pointer' } }, 'Meer over ons \u2192')
        )
      )
    ),

    React.createElement('section', { style: { background: '#fff' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '80px 40px' } },
        React.createElement(GoogleReviewsBadge, { rating: 5, count: 40 }),
        React.createElement('div', { style: { marginTop: 40, padding: '0 24px' } },
          React.createElement(ReviewsCarousel, { reviews: HOME_REVIEWS, ReviewCard }))
      )
    ),

    React.createElement('section', { style: { background: 'var(--ink-50)' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '80px 40px' } },
        React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-md)', marginBottom: 8 } }, 'Veelgestelde vragen'),
        React.createElement('p', { style: { color: 'var(--text-secondary)', fontSize: 'var(--fs-body-md)', marginBottom: 32 } }, 'De vragen die wij het vaakst krijgen over isolatie, kosten en subsidie.'),
        React.createElement('div', { style: { maxWidth: 780 } },
          HOME_FAQS.slice(0, 5).map((f) => React.createElement(AccordionItem, { key: f.q, question: f.q, answer: f.a })),
          React.createElement('div', { style: { marginTop: 28 } },
            React.createElement(Button, { variant: 'outline', onClick: () => onNavigate('faq') }, 'Meer veelgestelde vragen')))
      )
    ),

    React.createElement('section', { style: { background: 'var(--brand-primary)' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '64px 40px', textAlign: 'center', color: '#fff' } },
        React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-md)', marginBottom: 12 } }, 'Benieuwd wat u kunt besparen?'),
        React.createElement('p', { style: { fontSize: 'var(--fs-body-md)', marginBottom: 24, opacity: 0.9 } }, 'Bereken uw indicatieve besparing en subsidie op de subsidiepagina.'),
        React.createElement(Button, { variant: 'secondary', size: 'lg', onClick: () => onNavigate('subsidie') }, 'Bereken uw besparing')
      )
    )
  );
}
window.HomeScreen = HomeScreen;