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

  const KERN = [
    { n: '0%', l: 'rente bij een gezamenlijk verzamelinkomen tot € 60.000' },
    { n: '€ 1.000', l: 'minimaal te lenen bedrag' },
    { n: '€ 29.000', l: 'maximaal voor eigenaar-bewoners; voor VvE\u2019s geldt meer' },
    { n: '7–20 jaar', l: 'looptijd, afhankelijk van het leenbedrag' },
  ];

  const MAATREGELEN = [
    'Spouwmuurisolatie',
    'Dakisolatie',
    'Vloer- en bodemisolatie',
    'Gevelisolatie',
    'HR++ glas en isolerende kozijnen',
    'Warmtepomp en hybride warmtepomp',
    'Zonnepanelen en zonneboiler',
    'Ventilatie en maatwerkadvies',
  ];

  const STAPPEN = [
    { icon: 'clipboard-list', t: 'Vraag een offerte aan', d: 'Wij komen langs, meten in en leggen vast welke maatregelen wij uitvoeren en wat ze kosten. Deze offerte heeft u nodig bij de aanvraag.' },
    { icon: 'calculator', t: 'Bepaal uw rente', d: 'Uw rente hangt af van het gezamenlijk verzamelinkomen van u en uw eventuele partner. Tot € 60.000 leent u renteloos.' },
    { icon: 'file-check', t: 'Dien de aanvraag in', d: 'De aanvraag loopt volledig online via warmtefonds.nl. Er vindt een krediettoets plaats; het Warmtefonds beoordeelt uw aanvraag.' },
    { icon: 'wallet', t: 'Betaal uit het bouwdepot', d: 'Na goedkeuring staat het bedrag in een bouwdepot. Onze factuur wordt daaruit betaald; u lost maandelijks af.' },
  ];

  const FAQS = [
    { q: 'Kan ik het Warmtefonds combineren met de ISDE-subsidie?', a: 'Ja. De regelingen staan los van elkaar. U vraagt de ISDE-subsidie aan voor de uitgevoerde isolatiemaatregelen en financiert het resterende bedrag via de Energiebespaarlening.' },
    { q: 'Wanneer is de lening renteloos?', a: 'Bij een gezamenlijk verzamelinkomen tot € 60.000 per jaar geldt 0% rente, voor de volledige looptijd. Ligt uw inkomen daarboven, dan geldt een marktconforme rente; begin 2026 lag die tussen ongeveer 3,6% en 4,3%, afhankelijk van leenbedrag en looptijd.' },
    { q: 'Kan een VvE ook lenen?', a: 'Ja. Verenigingen van Eigenaars kunnen voor een gezamenlijke verduurzamingsaanpak lenen, met ruimere bedragen dan een individuele woningeigenaar. Wij werken regelmatig met VvE\u2019s samen; bekijk ook onze zakelijke pagina.' },
    { q: 'Mag ik tussentijds extra aflossen?', a: 'Ja, extra aflossen kan altijd boetevrij.' },
    { q: 'Waar vind ik de actuele voorwaarden?', a: 'Rentetarieven, leenbedragen en de lijst met erkende maatregelen kunnen wijzigen. De actuele voorwaarden staan altijd op warmtefonds.nl.' },
  ];

  return React.createElement('div', { className: 'iso-reveal' },
    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(Badge, { tone: 'brand' }, 'Nationaal Warmtefonds'),
          React.createElement('h1', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-lg)', margin: '16px 0 14px', lineHeight: 'var(--lh-tight)' } }, 'Isoleren zonder eigen spaargeld'),
          React.createElement('p', { style: { color: 'var(--ink-200)', fontSize: 'var(--fs-body-lg)', lineHeight: 'var(--lh-body)', maxWidth: '52ch', margin: '0 0 28px' } },
            'Met de Energiebespaarlening van het Nationaal Warmtefonds financiert u isolatie en andere verduurzamingsmaatregelen. Bij een gezamenlijk verzamelinkomen tot € 60.000 leent u renteloos.'),
          React.createElement('div', { style: { display: 'flex', gap: 14, flexWrap: 'wrap' } },
            React.createElement(Button, { variant: 'primary', size: 'lg', onClick: () => onNavigate('contact') }, 'Offerte aanvragen'),
            React.createElement('a', { href: 'https://www.warmtefonds.nl', target: '_blank', rel: 'noreferrer', style: { display: 'inline-flex', alignItems: 'center', gap: 8, border: '1px solid rgba(255,255,255,0.25)', borderRadius: 'var(--radius-pill)', padding: '14px 24px', color: '#fff', fontWeight: 700, fontSize: 15, textDecoration: 'none' } }, 'Naar warmtefonds.nl', '→'))
        ),
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'rgba(255,255,255,0.14)', borderRadius: 16, overflow: 'hidden' } },
          KERN.map((k) => React.createElement('div', { key: k.l, style: { background: 'var(--ink-800)', padding: '24px 22px' } },
            React.createElement('div', { style: { fontFamily: 'var(--font-display)', fontSize: 26, color: 'var(--brand-primary)', lineHeight: 1.1 } }, k.n),
            React.createElement('div', { style: { marginTop: 8, fontSize: 13, color: 'var(--ink-200)', lineHeight: 'var(--lh-body)' } }, k.l))))
      )
    ),

    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('info'), alt: '', style: { width: 16, height: 16 } }), 'Wat is het Warmtefonds'),
          React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-md)', margin: '0 0 14px' } }, 'Een landelijke lening voor verduurzaming'),
          React.createElement('p', { style: { fontSize: 'var(--fs-body-md)', color: 'var(--text-secondary)', lineHeight: 'var(--lh-body)', margin: 0 } },
            'Een initiatief van de Rijksoverheid, samen met de Rabobank en de ASN Bank.')
        ),
        React.createElement('div', null,
          React.createElement('p', { style: { fontSize: 'var(--fs-body-md)', color: 'var(--text-primary)', lineHeight: 'var(--lh-body)', margin: '0 0 16px', maxWidth: '62ch' } },
            'Het Nationaal Warmtefonds verstrekt de Energiebespaarlening: een lening waarmee eigenaar-bewoners en VvE\u2019s hun bestaande woning kunnen verduurzamen zonder de hele investering in één keer op te brengen. U lost af in maandelijkse termijnen, die vaak lager uitvallen dan wat u maandelijks bespaart op de energierekening.'),
          React.createElement('p', { style: { fontSize: 'var(--fs-body-md)', color: 'var(--text-primary)', lineHeight: 'var(--lh-body)', margin: '0 0 16px', maxWidth: '62ch' } },
            'De rente hangt af van uw inkomen. Bij een gezamenlijk verzamelinkomen tot € 60.000 is de rente 0% voor de volledige looptijd. Ligt uw inkomen daarboven, dan geldt een marktconforme rente. Extra aflossen kan altijd boetevrij.'),
          React.createElement('p', { style: { fontSize: 'var(--fs-body-md)', color: 'var(--text-secondary)', lineHeight: 'var(--lh-body)', margin: 0, maxWidth: '62ch' } },
            'De lening is te combineren met de ISDE-subsidie: u ontvangt subsidie op de uitgevoerde isolatiemaatregelen en financiert het restant via het Warmtefonds. Zo verlaagt u zowel de investering als de maandlasten.')
        )
      )
    ),

    React.createElement('section', { style: { background: 'var(--ink-50)' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '72px 40px' } },
        React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-md)', margin: '0 0 12px' } }, 'Van offerte naar uitvoering'),
        React.createElement('p', { style: { color: 'var(--text-secondary)', fontSize: 'var(--fs-body-lg)', margin: '0 0 40px', maxWidth: 620 } }, 'De aanvraag loopt online via het Warmtefonds. Wij leveren de offerte en de factuur die u daarbij nodig heeft.'),
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 20 } },
          STAPPEN.map((s, i) => React.createElement(Card, { key: s.t, padding: 'var(--space-5)' },
            React.createElement('div', { style: { fontFamily: 'var(--font-display)', fontSize: 13, color: 'var(--brand-primary)', letterSpacing: 'var(--ls-caps)', marginBottom: 12 } }, 'Stap ' + (i + 1)),
            React.createElement('div', { style: { width: 42, height: 42, borderRadius: '50%', background: 'var(--brand-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 } },
              React.createElement('img', { src: ICON(s.icon), alt: '', style: { width: 20, height: 20, filter: 'brightness(0) invert(1)' } })),
            React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 18, margin: '0 0 8px', 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: '#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: 'start' } },
        React.createElement('div', null,
          React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-md)', margin: '0 0 12px' } }, 'Waarvoor u kunt lenen'),
          React.createElement('p', { style: { color: 'var(--text-secondary)', fontSize: 'var(--fs-body-md)', lineHeight: 'var(--lh-body)', margin: '0 0 24px', maxWidth: '62ch' } },
            'De Energiebespaarlening is bedoeld voor erkende verduurzamingsmaatregelen. Dit zijn de meest gevraagde; de volledige lijst staat op warmtefonds.nl.'),
          React.createElement('ul', { style: { margin: 0, padding: 0, listStyle: 'none', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 } },
            MAATREGELEN.map((m) => React.createElement('li', { key: m, style: { display: 'flex', gap: 10, alignItems: 'baseline', fontSize: 15, color: 'var(--text-primary)' } },
              React.createElement('span', { style: { color: 'var(--brand-primary)', fontWeight: 700 } }, '✓'), m)))
        ),
        React.createElement(Card, { padding: 'var(--space-6)' },
          React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 20, margin: '0 0 10px', color: 'var(--ink-900)' } }, 'Eerst subsidie, dan financieren'),
          React.createElement('p', { style: { margin: '0 0 18px', fontSize: 15, lineHeight: 'var(--lh-body)', color: 'var(--text-secondary)' } },
            'Reken eerst uit wat u aan ISDE-subsidie ontvangt voor uw isolatiemaatregelen. Wat daarna overblijft, kunt u via het Warmtefonds financieren.'),
          React.createElement(Button, { variant: 'primary', onClick: () => onNavigate('subsidie') }, 'Bereken uw subsidie'),
          React.createElement('div', { style: { marginTop: 14 } },
            React.createElement(Button, { variant: 'outline', onClick: () => onNavigate('zakelijk') }, 'VvE of vastgoedbeheerder'))
        )
      )
    ),

    React.createElement('section', { style: { background: 'var(--ink-50)' } },
      React.createElement('div', { style: { maxWidth: 900, margin: '0 auto', padding: '72px 40px' } },
        React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-md)', margin: '0 0 28px' } }, 'Veelgestelde vragen over het Warmtefonds'),
        FAQS.map((f) => React.createElement(AccordionItem, { key: f.q, question: f.q, answer: f.a })),
        React.createElement('p', { style: { marginTop: 28, fontSize: 13, fontStyle: 'italic', color: 'var(--text-secondary)', lineHeight: 'var(--lh-body)' } },
          'De genoemde bedragen en rentetarieven zijn indicatief en gebaseerd op de voorwaarden in 2026. Het Warmtefonds kan de voorwaarden wijzigen; controleer altijd de actuele informatie op warmtefonds.nl. Dit is geen financieel advies.')
      )
    ),

    React.createElement('section', { style: { background: 'var(--ink-50)' } },
      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' } }, 'Alle voorwaarden en de aanvraag'),
            React.createElement('p', { style: { margin: 0, color: 'var(--ink-200)', fontSize: 'var(--fs-body-md)', lineHeight: 'var(--lh-body)' } },
              'Rentetarieven, erkende maatregelen en het aanvraagformulier vindt u op de site van het Nationaal Warmtefonds.')),
          React.createElement('a', { href: 'https://www.warmtefonds.nl', target: '_blank', rel: 'noreferrer', style: { display: 'inline-flex', alignItems: 'center', gap: 8, background: 'var(--brand-primary)', color: '#fff', textDecoration: 'none', fontWeight: 700, fontSize: 15, borderRadius: 'var(--radius-pill)', padding: '14px 24px' } }, 'warmtefonds.nl', '→')
        )
      )
    )
  );
}
window.WarmtefondsScreen = WarmtefondsScreen;