const ISO_MAT_DATA = [
  {
    id: 'supafil-cavity-wall', naam: 'Knauf Supafil inblaasglaswol', type: 'Inblaasisolatie · glaswol',
    foto: 'assets/materialen/supafil-cavity-wall.jpeg',
    kort: 'Ongebonden glaswolvlokken die onder druk een holle ruimte vullen: spouwmuur, dak of houten vloer.',
    tekst: [
      'Het is één materiaalsoort in twee varianten: Supafil Cavity Wall voor de bestaande spouwmuur en Supafil Timber Frame voor houten constructies. Beide bestaan uit losse glaswolvlokken van ongeveer 80% gerecycled glas, zonder bindmiddel, waterafstotend maar dampopen en niet-brandbaar (brandklasse A1). Wat verschilt, is de dichtheid van de vlokken en de manier waarop de ruimte wordt gevuld.',
      'In de spouwmuur (Cavity Wall) boren wij gaten in het voegwerk volgens een vast patroon en blazen de vlokken onder druk de spouw in. Ze vullen de volledige spouw naadloos, ook achter kozijnen en onder dorpels, waar platen nooit sluitend komen. Daarna zetten wij de gaten dicht in de kleur van het voegwerk. Er komt geen breekwerk, folie of regelwerk aan te pas.',
      'In een hellend dak, dakkapel of voorzetwand (Timber Frame) maken wij eerst een gesloten ruimte tussen het dakbeschot en een dampremmende folie, doorgaans 6 tot 20 cm diep. Via een klein gaatje wordt de wol onder hoge druk ingeblazen, zodat de vlokken zich rond sporen en leidingen verdelen en er geen kieren of koudebruggen overblijven.',
      'In een houten verdiepings- of zoldervloer (Timber Frame) blazen wij de vlokken volgens een boorpatroon tussen de balklaag. Naast warmteverlies vermindert dat ook de geluidsoverdracht tussen verdiepingen. Ligt de zolder onbenut, dan isoleren wij vaak de zoldervloer zelf in plaats van het dakvlak.',
    ],
    specs: [['Lambda-waarde', 'λ ≈ 0,033 W/mK'], ['Brandklasse', 'A1, niet-brandbaar'], ['Eigenschappen', 'Waterafstotend, dampopen, verzakkingsvrij'], ['Verwerking', 'Spouw: via boorgaten in het voegwerk'], ['Verwerking dak en vloer', 'Achter dampremmende folie of tussen de balklaag']],
    verstandig: ['Bestaande spouw van circa 5 cm of breder', 'Hellend dak, dakkapel of voorzetwand', 'Houten verdiepings- of zoldervloer', 'Wanneer een naadloze vulling rond leidingen nodig is'],
    let_op: 'Bij een vervuilde, zeer smalle of doorslaande spouw adviseren wij eerst herstel, of isolatie aan de binnen- of buitenzijde.',
    toepassing: ['Spouwmuurisolatie', 'Dakisolatie', 'Gevelisolatie', 'Vloerisolatie'],
  },
  {
    id: 'eps-parels', naam: 'EPS-isolatieparels (HR+++)', type: 'Parelisolatie · EPS',
    foto: 'assets/materialen/eps-parels.jpeg',
    kort: 'Polystyreenparels met een hoge isolatiewaarde per centimeter, voor de spouw en voor de kruipruimtebodem.',
    tekst: [
      'In de spouw en in de kruipruimte gebruiken wij hetzelfde materiaal: HR+++ EPS-parels. Alleen de manier van toepassen verschilt. In de spouw worden de parels met een bindmiddel ingeblazen, zodat ze aan elkaar en aan het metselwerk vastzitten en bij latere werkzaamheden niet uit de spouw lopen. Op de kruipruimtebodem worden dezelfde parels los ingeblazen en verdelen zij zich over de bodem tot een isolerende laag.',
      'In de spouw rollen de parels tijdens het inblazen langs oneffenheden en resten specie, waardoor ook een onregelmatige of licht vervuilde spouw betrouwbaar wordt gevuld.',
      'In de kruipruimte blazen wij in via het kruipluik of een gevelopening. Er hoeft niemand de kruipruimte in, waardoor ook een lage of natte kruipruimte kan worden aangepakt. De parels nemen geen water op en blijven op water drijven, zodat kou en vocht vanuit de bodem worden tegengehouden. Het resultaat is een drogere kruipruimte, een warmere vloer en betere luchtkwaliteit.',
    ],
    specs: [['Lambda-waarde', 'λ ≈ 0,033 W/mK'], ['Eigenschappen', 'Vochtwerend, vormvast, blijft drijven op water'], ['Verwerking', 'Inblazen via boorgaten (spouw) of kruipluik (bodem)'], ['Uitvoering', 'Meestal een halve tot hele dag']],
    verstandig: ['Onregelmatige of licht vervuilde spouw', 'Spouw met resten specie of vuil op de bodem', 'Kruipruimte lager dan circa 40 cm', 'Water of veel vocht in de kruipruimte'],
    toepassing: ['Spouwmuurisolatie', 'Bodemisolatie'],
  },
  {
    id: 'glaswol-platen', naam: 'Glaswol platen en rollen', type: 'Plaat- en rolisolatie · minerale wol',
    foto: 'assets/materialen/glaswol-platen.jpeg',
    kort: 'De vertrouwde minerale wol voor constructies die open zijn of open worden gemaakt.',
    tekst: [
      'Bij nieuwbouw, een dakkapel of een constructie die al open ligt is werken met platen en rollen sneller en voordeliger dan inblazen. Glaswol is licht, eenvoudig op maat te snijden en klemt tussen regelwerk of balken.',
      'Naast warmte houdt glaswol ook geluid tegen. Bij tussenvloeren en scheidingswanden is dat vaak een tweede reden om ervoor te kiezen.',
    ],
    specs: [['Lambda-waarde', 'λ 0,032 – 0,040 W/mK'], ['Brandklasse', 'A1, niet-brandbaar'], ['Extra', 'Goede geluidsdemping']],
    verstandig: ['Nieuwbouw en open constructies', 'Dakkapellen en voorzetwanden', 'Wanneer geluidsisolatie meespeelt'],
    toepassing: ['Dakisolatie', 'Gevelisolatie', 'Dakkapellen'],
  },
  {
    id: 'pir-kingspan', naam: 'PIR / Kingspan isolatieplaten', type: 'Plaatisolatie · hardschuim',
    foto: 'assets/materialen/pir-kingspan.jpeg',
    kort: 'De hoogste isolatiewaarde per centimeter, voor waar ruimte kostbaar is.',
    tekst: [
      'PIR-platen halen met ongeveer de helft van de dikte dezelfde waarde als minerale wol. Dat is beslissend bij een plat dak dat niet hoger mag worden, onder een dakbeschot met weinig hoogte, of bij binnenisolatie waar elke centimeter woonruimte kost.',
      'De platen hebben een aluminium cachering die de isolatiewaarde ondersteunt en direct als dampremmende laag werkt. Ze zijn drukvast, waardoor ze ook onder een dakbedekking of zwevende vloer kunnen worden toegepast.',
    ],
    specs: [['Lambda-waarde', 'λ ≈ 0,022 W/mK'], ['Eigenschappen', 'Drukvast, vormvast, dampremmend'], ['Voordeel', 'Hoge Rd bij dunne opbouw']],
    verstandig: ['Plat dak of beperkte hoogte onder het dakbeschot', 'Binnenisolatie in kleine ruimtes', 'Buitengevelisolatie onder stucwerk of steenstrips'],
    let_op: 'PIR is dampdicht. Bij oude, vochtgevoelige gevels kiezen wij daarom vaker voor een dampopen, biobased opbouw.',
    toepassing: ['Dakisolatie', 'Gevelisolatie', 'Dakkapellen'],
  },
  {
    id: 'pif-folie', naam: 'PIF reflecterende isolatiefolie', type: 'Folie · meerlaags reflecterend',
    foto: 'assets/materialen/pif-folie.jpeg',
    kort: 'Dunne meerlaagse folie die warmtestraling weerkaatst in plaats van tegenhoudt.',
    tekst: [
      'Waar echt geen ruimte is voor platen of inblaaswerk, biedt reflecterende folie nog winst. De opbouw is enkele centimeters dik en werkt met luchtkamers en reflecterende lagen die warmtestraling terugkaatsen naar de woning.',
      'Folie vervangt volwaardige isolatie niet, maar in een lage kruipruimte of tegen een dakbeschot met nauwelijks hoogte is het vaak de enige haalbare maatregel, en dan levert het merkbaar comfort op.',
    ],
    specs: [['Dikte', 'Enkele centimeters totale opbouw'], ['Werking', 'Reflectie van warmtestraling'], ['Verwerking', 'Nieten of klemmen, luchtspouw aan beide zijden']],
    verstandig: ['Kruipruimte met weinig hoogte', 'Dakbeschot met minimale ruimte', 'Aanvulling op bestaande isolatie'],
    let_op: 'Voor de ISDE-subsidie moet de totale opbouw de vereiste Rd-waarde halen. Wij rekenen dat vooraf voor u door.',
    toepassing: ['Dakisolatie', 'Vloerisolatie'],
  },
  {
    id: 'biobased-isovlas', naam: 'Biobased isolatie', type: 'Natuurvezel · vlas en hennep',
    foto: 'assets/materialen/isovlas.jpeg',
    kort: 'Isolatie uit hernieuwbare grondstoffen, dampopen en vochtregulerend.',
    tekst: [
      'Vlas- en hennepvezel nemen tijdelijk vocht op en geven dat weer af zonder isolatiewaarde te verliezen. Daardoor blijft een houten dak- of vloerconstructie droog en gezond, en wordt condensvorming voorkomen. Bij oudere woningen met een vochtgevoelige constructie is dat vaak de reden om biobased te kiezen.',
      'Natuurvezel heeft daarnaast een hoge warmtecapaciteit: het houdt zomerse warmte langer buiten dan lichte minerale wol. Het materiaal is recyclebaar en levert in 2026 extra ISDE-subsidie op.',
    ],
    specs: [['Lambda-waarde', 'λ ≈ 0,038 W/mK'], ['Eigenschappen', 'Dampopen, vochtregulerend, recyclebaar'], ['Subsidie', 'Extra ISDE-bedrag per m² in 2026']],
    verstandig: ['Oudere woningen en vochtgevoelige constructies', 'Zolders die in de zomer te warm worden', 'Wanneer duurzaamheid zwaar meeweegt'],
    toepassing: ['Dakisolatie', 'Gevelisolatie', 'Vloerisolatie'],
  },
  {
    id: 'bodemfolie', naam: 'Bodemfolie', type: 'Folie · dampremmend',
    foto: 'assets/materialen/bodemfolie.jpeg',
    kort: 'Afdichtende laag op de kruipruimtebodem tegen optrekkend vocht.',
    tekst: [
      'Bodemfolie sluit de grond af, zodat vocht niet langer verdampt in de kruipruimte en via de vloer de woning binnentrekt. Wij leggen de folie overlappend en werken hem netjes aan tegen de fundering.',
      'In veel woningen combineren wij folie met isolatieparels: de folie pakt het vocht aan, de parels de warmte. Los toegepast is folie vooral een vochtmaatregel, geen isolatiemaatregel.',
    ],
    specs: [['Werking', 'Dampremmend, sluit bodemvocht af'], ['Verwerking', 'Overlappend gelegd, aangewerkt tegen fundering'], ['Combinatie', 'Vaak samen met isolatieparels']],
    verstandig: ['Duidelijk optrekkend vocht of muffe lucht', 'Vochtige kruipruimte vóór isoleren', 'Als voorbereiding op bodemisolatie'],
    let_op: 'Bodemfolie alleen komt niet in aanmerking voor ISDE-subsidie; de isolatiemaatregel zelf wel.',
    toepassing: ['Bodemisolatie'],
  },
];

function MateriaalKaart(props) {
  const { mat, onClick } = props;
  const [hover, setHover] = React.useState(false);
  return React.createElement('div', {
      onClick: onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false),
      style: {
        background: '#fff', borderRadius: 'var(--radius-lg)', padding: '26px 26px 24px', cursor: 'pointer',
        display: 'flex', flexDirection: 'column', gap: 10, minHeight: 230,
        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: { fontSize: 12, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 'var(--ls-caps)', color: 'var(--brand-primary)' } }, mat.type),
    React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 20, margin: 0, color: hover ? 'var(--brand-primary)' : 'var(--ink-900)' } }, mat.naam),
    React.createElement('p', { style: { margin: 0, fontSize: 14, lineHeight: 'var(--lh-body)', color: 'var(--text-secondary)', flex: 1 } }, mat.kort),
    React.createElement('span', { style: { fontSize: 14, fontWeight: 700, color: 'var(--brand-primary)', display: 'flex', alignItems: 'center', gap: 6 } },
      'Lees meer', React.createElement('span', { style: { transform: hover ? 'translateX(3px)' : 'none', transition: 'transform var(--dur-fast) var(--ease-standard)' } }, '→'))
  );
}

function MateriaalPagina(props) {
  const { mat, onNavigate, onBack, onOpen } = props;
  const { Card, Badge, Button } = window.ISOKNIGDesignSystem_b5ec1b;
  const ICON = (n) => 'https://unpkg.com/lucide-static@latest/icons/' + n + '.svg';
  const others = ISO_MAT_DATA.filter((m) => m.id !== mat.id).slice(0, 4);

  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: '56px 40px 60px' } },
        React.createElement('div', { style: { marginBottom: 22 } },
          React.createElement('a', { onClick: onBack, style: { color: 'var(--brand-primary)', fontWeight: 700, fontSize: 14, cursor: 'pointer' } }, '← Alle materialen')),
        React.createElement(Badge, { tone: 'brand' }, mat.type),
        React.createElement('h1', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-lg)', margin: '16px 0 12px', maxWidth: '26ch', lineHeight: 'var(--lh-tight)' } }, mat.naam),
        React.createElement('p', { style: { color: 'var(--ink-200)', fontSize: 'var(--fs-body-lg)', lineHeight: 'var(--lh-body)', maxWidth: '60ch', margin: 0 } }, mat.kort)
      )
    ),

    React.createElement('section', { style: { background: '#fff' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '64px 40px', display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,380px)', gap: 56, alignItems: 'start' } },
        React.createElement('div', { style: { minWidth: 0 } },
          (mat.foto
            ? React.createElement('img', { src: mat.foto, alt: 'Foto: ' + mat.naam, style: { width: '100%', height: 320, objectFit: 'cover', borderRadius: 14, marginBottom: 32, display: 'block' } })
            : React.createElement('image-slot', { id: 'mat-' + mat.id, shape: 'rounded', radius: '14', placeholder: 'Foto: ' + mat.naam, style: { width: '100%', height: 320, marginBottom: 32 } })),
          mat.tekst.map((t, i) => React.createElement('p', { key: i, style: { fontSize: 'var(--fs-body-md)', color: i === 0 ? 'var(--ink-900)' : 'var(--text-secondary)', lineHeight: 'var(--lh-body)', margin: '0 0 18px', maxWidth: '68ch' } }, t)),
          mat.let_op && React.createElement('div', { style: { display: 'flex', gap: 14, alignItems: 'flex-start', background: 'var(--orange-50)', borderRadius: 'var(--radius-lg)', padding: '20px 24px', marginTop: 12 } },
            React.createElement('img', { src: ICON('info'), alt: '', style: { width: 18, height: 18, marginTop: 2, flexShrink: 0 } }),
            React.createElement('div', null,
              React.createElement('div', { style: { fontWeight: 700, fontSize: 14, marginBottom: 4, color: 'var(--ink-900)' } }, 'Goed om te weten'),
              React.createElement('p', { style: { margin: 0, fontSize: 14, color: 'var(--text-secondary)', lineHeight: 'var(--lh-body)' } }, mat.let_op)))
        ),

        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 20, position: 'sticky', top: 24 } },
          React.createElement(Card, { padding: 'var(--space-6)' },
            React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 17, margin: '0 0 14px' } }, 'Eigenschappen'),
            React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } },
              mat.specs.map(([k, v]) => React.createElement('div', { key: k, style: { display: 'flex', justifyContent: 'space-between', gap: 16, fontSize: 14, borderBottom: '1px solid var(--border-default)', paddingBottom: 8 } },
                React.createElement('span', { style: { color: 'var(--text-secondary)' } }, k),
                React.createElement('span', { style: { color: 'var(--ink-900)', fontWeight: 600, textAlign: 'right' } }, v))))
          ),
          React.createElement(Card, { padding: 'var(--space-6)' },
            React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 17, margin: '0 0 14px' } }, 'Verstandig bij'),
            React.createElement('ul', { style: { margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 } },
              mat.verstandig.map((v) => React.createElement('li', { key: v, style: { display: 'flex', gap: 10, alignItems: 'baseline', fontSize: 14, color: 'var(--ink-900)', lineHeight: 'var(--lh-body)' } },
                React.createElement('span', { style: { color: 'var(--brand-primary)', fontWeight: 700 } }, '✓'), v)))
          ),
          React.createElement(Card, { padding: 'var(--space-6)', style: { background: 'var(--ink-900)', border: 'none' } },
            React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 17, margin: '0 0 8px', color: '#fff' } }, 'Advies over dit materiaal'),
            React.createElement('p', { style: { margin: '0 0 16px', fontSize: 14, color: 'var(--ink-200)', lineHeight: 'var(--lh-body)' } }, 'Onze adviseur bekijkt uw woning en vertelt welk materiaal hier het meeste oplevert.'),
            React.createElement(Button, { variant: 'primary', onClick: () => onNavigate('contact') }, 'Adviesgesprek aanvragen'))
        )
      )
    ),

    React.createElement('section', { style: { background: 'var(--ink-50)' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '56px 40px 72px' } },
        React.createElement('div', { style: { fontSize: 12, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 'var(--ls-caps)', color: 'var(--text-secondary)', marginBottom: 12 } }, 'Wij passen dit toe bij'),
        React.createElement('div', { style: { display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 44 } },
          mat.toepassing.map((t) => React.createElement('button', {
            key: t, type: 'button', onClick: () => onNavigate('diensten', t.toLowerCase()),
            style: { fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600, padding: '10px 18px', borderRadius: 'var(--radius-pill)', border: '1px solid var(--border-default)', background: '#fff', cursor: 'pointer', color: 'var(--ink-900)' },
          }, t))),
        React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 24, margin: '0 0 20px' } }, 'Andere materialen'),
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0,1fr))', gap: 18 } },
          others.map((m) => React.createElement(MateriaalKaart, { key: m.id, mat: m, onClick: () => onOpen(m.id) })))
      )
    )
  );
}

function MaterialsScreen(props) {
  const { Badge } = window.ISOKNIGDesignSystem_b5ec1b;
  const { onNavigate, initialId } = props;
  const [activeId, setActiveId] = React.useState(ISO_MAT_DATA.some((m) => m.id === initialId) ? initialId : null);
  React.useEffect(() => { setActiveId(ISO_MAT_DATA.some((m) => m.id === initialId) ? initialId : null); }, [initialId]);
  const active = ISO_MAT_DATA.find((m) => m.id === activeId);
  const open = (id) => { setActiveId(id); window.scrollTo({ top: 0 }); };

  if (active) return React.createElement(MateriaalPagina, {
    mat: active, onNavigate: onNavigate, onOpen: open,
    onBack: () => { setActiveId(null); window.scrollTo({ top: 0 }); },
  });

  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: '64px 40px' } },
        React.createElement(Badge, { tone: 'brand' }, 'Materialen'),
        React.createElement('h1', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-lg)', margin: '16px 0 12px', maxWidth: '24ch' } }, 'De materialen waarmee wij isoleren'),
        React.createElement('p', { style: { color: 'var(--ink-200)', fontSize: 'var(--fs-body-lg)', lineHeight: 'var(--lh-body)', maxWidth: '60ch', margin: 0 } },
          'Welk materiaal het beste werkt, hangt af van de constructie, de beschikbare ruimte en de staat van de woning. Kies een materiaal en lees wat het is, waar het sterk in is en wanneer wij het adviseren.')
      )
    ),
    React.createElement('section', { style: { background: 'var(--ink-50)' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '56px 40px 80px' } },
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0,1fr))', gap: 22 } },
          ISO_MAT_DATA.map((m) => React.createElement(MateriaalKaart, { key: m.id, mat: m, onClick: () => open(m.id) })))
      )
    )
  );
}
window.MaterialsScreen = MaterialsScreen;
window.ISO_ISO_MAT_DATA = ISO_MAT_DATA;