const { Card, Badge } = window.ISOKNIGDesignSystem_b5ec1b;

function H2(text) { return React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-md)', margin: '0 0 12px' } }, text); }
function H3(text) { return React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 19, margin: '0 0 8px', color: 'var(--ink-900)' } }, text); }
function P(text) { return React.createElement('p', { style: { fontSize: 15, lineHeight: 'var(--lh-body)', color: 'var(--text-secondary)', margin: '0 0 14px' } }, text); }
function UL(items) {
  return React.createElement('ul', { style: { margin: '0 0 16px', padding: 0, listStyle: 'none', display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: '4px 24px' } },
    items.map((it) => React.createElement('li', { key: it, style: { fontSize: 14, color: 'var(--text-primary)', display: 'flex', gap: 8, alignItems: 'baseline' } },
      React.createElement('span', { style: { color: 'var(--brand-primary)', fontWeight: 700 } }, '✓'), it)));
}
const ICON = (name) => 'https://unpkg.com/lucide-static@latest/icons/' + name + '.svg';

const SERVICE_GROUPS = [
  {
    id: 'dakisolatie', icon: 'home', title: 'Dakisolatie', besparingPct: '15%', besparing: 'Tot 15% lagere stookkosten doordat warmte niet langer via het dak verloren gaat.', intro: 'Een goed geïsoleerd dak voorkomt warmteverlies, verhoogt het wooncomfort en verlaagt de energiekosten aanzienlijk. Afhankelijk van de constructie van het dak en de beschikbare ruimte bieden wij verschillende isolatiesystemen aan.',
    hero: 'assets/diensten/dakisolatie-hero.png',
    foto: 'assets/diensten/dakisolatie.jpeg',
  },
  {
    id: 'spouwmuurisolatie', icon: 'layers', title: 'Spouwmuurisolatie', besparingPct: '20%', besparing: 'Tot 20% besparing op uw energierekening, met de kortste terugverdientijd van alle isolatiemaatregelen.', intro: 'Voor spouwmuurisolatie werken wij met Knauf Supafil Cavity Wall. Dit hoogwaardige inblaasmateriaal vult de volledige spouw naadloos waardoor warmteverlies aanzienlijk wordt verminderd.',
    hero: 'assets/diensten/spouwmuurisolatie-hero.jpeg',
    foto: 'assets/diensten/spouwmuurisolatie.jpeg',
    ul: ['Lagere energiekosten', 'Meer wooncomfort', 'Minder tocht', 'Uitstekende geluidsisolatie', 'Vochtwerend', 'Lange levensduur', 'Onderhoudsvrij'],
    footnote: 'Wij voeren spouwmuurisolatie uit volgens de actuele richtlijnen voor natuurvriendelijk isoleren. Indien noodzakelijk wordt vooraf ecologisch onderzoek uitgevoerd zodat beschermde diersoorten, zoals vleermuizen en vogels, niet worden verstoord.',
  },
  {
    id: 'gevelisolatie', icon: 'building-2', title: 'Gevelisolatie', besparingPct: '20%', besparing: 'Vergelijkbare besparing als spouwmuurisolatie (circa 20%), plus een geïsoleerde en opgefriste gevel.', intro: 'Wanneer spouwmuurisolatie niet mogelijk is, biedt gevelisolatie een uitstekende oplossing. Wij leveren verschillende systemen afhankelijk van de woning en gewenste isolatiewaarde.',
    hero: 'assets/diensten/gevelisolatie-hero.png',
    foto: 'assets/diensten/gevelisolatie.jpeg',
    ul: ['Biobased isolatie', 'Knauf Supafil Timber Frame', 'PIR/Kingspan isolatieplaten'],
  },
  {
    id: 'bodemisolatie', icon: 'arrow-down-to-line', title: 'Bodemisolatie', besparingPct: '10%', besparing: 'Tot 10% besparing op stookkosten en een merkbaar warmere vloer.', intro: 'Voor kruipruimtes passen wij hoogwaardige HR+++ isolatieparels toe. Deze zorgen voor een drogere kruipruimte, een warmere vloer en een lager energieverbruik.',
    hero: 'assets/diensten/bodemisolatie-hero.jpg',
    foto: 'assets/diensten/bodemisolatie.png',
    ul: ['Minder optrekkend vocht', 'Warmere vloer', 'Lagere energiekosten', 'Betere luchtkwaliteit', 'Snelle verwerking'],
  },
  {
    id: 'vloerisolatie', icon: 'grid-2x2', title: 'Vloer- en tussenvloerisolatie', besparingPct: '10%', besparing: 'Tot 10% besparing op de energierekening en minder geluidsoverdracht tussen verdiepingen.', intro: 'Afhankelijk van de constructie adviseren wij het meest geschikte isolatiemateriaal. Wij werken onder andere met biobased inblaasisolatie, Knauf Supafil Timber Frame en PIF-isolatie. Hierdoor worden warmteverlies en geluidsoverdracht aanzienlijk beperkt.',
    hero: 'assets/diensten/vloerisolatie-hero.jpeg',
    foto: 'assets/diensten/vloerisolatie.png',
    ul: ['Biobased inblaasisolatie', 'Knauf Supafil Timber Frame', 'PIF-isolatie'],
  },
  {
    id: 'airconditioning', icon: 'wind', title: 'Airconditioning',
    foto: 'assets/diensten/airconditioning.jpeg', intro: 'Naast isolatie leveren en monteren wij moderne airconditioningsystemen voor woningen en bedrijven. Onze systemen zorgen niet alleen voor verkoeling tijdens warme dagen, maar kunnen tevens energiezuinig verwarmen.',
    ul: ['Single Split airco\u2019s', 'Multi Split airco\u2019s', 'Vloermodel airco\u2019s', 'Complete installatie', 'Onderhoud', 'Service'],
    merken: [{ naam: 'Daikin', logo: 'assets/brands/daikin.png', h: 26 }, { naam: 'Mitsubishi Electric', logo: 'assets/brands/mitsubishi.png', h: 42 }, { naam: 'Haier', logo: 'assets/brands/haier.png', h: 28 }],
  },
  {
    id: 'gevelreiniging', icon: 'spray-can', title: 'Gevelreiniging', intro: 'Vuil, algen en groene aanslag tasten niet alleen het aanzien van uw woning aan, maar houden ook vocht vast in het steenwerk. Wij reinigen gevels met de juiste techniek en druk voor het type steen, zodat de gevel schoon wordt zonder beschadiging van het metselwerk of de voegen.',
    foto: 'assets/diensten/gevelreiniging.png',
    ul: ['Verwijderen van algen, mos en groene aanslag', 'Behandeling afgestemd op het type steen', 'Voorkomt vochtophoping in het metselwerk', 'Woning ziet er direct verzorgd uit', 'Vaak gecombineerd met impregneren'],
  },
  {
    id: 'impregneren', icon: 'droplets', title: 'Impregneren',
    foto: 'assets/diensten/impregneren.jpeg', intro: 'Na reiniging brengen wij een waterafstotende impregnatielaag aan. Regenwater trekt daardoor niet langer in de steen, waardoor de gevel droog blijft. Een droge gevel isoleert beter en is minder gevoelig voor vorstschade en nieuwe aanslag.',
    ul: ['Waterafstotende, dampopen behandeling', 'Droger metselwerk en betere isolatiewaarde', 'Minder kans op vorstschade', 'Gaat nieuwe algengroei tegen', 'Behoudt het originele aanzicht van de gevel'],
    footnote: 'Impregneren voeren wij uitsluitend uit op een schone en droge gevel. Waar nodig gaat gevelreiniging hieraan vooraf.',
  },
  {
    id: 'dakkapellen', icon: 'home', title: 'Dakkapellen',
    foto: 'assets/diensten/dakkapellen.png', intro: 'Een dakkapel levert extra ruimte, hoogte en daglicht op de verdieping. Wij plaatsen dakkapellen op maat, volledig geïsoleerd en inclusief de complete binnenafwerking, zodat de ruimte direct in gebruik kan worden genomen.',
    ul: ['Op maat gemaakt voor uw woning', 'Volledig geïsoleerde constructie', 'Inclusief binnenafwerking', 'Meer daglicht en gebruiksruimte', 'Plaatsing meestal binnen één dag'],
  },
  {
    id: 'dakramen', icon: 'panel-top', title: 'Dakramen',
    foto: 'assets/diensten/dakramen.jpeg', intro: 'Een dakraam brengt daglicht en frisse lucht op zolder of in een aangebouwde ruimte. Wij plaatsen dakramen van gerenommeerde merken, waterdicht ingewerkt in de dakconstructie en compleet met binnenafwerking.',
    ul: ['Plaatsing incl. binnenafwerking', 'Waterdichte inwerking in de dakbedekking', 'Isolerende beglazing', 'Meer daglicht en ventilatie', 'Ook te combineren met dakisolatie'],
    merken: [{ naam: 'VELUX', logo: 'assets/brands/velux.png', h: 34 }, { naam: 'FAKRO', logo: 'assets/brands/fakro.png', h: 30 }],
  },
  {
    id: 'overige-diensten', icon: 'hammer', title: 'Afbouw en renovatie',
    foto: 'assets/diensten/afbouw-renovatie.png', intro: 'Naast isolatie verzorgen wij diverse aanvullende werkzaamheden, zodat de woning na het isolatiewerk volledig wordt afgewerkt.',
    ul: ['Dakrenovaties (pannen, bitumen e.a.)', 'Complete afbouw', 'Gipsplaten', 'Stucwerk', 'Sauswerk', 'Binnenafwerking'],
  },
];


const DETAILS = {
  dakisolatie: {
    warmteverlies: 'Tot 30% van de warmte in een ongeïsoleerde woning verdwijnt via het dak. Daarmee is dakisolatie de maatregel met de grootste energiebesparing per geïnvesteerde euro.',
    materialen: [
      { naam: 'Biobased dakisolatie', foto: 'assets/materialen/isovlas.jpeg', tekst: 'Vlas- en hennepvezel uit hernieuwbare grondstoffen. Dampopen en vochtregulerend, waardoor de dakconstructie gezond blijft en condensvorming wordt voorkomen. Geeft in 2026 recht op € 5 per m² extra ISDE-subsidie.', ul: ['Duurzaam en milieuvriendelijk', 'Warmte- én geluidsisolatie', 'Vochtregulerend en dampopen', 'Comfortabel in zomer én winter', 'Lange levensduur en recyclebaar'] },
      { naam: 'Knauf Supafil Timber Frame', foto: 'assets/materialen/supafil-timber-frame.png', tekst: 'Glaswol die met een blaasmachine in de dakconstructie wordt gebracht. Voor hellende daken en houtskeletconstructies: het systeem vult iedere holle ruimte volledig, zodat koudebruggen en verzakking uitblijven.', ul: ['Naadloze isolatie', 'Zeer hoge isolatiewaarde', 'Brandklasse A1', 'Waterafstotend', 'Geschikt voor renovatie en nieuwbouw'] },
      { naam: 'PIR / Kingspan isolatieplaten', foto: 'assets/materialen/pir-kingspan.jpeg', tekst: 'Maximale isolatiewaarde bij een minimale opbouwdikte. Ideaal wanneer de hoogte onder het dakbeschot beperkt is of bij een plat dak.' },
      { naam: 'PIF reflecterende dakisolatie', foto: 'assets/materialen/pif-folie.jpeg', tekst: 'Dunne meerlaagse folie die warmtestraling weerkaatst. Toepasbaar waar nauwelijks ruimte is voor traditionele isolatie.' },
    ],
    isde: { bedrag: '€ 16,25 per m²', rd: 'Rd ≥ 3,5 m²K/W', min: '20 m²', max: '200 m²' },
    uitvoering: [
      'Wij inspecteren de dakconstructie en meten de beschikbare ruimte op.',
      'Op basis daarvan kiezen wij het systeem: inblazen, platen of folie.',
      'Bij een hellend dak isoleren wij tussen de sporen; bij een plat dak op of onder het dakbeschot.',
      'Wij werken de binnenzijde af en leveren de dakruimte schoon op.',
    ],
    aandacht: 'Zolder- of vlieringvloerisolatie is een andere ISDE-maatregel dan dakisolatie (€ 4 per m², vanaf 10 m²). Wij zetten de juiste maatregel, het aantal m² en de Rd-waarde altijd apart op de factuur, zodat uw subsidieaanvraag niet wordt afgewezen.',
  },
  spouwmuurisolatie: {
    warmteverlies: 'Een ongeïsoleerde spouwmuur is verantwoordelijk voor circa 20 tot 25% van het warmteverlies. Spouwmuurisolatie is de maatregel met de kortste terugverdientijd: meestal enkele jaren.',
    materialen: [
      { naam: 'Knauf Supafil Cavity Wall', foto: 'assets/materialen/supafil-cavity-wall.jpeg', tekst: 'Ongebonden glaswolvlokken die de volledige spouw naadloos vullen. Waterafstotend, dampopen, brandklasse A1 en verzakkingsvrij. Rd-waarde ruim boven de ISDE-eis.' },
      { naam: 'EPS-isolatieparels', foto: 'assets/materialen/eps-parels.jpeg', tekst: 'Geplakte parels met een hoge isolatiewaarde. Bij onregelmatige of vervuilde spouwen vullen de parels de ruimte betrouwbaar op.' },
    ],
    isde: { bedrag: '€ 5,25 per m²', rd: 'Rd ≥ 1,1 m²K/W', min: '10 m²', max: '170 m²' },
    uitvoering: [
      'Wij controleren de spouw met een endoscoop op breedte, vervuiling en vocht.',
      'Waar nodig laten wij eerst ecologisch onderzoek uitvoeren naar vleermuizen en vogels.',
      'Wij boren gaten in het voegwerk in een vast patroon en blazen de spouw vol.',
      'De gaten worden dichtgezet in de kleur van het voegwerk; werkzaamheden duren meestal één dag.',
    ],
    aandacht: 'Wij isoleren volgens de actuele richtlijnen voor natuurvriendelijk isoleren. Was er al isolatie aanwezig, dan mag die dikte niet meetellen om aan de minimale isolatiewaarde te komen.',
  },
  gevelisolatie: {
    warmteverlies: 'Woningen van vóór 1920 hebben vaak geen spouw. Dan verloopt het warmteverlies rechtstreeks door het massieve metselwerk en is isolatie aan de binnen- of buitenzijde de oplossing.',
    materialen: [
      { naam: 'Voorzetwand met Knauf Supafil Timber Frame', foto: 'assets/materialen/voorzetwand-supafil.png', tekst: 'Houten regelwerk aan de binnenzijde, volledig ingeblazen met glaswol en afgewerkt met gipsplaat. Kost enkele centimeters ruimte, maar houdt het gevelbeeld intact.' },
      { naam: 'PIR / Kingspan platen', foto: 'assets/materialen/pir-kingspan.jpeg', tekst: 'Hoge isolatiewaarde bij een dunne opbouw, voor situaties waarin ruimte binnen kostbaar is.' },
      { naam: 'Biobased gevelisolatie', foto: 'assets/materialen/isovlas.jpeg', tekst: 'Dampopen natuurvezel voor oudere, vochtgevoelige gevels. Levert in 2026 € 6 per m² extra ISDE-subsidie op.' },
    ],
    isde: { bedrag: '€ 20,25 per m²', rd: 'Rd ≥ 3,5 m²K/W', min: '10 m²', max: '170 m²' },
    uitvoering: [
      'Wij bepalen samen of isolatie aan de binnen- of buitenzijde het beste past.',
      'Bij binnenisolatie plaatsen wij regelwerk, isolatie en een dampregulerende laag.',
      'Bij buitenisolatie wordt het systeem afgewerkt met stucwerk of steenstrips.',
      'Wij verzorgen de complete binnenafwerking, inclusief stuc- en sauswerk.',
    ],
    aandacht: 'Het isoleren van binnenmuren en scheidingswanden komt niet in aanmerking voor ISDE-subsidie. Gevelisolatie in een nieuwe uitbouw of heropbouw evenmin.',
  },
  bodemisolatie: {
    warmteverlies: 'Een koude, vochtige kruipruimte trekt warmte uit de vloer en brengt vocht in de woning. Bodemisolatie is de juiste keuze wanneer de kruipruimte laag is of wanneer er water in staat.',
    materialen: [
      { naam: 'HR+++ isolatieparels', foto: 'assets/materialen/eps-parels.jpeg', tekst: 'Losse parels die de bodem van de kruipruimte in een isolerende laag inpakken. Snel aangebracht, ook bij een lage kruipruimte, en vochtwerend.' },
      { naam: 'Bodemfolie', foto: 'assets/materialen/bodemfolie.jpeg', tekst: 'Waar optrekkend vocht het hoofdprobleem is, brengen wij eerst bodemfolie aan en isoleren wij daarna.' },
    ],
    isde: { bedrag: '€ 3,00 per m²', rd: 'Rd of Rbf ≥ 3,5 m²K/W', min: '20 m²', max: '–' },
    uitvoering: [
      'Wij inspecteren de kruipruimte op hoogte, vocht en waterstand.',
      'Staat er water of is de ruimte te laag voor vloerisolatie, dan isoleren wij de bodem.',
      'De parels worden via een kruipluik of gevelopening ingeblazen.',
      'Na oplevering is de kruipruimte droger en de vloer merkbaar warmer.',
    ],
    aandacht: 'U kunt bij de ISDE-aanvraag kiezen tussen bodemisolatie óf vloerisolatie, niet voor beide. Wij adviseren welke maatregel in uw situatie het meeste oplevert.',
  },
  vloerisolatie: {
    warmteverlies: 'Via een ongeïsoleerde vloer verdwijnt circa 10 tot 15% van de warmte. Vloerisolatie levert direct comfort op: geen koude voeten en minder tocht langs de plinten.',
    materialen: [
      { naam: 'Knauf Supafil Timber Frame', foto: 'assets/materialen/supafil-cavity-wall.jpeg', tekst: 'Ingeblazen glaswol tussen de balklaag van een houten vloer of tussenvloer. Vult volledig en dempt tegelijk geluid tussen verdiepingen.' },
      { naam: 'Biobased inblaasisolatie', foto: 'assets/materialen/biobased-inblaas-vloer.jpeg', tekst: 'Natuurvezel voor een dampopen constructie, met in 2026 € 2 per m² extra ISDE-subsidie voor vloerisolatie.' },
      { naam: 'PIF reflecterende isolatie', foto: 'assets/materialen/pif-folie-vloer.jpeg', pos: 'center 35%', tekst: 'Dunne folieopbouw voor kruipruimtes waar de hoogte beperkt is.' },
    ],
    isde: { bedrag: '€ 5,50 per m²', rd: 'Rd ≥ 3,5 m²K/W', min: '20 m²', max: '130 m²' },
    uitvoering: [
      'Wij meten de kruipruimte in en controleren of de hoogte werkbaar is.',
      'Bij een houten vloer isoleren wij tussen de balklaag, bij een betonvloer aan de onderzijde.',
      'Bij een tussenvloer beperken wij ook de geluidsoverdracht tussen verdiepingen.',
      'Wij ruimen de kruipruimte op en leveren schoon op.',
    ],
    aandacht: 'Staat er water in de kruipruimte, dan is vloerisolatie niet mogelijk. Wij isoleren dan de bodem; het ISDE-bedrag is in dat geval € 3,00 per m² in plaats van € 5,50.',
  },
  airconditioning: {
    warmteverlies: 'Een moderne airco is een lucht-luchtwarmtepomp: in de zomer koelt hij, in de winter verwarmt hij met een rendement waar een gasketel niet aan komt.',
    materialen: [
      { naam: 'Single Split', foto: 'assets/materialen/airco-single-split.jpeg', tekst: 'Één binnenunit en één buitenunit. De standaardoplossing voor een woonkamer of slaapkamer.' },
      { naam: 'Multi Split', foto: 'assets/materialen/airco-multi-split.jpeg', tekst: 'Meerdere binnenunits op één buitenunit, voor het koelen en verwarmen van meerdere ruimtes.' },
      { naam: 'Vloermodel', tekst: 'Een vloerairco komt laag tegen de wand, op de plaats van een radiator. Onopvallend in het interieur en fijn bij verwarmen, omdat de warmte onderin de ruimte vrijkomt.', foto: 'assets/vloerairco.jpeg' },
    ],
    uitvoering: [
      'Wij bepalen het benodigde vermogen op basis van ruimte, isolatie en glasoppervlak.',
      'Onze monteurs plaatsen de binnen- en buitenunit en leggen de leidingen weg.',
      'Wij vullen, testen en leveren het systeem werkend op met uitleg.',
      'Jaarlijks onderhoud houdt het rendement en de luchtkwaliteit op peil.',
    ],
    aandacht: 'Airconditioning valt niet onder de ISDE-isolatiesubsidie. Isoleer bij voorkeur eerst: in een goed geïsoleerde woning is een kleiner en zuiniger systeem voldoende.',
  },
  gevelreiniging: {
    warmteverlies: 'Algen, mos en groene aanslag houden vocht vast in het metselwerk. Een natte gevel isoleert slechter en is gevoeliger voor vorstschade.',
    materialen: [
      { naam: 'Lagedruk-reiniging', foto: 'assets/diensten/lagedruk-reiniging.jpeg', tekst: 'Voor zacht of oud metselwerk en voegwerk, zodat de steen en de voegen intact blijven.' },
      { naam: 'Hogedruk met heet water', foto: 'assets/diensten/gevelreiniging.png', tekst: 'Voor hardere steen en zwaardere vervuiling, met een druk die op het type steen is afgestemd.' },
      { naam: 'Chemische behandeling', foto: 'assets/diensten/chemische-behandeling.jpeg', tekst: 'Tegen diepere algen- en mosgroei, gevolgd door grondig naspoelen.' },
    ],
    uitvoering: [
      'Wij bepalen het type steen en de staat van het voegwerk.',
      'Wij dekken ramen, deuren en groen af.',
      'De gevel wordt gereinigd met de techniek en druk die bij de steen past.',
      'Na drogen kan de gevel direct worden geïmpregneerd.',
    ],
    aandacht: 'Wij combineren gevelreiniging bijna altijd met impregneren. Alleen reinigen betekent dat de aanslag binnen enkele jaren terugkomt.',
  },
  impregneren: {
    warmteverlies: 'Een gevel die regenwater opneemt, geleidt warmte veel sneller naar buiten. Droog metselwerk isoleert aantoonbaar beter en droogt sneller op.',
    materialen: [
      { naam: 'Siloxaan-impregneermiddel', foto: 'assets/diensten/impregneren.jpeg', tekst: 'Dringt diep in de steen en maakt het metselwerk waterafstotend, terwijl vocht van binnenuit kan blijven ontsnappen.' },
      { naam: 'Voegwerkherstel', foto: 'assets/diensten/voegwerkherstel.jpeg', tekst: 'Waar het voegwerk is aangetast, herstellen wij dat eerst. Impregneren van slecht voegwerk heeft geen effect.' },
    ],
    uitvoering: [
      'De gevel wordt eerst gereinigd en moet volledig droog zijn.',
      'Wij herstellen waar nodig het voegwerk.',
      'Het middel wordt in twee lagen nat-in-nat opgebracht.',
      'Het effect is direct zichtbaar: water perlt van de gevel af.',
    ],
    aandacht: 'Impregneren is dampopen: de gevel blijft ademen. Het is geen vervanging van isolatie, maar het maakt bestaande isolatie effectiever.',
  },
  dakkapellen: {
    warmteverlies: 'Een dakkapel maakt een zolder pas echt bruikbaar. Omdat de constructie volledig nieuw is, isoleren wij hem direct op de huidige norm.',
    materialen: [
      { naam: 'Geïsoleerde prefab-constructie', foto: 'assets/diensten/dakkapellen.png', tekst: 'Op maat gemaakt, met een isolatiepakket dat de Rd-eis ruim haalt.' },
      { naam: 'PIR / Kingspan platen', foto: 'assets/materialen/pir-kingspan.jpeg', tekst: 'Hoge isolatiewaarde bij een dunne wand, zodat er binnen zoveel mogelijk ruimte overblijft.' },
      { naam: 'Kunststof of houten kozijnen', foto: 'assets/diensten/dakkapel-kozijnen.jpeg', tekst: 'Met HR++ of triple beglazing en draaikiepramen voor ventilatie.' },
    ],
    uitvoering: [
      'Wij meten in en verzorgen indien nodig de omgevingsvergunning.',
      'De dakkapel wordt op maat geproduceerd.',
      'Plaatsing gebeurt meestal binnen één dag, waarna de woning weer wind- en waterdicht is.',
      'Wij verzorgen de complete binnenafwerking: gipsplaat, stucwerk en sauswerk.',
    ],
    aandacht: 'Een vergunning is alleen nodig voor een dakkapel aan de voorzijde. Aan de achterzijde is dat niet nodig. Wij weten wat de gemeente vraagt en regelen de aanvraag desgewenst voor u.',
  },
  dakramen: {
    warmteverlies: 'Enkel glas of een oud dakraam is een koudebrug in een verder goed geïsoleerd dak. Vervangen levert direct comfortwinst op.',
    materialen: [
      { naam: 'Dakramen van gerenommeerde merken', foto: 'assets/diensten/dakramen.jpeg', tekst: 'Met HR++ of triple beglazing en een isolerend kader.' },
      { naam: 'Isolatie- en gootstukset', foto: 'assets/diensten/dakraam-isolatie.jpeg', tekst: 'Waterdichte inwerking in pannen of bitumen, met een isolatiekader rondom.' },
      { naam: 'Solar rolluik', foto: 'assets/diensten/solar-rolluik.jpeg', tekst: 'Een buitenrolluik op zonne-energie, zonder kabels naar binnen. Houdt de zomerwarmte buiten, verduistert volledig en is met afstandsbediening te bedienen.' },
    ],
    uitvoering: [
      'Wij bepalen maat en plaats in overleg, rekening houdend met de dakconstructie.',
      'Het raam wordt waterdicht in de dakbedekking ingewerkt.',
      'Rondom brengen wij een isolatiekader aan tegen koudebruggen.',
      'Wij werken de binnenzijde compleet af.',
    ],
    aandacht: 'Laat dakramen bij voorkeur plaatsen op het moment dat het dak wordt geïsoleerd. Dat is voordeliger en het resultaat is beter.',
  },
  'overige-diensten': {
    warmteverlies: 'Na het isolatiewerk moet een woning ook netjes worden opgeleverd. Wij verzorgen de complete afbouw, zodat u niet met meerdere partijen te maken heeft.',
    materialen: [
      { naam: 'Dakrenovatie', foto: 'assets/diensten/dakrenovatie.jpeg', tekst: 'Vervangen van pannen, bitumen of complete dakbedekking, in combinatie met isolatie.' },
      { naam: 'Gipsplaat en stucwerk', foto: 'assets/diensten/gipsplaat-stucwerk.jpeg', tekst: 'Wanden en plafonds dicht en vlak afgewerkt na isolatiewerkzaamheden.' },
      { naam: 'Sauswerk en binnenafwerking', foto: 'assets/diensten/binnenafwerking.jpeg', tekst: 'Van plint tot plafond, zodat de ruimte direct in gebruik kan.' },
    ],
    uitvoering: [
      'Wij bespreken welke afbouwwerkzaamheden nodig zijn na het isoleren.',
      'De werkzaamheden worden in één planning met het isolatiewerk gecombineerd.',
      'Ons eigen team voert uit; geen onderaannemers.',
      'Wij leveren schoon en opgeruimd op.',
    ],
    aandacht: 'Afbouw- en renovatiewerk komt niet in aanmerking voor ISDE-subsidie. De isolatiemaatregel zelf wel, mits die apart op de factuur staat.',
  },
};


const DIENST_FAQS = {
  dakisolatie: [
    { q: 'Wat is dakisolatie en waarom is het belangrijk?', a: 'Dakisolatie is het aanbrengen van isolatiemateriaal op of onder het dak om warmteverlies te voorkomen. Via een ongeïsoleerd dak verdwijnt tot 30% van de warmte. Een goed geïsoleerd dak betekent een lagere energierekening, meer wooncomfort en een beter energielabel.' },
    { q: 'Wat is het verschil tussen een plat dak en een schuin dak isoleren?', a: 'Bij een schuin dak isoleren wij tussen of onder de daksporen, meestal met ingeblazen glaswol of PIR-platen. Bij een plat dak wordt de isolatie op het dakbeschot onder de dakbedekking aangebracht, of aan de binnenzijde tegen het plafond. De constructie bepaalt welk systeem mogelijk is.' },
    { q: 'Welke materialen worden gebruikt voor dakisolatie?', a: 'Wij werken met Knauf Supafil Timber Frame (ingeblazen glaswol), PIR- en Kingspan-platen, PIF reflecterende folie en biobased isolatie van natuurvezel. Welk materiaal het beste past hangt af van de constructie en de beschikbare opbouwdikte.' },
    { q: 'Kan ik dakisolatie ook binnen laten aanbrengen?', a: 'Ja. Wanneer de dakbedekking nog goed is, isoleren wij aan de binnenzijde. Dat is sneller en voordeliger dan het dak van buitenaf openleggen. Wij werken de binnenzijde af met gipsplaat, zodat de ruimte direct bruikbaar is.' },
    { q: 'Hoeveel subsidie krijg ik voor dakisolatie?', a: 'In 2026 bedraagt de ISDE-subsidie € 16,25 per m² voor dakisolatie, vanaf 20 m² en tot maximaal 200 m². De isolatie moet een Rd-waarde van minimaal 3,5 m²K/W halen. Bij twee of meer maatregelen binnen 24 maanden verdubbelt het bedrag per m².' },
    { q: 'Is zolder- of vlieringvloerisolatie hetzelfde als dakisolatie?', a: 'Nee, dat zijn twee verschillende ISDE-maatregelen. Zolder- of vlieringvloerisolatie levert € 4 per m² op vanaf 10 m². Wij zetten de juiste maatregel, het aantal m² en de Rd-waarde altijd apart op de factuur, zodat de aanvraag niet wordt afgewezen.' },
  ],
  spouwmuurisolatie: [
    { q: 'Heeft mijn woning een spouwmuur?', a: 'De meeste woningen die na 1920 zijn gebouwd hebben een spouwmuur: twee muren met enkele centimeters ruimte ertussen. Wij controleren dit vooraf met een endoscoop, zodat u zeker weet of spouwmuurisolatie mogelijk is en hoe breed de spouw is.' },
    { q: 'Hoe wordt spouwmuurisolatie aangebracht?', a: 'Wij boren gaten in het voegwerk volgens een vast patroon en blazen de spouw vol met glaswolvlokken of EPS-parels. Daarna worden de gaten dichtgezet in de kleur van het voegwerk. Er komt geen breekwerk aan te pas en het werk is meestal in één dag klaar.' },
    { q: 'Wat levert spouwmuurisolatie op?', a: 'Een ongeïsoleerde spouwmuur is verantwoordelijk voor circa 20 tot 25% van het warmteverlies. Spouwmuurisolatie heeft daardoor de kortste terugverdientijd van alle isolatiemaatregelen, meestal enkele jaren.' },
    { q: 'Kan spouwmuurisolatie vochtproblemen veroorzaken?', a: 'Niet bij een goede voorbereiding. Wij controleren de spouw vooraf op vocht, doorslag en vervuiling en gebruiken uitsluitend waterafstotende en dampopen materialen. Is de gevel in slechte staat, dan adviseren wij eerst herstel of impregneren.' },
    { q: 'Wat gebeurt er met vleermuizen en vogels?', a: 'Wij isoleren volgens de actuele richtlijnen voor natuurvriendelijk isoleren. Waar nodig laten wij eerst ecologisch onderzoek uitvoeren, zodat beschermde diersoorten in de spouw niet worden verstoord.' },
    { q: 'Hoeveel subsidie krijg ik voor spouwmuurisolatie?', a: 'In 2026 bedraagt de ISDE-subsidie € 5,25 per m², vanaf 10 m² en tot maximaal 170 m². De isolatie moet een Rd-waarde van minimaal 1,1 m²K/W halen. Was er al isolatie aanwezig, dan mag die dikte niet meetellen.' },
  ],
  gevelisolatie: [
    { q: 'Wanneer kies ik voor gevelisolatie in plaats van spouwmuurisolatie?', a: 'Wanneer de woning geen spouw heeft, zoals bij veel woningen van vóór 1920, of wanneer de spouw te smal of vervuild is. Dan isoleren wij de gevel aan de binnen- of buitenzijde.' },
    { q: 'Wat is het verschil tussen binnen- en buitenisolatie?', a: 'Binnenisolatie kost enkele centimeters ruimte per wand, maar het gevelbeeld blijft intact en het is voordeliger. Buitenisolatie levert de beste isolatiewaarde en pakt koudebruggen aan, maar verandert het aanzicht en vraagt vaak een vergunning.' },
    { q: 'Hoeveel ruimte kost binnenisolatie?', a: 'Afhankelijk van het systeem gaat het om circa 6 tot 12 centimeter per wand. Met PIR-platen halen wij een hoge isolatiewaarde bij een dunnere opbouw, wat bij kleine ruimtes uitkomst biedt.' },
    { q: 'Kan gevelisolatie bij een monument?', a: 'Vaak wel, maar met specifieke oplossingen zoals dampopen binnenisolatie en natuurvezel. Voor monumenten en beschermde panden gelden aparte voorwaarden; wij bekijken dat per woning.' },
    { q: 'Hoeveel subsidie krijg ik voor gevelisolatie?', a: 'In 2026 bedraagt de ISDE-subsidie € 20,25 per m², vanaf 10 m² en tot maximaal 170 m², bij een Rd-waarde van minimaal 3,5 m²K/W. Het isoleren van binnenmuren en scheidingswanden komt niet in aanmerking.' },
  ],
  bodemisolatie: [
    { q: 'Wat is bodemisolatie precies?', a: 'Bij bodemisolatie brengen wij een isolerende laag aan op de bodem van de kruipruimte, meestal met HR+++ isolatieparels. De kruipruimte wordt daardoor droger en de vloer merkbaar warmer.' },
    { q: 'Wanneer is bodemisolatie beter dan vloerisolatie?', a: 'Bij een lage kruipruimte waar een monteur niet goed kan werken, en wanneer er water in de kruipruimte staat. In die gevallen is vloerisolatie niet mogelijk en is bodemisolatie de juiste oplossing.' },
    { q: 'Kan bodemisolatie bij water in de kruipruimte?', a: 'Ja, dat is juist de situatie waarin wij bodemisolatie adviseren. De parels zijn vochtwerend en worden op de bodem aangebracht. Bij structurele wateroverlast bekijken wij eerst de oorzaak.' },
    { q: 'Hoe lang duurt het aanbrengen?', a: 'Bij een gemiddelde woning is bodemisolatie in een halve tot hele dag klaar. De parels worden via het kruipluik of een gevelopening ingeblazen, zonder overlast binnen.' },
    { q: 'Hoeveel subsidie krijg ik voor bodemisolatie?', a: 'In 2026 bedraagt de ISDE-subsidie € 3,00 per m² vanaf 20 m², bij een Rd- of Rbf-waarde van minimaal 3,5 m²K/W. Let op: u moet bij de aanvraag kiezen tussen bodemisolatie óf vloerisolatie, niet beide.' },
  ],
  vloerisolatie: [
    { q: 'Wat levert vloerisolatie op?', a: 'Via een ongeïsoleerde vloer verdwijnt circa 10 tot 15% van de warmte. Vloerisolatie levert vooral direct comfort op: geen koude voeten en minder tocht langs de plinten.' },
    { q: 'Wat is het verschil tussen vloerisolatie en bodemisolatie?', a: 'Bij vloerisolatie isoleren wij de vloer zelf, tussen de balklaag of aan de onderzijde. Bij bodemisolatie isoleren wij de bodem van de kruipruimte. Vloerisolatie levert meer op, maar vraagt een werkbare kruipruimte zonder water.' },
    { q: 'Hoe hoog moet mijn kruipruimte zijn?', a: 'Voor vloerisolatie is doorgaans minimaal 40 tot 50 centimeter werkruimte nodig. Is de kruipruimte lager, dan adviseren wij bodemisolatie of een dun reflecterend systeem.' },
    { q: 'Kan ik ook een tussenvloer laten isoleren?', a: 'Ja. Bij een tussenvloer blazen wij glaswol tussen de balklaag. Dat beperkt niet alleen warmteverlies, maar dempt ook de geluidsoverdracht tussen verdiepingen.' },
    { q: 'Hoeveel subsidie krijg ik voor vloerisolatie?', a: 'In 2026 bedraagt de ISDE-subsidie € 5,50 per m² vanaf 20 m² en tot maximaal 130 m², bij een Rd-waarde van minimaal 3,5 m²K/W. Staat er water in de kruipruimte, dan isoleren wij de bodem en geldt € 3,00 per m².' },
  ],
  airconditioning: [
    { q: 'Kan een airco ook verwarmen?', a: 'Ja. Een moderne airco is een lucht-luchtwarmtepomp en kan in de winter energiezuinig verwarmen, met een rendement waar een gasketel niet aan komt.' },
    { q: 'Wat is het verschil tussen Single Split en Multi Split?', a: 'Bij Single Split hoort één binnenunit bij één buitenunit, ideaal voor één ruimte. Bij Multi Split worden meerdere binnenunits aangesloten op één buitenunit, voor meerdere kamers.' },
    { q: 'Hoeveel vermogen heb ik nodig?', a: 'Dat hangt af van de ruimte, de isolatie en het glasoppervlak. In een goed geïsoleerde woning is een kleiner en zuiniger systeem voldoende. Wij berekenen dit tijdens de inspectie.' },
    { q: 'Is onderhoud nodig?', a: 'Ja, jaarlijks onderhoud houdt het rendement en de luchtkwaliteit op peil. Wij verzorgen onderhoud en service voor de systemen die wij plaatsen.' },
    { q: 'Krijg ik subsidie op airconditioning?', a: 'Airconditioning valt niet onder de ISDE-isolatiesubsidie. Isoleer bij voorkeur eerst: dat verlaagt het benodigde vermogen en dus de kosten.' },
  ],
  gevelreiniging: [
    { q: 'Waarom is gevelreiniging meer dan cosmetisch?', a: 'Algen, mos en groene aanslag houden vocht vast in het metselwerk. Een natte gevel isoleert slechter en is gevoeliger voor vorstschade. Reinigen laat de gevel weer drogen.' },
    { q: 'Beschadigt hogedruk mijn gevel?', a: 'Niet als de druk en techniek op het type steen zijn afgestemd. Bij zacht of oud metselwerk werken wij met lage druk; bij hardere steen met heet water onder hogere druk.' },
    { q: 'Hoe lang blijft de gevel schoon?', a: 'Alleen reinigen betekent dat de aanslag binnen enkele jaren terugkomt. In combinatie met impregneren blijft het resultaat aanzienlijk langer goed.' },
    { q: 'Kan het in elk seizoen?', a: 'Reinigen kan bijna het hele jaar, maar impregneren vraagt een droge gevel en vorstvrije dagen. Wij plannen beide werkzaamheden daarom in overleg.' },
  ],
  impregneren: [
    { q: 'Wat doet impregneren precies?', a: 'Een impregneermiddel dringt in de steen en maakt het metselwerk waterafstotend. Regenwater trekt niet meer in, terwijl vocht van binnenuit kan blijven ontsnappen.' },
    { q: 'Sluit impregneren de gevel af?', a: 'Nee. De behandeling is dampopen: de gevel blijft ademen. Dat is belangrijk, omdat een volledig afgesloten gevel juist vochtproblemen geeft.' },
    { q: 'Isoleert impregneren?', a: 'Impregneren is geen isolatie, maar droog metselwerk geleidt warmte veel minder snel naar buiten. Het maakt bestaande isolatie dus effectiever.' },
    { q: 'Hoe lang gaat een impregnatie mee?', a: 'Afhankelijk van het middel, de ondergrond en de ligging van de gevel gaat een goede impregnatie doorgaans 10 tot 15 jaar mee.' },
    { q: 'Moet de gevel eerst gereinigd worden?', a: 'Ja. Impregneren werkt alleen op een schone en droge gevel. Waar het voegwerk is aangetast, herstellen wij dat eerst.' },
  ],
  dakkapellen: [
    { q: 'Heb ik een vergunning nodig voor een dakkapel?', a: 'Alleen bij een dakkapel aan de voorzijde. Voor een dakkapel aan de achterzijde is geen vergunning nodig. Wij weten welke eisen gelden en verzorgen de aanvraag desgewenst voor u.' },
    { q: 'Hoe lang duurt het plaatsen?', a: 'De dakkapel wordt op maat geproduceerd en meestal binnen één dag geplaatst. Daarna is de woning direct weer wind- en waterdicht.' },
    { q: 'Wordt de dakkapel geïsoleerd?', a: 'Ja, volledig. Omdat de constructie nieuw is, isoleren wij hem direct op de huidige norm, met HR++ of triple beglazing in de kozijnen.' },
    { q: 'Verzorgen jullie ook de binnenafwerking?', a: 'Ja. Wij leveren de dakkapel compleet op, inclusief gipsplaat, stucwerk en sauswerk, zodat de ruimte direct in gebruik kan.' },
  ],
  dakramen: [
    { q: 'Kan een dakraam in elk dak?', a: 'In vrijwel elk hellend dak, mits de dakconstructie het toelaat. Wij bepalen maat en plaats in overleg en houden rekening met de sporen en de dakbedekking.' },
    { q: 'Gaat een dakraam warmte kosten?', a: 'Een oud dakraam of enkel glas is een koudebrug. Een nieuw dakraam met HR++ of triple beglazing en een isolatiekader rondom voorkomt dat.' },
    { q: 'Wordt het raam waterdicht ingewerkt?', a: 'Ja. Wij werken het raam met de juiste gootstukset waterdicht in de pannen of bitumen in en brengen rondom een isolatiekader aan.' },
    { q: 'Kan ik dit combineren met dakisolatie?', a: 'Dat is juist het beste moment. Beide werkzaamheden in één keer uitvoeren is voordeliger en levert een beter eindresultaat op.' },
  ],
  'overige-diensten': [
    { q: 'Werken jullie met onderaannemers?', a: 'Nee, de werkzaamheden worden uitgevoerd door ons eigen team. Dat houdt de planning en de kwaliteit in eigen hand.' },
    { q: 'Kunnen afbouw en isolatie in één planning?', a: 'Ja. Wij combineren het afbouwwerk met de isolatiewerkzaamheden, zodat u niet met meerdere partijen te maken heeft.' },
    { q: 'Krijg ik subsidie op afbouw of renovatie?', a: 'Nee, afbouw- en renovatiewerk komt niet in aanmerking voor ISDE-subsidie. De isolatiemaatregel zelf wel, mits die apart op de factuur staat.' },
    { q: 'Leveren jullie schoon op?', a: 'Ja. Wij ruimen op en leveren de ruimte schoon op, zodat u er direct verder kunt.' },
  ],
};

function ServiceTile(props) {
  const { icon, title, onClick } = props;
  const [hover, setHover] = React.useState(false);
  return React.createElement('button', {
    type: 'button', onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false),
    style: {
      display: 'flex', alignItems: 'center', gap: 14, background: '#fff', border: `1px solid ${hover ? 'var(--brand-primary)' : 'var(--border-default)'}`,
      borderRadius: 'var(--radius-lg)', padding: '16px 22px', cursor: 'pointer', fontFamily: 'var(--font-body)', textAlign: 'left',
      boxShadow: hover ? 'var(--shadow-md)' : 'var(--shadow-sm)', transition: 'all var(--dur-fast) var(--ease-standard)',
    },
  },
    React.createElement('img', { src: ICON(icon), style: { width: 20, height: 20, flexShrink: 0 } }),
    React.createElement('span', { style: { flex: 1, fontWeight: 700, fontSize: 15, color: 'var(--ink-900)' } }, title),
    React.createElement('span', { style: { color: 'var(--brand-primary)', fontSize: 18 } }, '→')
  );
}

function DetailSections(props) {
  const { group, onNavigate } = props;
  const d = DETAILS[group.id];
  if (!d) return null;
  const block = (title, children) => React.createElement('div', { style: { marginTop: 40 } },
    React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 24, margin: '0 0 14px' } }, title), children);
  return React.createElement('div', null,
    d.warmteverlies && block('Waarom ' + group.title.toLowerCase() + '?', P(d.warmteverlies)),
    d.uitvoering && block('Hoe wij het uitvoeren',
      React.createElement('ol', { style: { margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 14, counterReset: 'step' } },
        d.uitvoering.map((t, i) => React.createElement('li', { key: t, style: { display: 'flex', gap: 14, alignItems: 'flex-start' } },
          React.createElement('span', { style: { flexShrink: 0, width: 30, height: 30, borderRadius: '50%', background: 'var(--brand-primary)', color: '#fff', fontFamily: 'var(--font-display)', fontSize: 14, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, i + 1),
          React.createElement('span', { style: { fontSize: 15, lineHeight: 'var(--lh-body)', color: 'var(--text-primary)', paddingTop: 4 } }, t))))),
    d.isde && block('Subsidie voor ' + group.title.toLowerCase(),
      React.createElement('div', null,
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12, marginBottom: 16 } },
          [['ISDE 2026', d.isde.bedrag], ['Isolatiewaarde', d.isde.rd], ['Vanaf', d.isde.min], ['Subsidie tot', d.isde.max]].map(([k, v]) =>
            React.createElement('div', { key: k, style: { background: 'var(--ink-900)', color: '#fff', borderRadius: 'var(--radius-lg)', padding: '16px 18px' } },
              React.createElement('div', { style: { fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 'var(--ls-caps)', color: 'var(--ink-300)', marginBottom: 6 } }, k),
              React.createElement('div', { style: { fontFamily: 'var(--font-display)', fontSize: 17, color: v === '–' ? 'var(--ink-300)' : 'var(--brand-primary)' } }, v)))),
        React.createElement('p', { style: { fontSize: 15, lineHeight: 'var(--lh-body)', color: 'var(--text-secondary)', margin: '0 0 12px' } }, 'Bij twee of meer isolatiemaatregelen binnen 24 maanden verdubbelt het bedrag per m². Wij ondersteunen u bij de aanvraag via RVO en zetten het aantal m² en de Rd-waarde altijd expliciet op de factuur.'),
        React.createElement('a', { onClick: () => onNavigate('subsidie'), style: { color: 'var(--brand-primary)', fontWeight: 700, fontSize: 15, cursor: 'pointer' } }, 'Bereken jouw subsidie →'))),
    d.aandacht && React.createElement('div', { style: { marginTop: 32, borderLeft: '3px solid var(--brand-primary)', paddingLeft: 18 } },
      React.createElement('div', { style: { fontWeight: 700, fontSize: 14, textTransform: 'uppercase', letterSpacing: 'var(--ls-caps)', color: 'var(--brand-primary)', marginBottom: 8 } }, 'Goed om te weten'),
      React.createElement('p', { style: { margin: 0, fontSize: 15, lineHeight: 'var(--lh-body)', color: 'var(--text-secondary)' } }, d.aandacht))
  );
}

function ServiceDetail(props) {
  const { group, onBack, onNavigate } = props;
  const d = DETAILS[group.id] || {};
  const others = SERVICE_GROUPS.filter((g) => g.id !== group.id).slice(0, 5);
  return React.createElement('div', { className: 'iso-reveal' },
    React.createElement('section', { style: { position: 'relative', height: 380, overflow: 'hidden', background: '#101010' } },
      (group.hero
        ? React.createElement('img', { src: group.hero, alt: group.title, style: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 42%' } })
        : null),
      React.createElement('div', { style: { position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(16,16,16,0.9) 0%, rgba(16,16,16,0.6) 50%, rgba(16,16,16,0.2) 100%)' } }),
      React.createElement('div', { style: { position: 'relative', maxWidth: 1200, margin: '0 auto', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: '0 40px 36px' } },
        React.createElement('a', { onClick: onBack, style: { color: 'var(--ink-200)', fontWeight: 700, fontSize: 14, cursor: 'pointer', marginBottom: 14 } }, '← Alle diensten'),
        React.createElement('h1', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-lg)', color: '#fff', margin: 0, maxWidth: 700 } }, group.title),
        group.besparingPct && React.createElement('p', { style: { color: 'var(--ink-200)', fontSize: 'var(--fs-body-lg)', margin: '12px 0 0', maxWidth: 560 } }, 'Bespaar tot ' + group.besparingPct + ' op uw energierekening.')
      )
    ),
    React.createElement('section', { style: { maxWidth: 1200, margin: '0 auto', padding: '56px 40px', display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 320px', gap: 56, alignItems: 'start' } },
      React.createElement('div', { style: { minWidth: 0 } },
        React.createElement('p', { style: { fontSize: 18, lineHeight: 'var(--lh-body)', color: 'var(--text-primary)', margin: '0 0 28px', maxWidth: '62ch' } }, group.intro),
        group.foto
          ? React.createElement('img', { src: group.foto, alt: group.title, style: { width: '100%', height: 420, objectFit: 'cover', objectPosition: 'center 60%', borderRadius: 14, display: 'block', marginBottom: 32 } })
          : React.createElement('image-slot', { id: 'diensten-detail-' + group.id, shape: 'rounded', radius: '14', placeholder: 'Foto: detail van ' + group.title, style: { width: '100%', height: 300, marginBottom: 32 } }),
        group.ul && React.createElement('div', { style: { marginBottom: 8 } }, UL(group.ul)),
        group.merken && React.createElement('div', { style: { marginTop: 32, padding: '24px 26px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-lg)', background: 'var(--ink-50)' } },
          React.createElement('div', { style: { color: 'var(--brand-primary)', fontWeight: 700, fontSize: 13, textTransform: 'uppercase', letterSpacing: 'var(--ls-caps)', marginBottom: 14 } }, 'Merken die wij leveren'),
          React.createElement('div', { style: { display: 'flex', gap: 12 } },
            group.merken.map((m) => React.createElement('div', { key: m.naam, style: { flex: '1 1 0', minWidth: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', height: 76, background: '#fff', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)' } },
              m.logo
                ? React.createElement('img', { src: m.logo, alt: m.naam, style: { height: m.h, maxWidth: '78%', objectFit: 'contain' } })
                : React.createElement('span', { style: { fontFamily: 'var(--font-display)', fontSize: 20, letterSpacing: '0.02em', color: 'var(--ink-900)' } }, m.naam))))),
        group.footnote && React.createElement('p', { style: { fontSize: 13, color: 'var(--text-secondary)', fontStyle: 'italic', margin: '16px 0 0', maxWidth: '62ch' } }, group.footnote),
        React.createElement(DetailSections, { group: group, onNavigate: onNavigate }),
        group.subs && React.createElement('div', { style: { marginTop: 40 } },
          React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 24, margin: '0 0 14px' } }, 'Systemen die wij toepassen'),
          group.subs.map((s) => React.createElement('div', { key: s.h, style: { marginTop: 24, paddingTop: 24, borderTop: '1px solid var(--border-default)' } },
            H3(s.h), P(s.p), s.ul && UL(s.ul))))
      ),
      React.createElement('aside', { style: { position: 'sticky', top: 24, display: 'flex', flexDirection: 'column', gap: 16, minWidth: 0 } },
        React.createElement('div', { style: { background: 'var(--ink-900)', color: '#fff', borderRadius: 'var(--radius-lg)', padding: 'var(--space-5)' } },
          React.createElement('div', { style: { fontFamily: 'var(--font-display)', fontSize: 19, marginBottom: 8 } }, 'Vrijblijvend advies'),
          React.createElement('p', { style: { margin: '0 0 18px', fontSize: 14, lineHeight: 'var(--lh-body)', color: 'var(--ink-200)' } }, 'Onze monteur komt gratis langs, meet in en berekent uw subsidie.'),
          React.createElement('button', { type: 'button', onClick: () => onNavigate('contact'), style: { width: '100%', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 15, border: 'none', borderRadius: 'var(--radius-pill)', padding: '13px 20px', background: 'var(--brand-primary)', color: '#fff', cursor: 'pointer', marginBottom: 10 } }, 'Adviesgesprek aanvragen'),
          React.createElement('a', { href: 'tel:+31247920023', style: { display: 'block', textAlign: 'center', color: '#fff', fontWeight: 700, fontSize: 14, textDecoration: 'none', border: '1px solid rgba(255,255,255,0.25)', borderRadius: 'var(--radius-pill)', padding: '12px 20px' } }, '+31 24 792 00 23')
        ),
        d.isde && React.createElement('div', { style: { background: 'var(--orange-50)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-5)' } },
          React.createElement('div', { style: { fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 'var(--ls-caps)', color: 'var(--brand-primary)', marginBottom: 10 } }, 'ISDE-subsidie 2026'),
          React.createElement('div', { style: { fontFamily: 'var(--font-display)', fontSize: 26, color: 'var(--ink-900)', marginBottom: 10 } }, d.isde.bedrag),
          React.createElement('div', { style: { fontSize: 13, color: 'var(--text-secondary)', lineHeight: 'var(--lh-body)' } }, d.isde.rd + ' · vanaf ' + d.isde.min),
          React.createElement('a', { onClick: () => onNavigate('subsidie'), style: { display: 'inline-block', marginTop: 12, color: 'var(--brand-primary)', fontWeight: 700, fontSize: 14, cursor: 'pointer' } }, 'Bereken jouw subsidie →')
        ),
        React.createElement('div', { style: { background: '#fff', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-5)' } },
          React.createElement('div', { style: { fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 'var(--ls-caps)', color: 'var(--text-secondary)', marginBottom: 12 } }, 'Andere diensten'),
          React.createElement('div', { style: { display: 'flex', flexDirection: 'column' } },
            others.map((g) => React.createElement(SideLink, { key: g.id, label: g.title, onClick: () => onNavigate('diensten', g.id) })))
        )
      )
    ),
    React.createElement(MaterialsSection, { group: group, onNavigate: onNavigate }),
    React.createElement(DienstFaqSection, { group: group, onNavigate: onNavigate })
  );
}

function DienstFaqSection(props) {
  const { group, onNavigate } = props;
  const faqs = DIENST_FAQS[group.id] || [];
  if (!faqs.length) return null;
  return 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', { style: { position: 'sticky', top: 24 } },
        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 } }),
          'Veelgestelde vragen over'),
        React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-md)', margin: '0 0 14px' } }, group.title),
        React.createElement('p', { style: { fontSize: 'var(--fs-body-md)', color: 'var(--text-secondary)', lineHeight: 'var(--lh-body)', margin: '0 0 20px', maxWidth: '38ch' } }, 'Wij hebben de vragen die wij het vaakst krijgen voor u op een rij gezet.'),
        React.createElement('a', { onClick: () => onNavigate('faq'), style: { color: 'var(--brand-primary)', fontWeight: 700, fontSize: 15, cursor: 'pointer' } }, 'Alle veelgestelde vragen →')
      ),
      React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 } },
        faqs.map((f, i) => React.createElement(FaqRow, { key: f.q, item: f, defaultOpen: i === 0 })))
    )
  );
}

function FaqRow(props) {
  const { item, defaultOpen } = props;
  const [open, setOpen] = React.useState(!!defaultOpen);
  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 ' + (open || hover ? 'var(--brand-primary)' : 'var(--border-default)'),
        boxShadow: open ? 'var(--shadow-md)' : 'var(--shadow-sm)',
        transition: 'border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard)',
      },
    },
    React.createElement('button', {
      type: 'button', onClick: () => setOpen((o) => !o),
      style: { width: '100%', display: 'flex', alignItems: 'flex-start', gap: 14, background: 'none', border: 'none', cursor: 'pointer', padding: '20px 24px', textAlign: 'left', fontFamily: 'var(--font-body)' },
    },
      React.createElement('span', { style: { flexShrink: 0, color: 'var(--brand-primary)', fontFamily: 'var(--font-display)', fontSize: 20, lineHeight: '24px', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform var(--dur-base, 220ms) var(--ease-standard)' } }, open ? '−' : '+'),
      React.createElement('span', { style: { fontFamily: 'var(--font-display)', fontSize: 17, lineHeight: '24px', color: 'var(--ink-900)' } }, item.q)),
    React.createElement('div', { style: { maxHeight: open ? 420 : 0, opacity: open ? 1 : 0, overflow: 'hidden', transition: 'max-height 320ms var(--ease-standard), opacity 220ms var(--ease-standard)' } },
      React.createElement('p', { style: { margin: 0, padding: '0 24px 22px 52px', fontSize: 15, lineHeight: 'var(--lh-body)', color: 'var(--text-secondary)' } }, item.a))
  );
}

function MaterialsSection(props) {
  const { group, onNavigate } = props;
  const d = DETAILS[group.id] || {};
  const mats = d.materialen || [];
  if (!mats.length) return null;
  const cols = Math.min(mats.length, 2);
  return React.createElement('section', { style: { background: 'var(--ink-50)' } },
    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('layers'), alt: '', style: { width: 16, height: 16 } }),
        ['gevelreiniging', 'impregneren', 'dakkapellen', 'dakramen', 'overige-diensten', 'airconditioning'].indexOf(group.id) > -1 ? 'Vakwerk voor iedere woning' : 'Voor iedere woning een oplossing'),
      React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-md)', margin: '0 0 12px', maxWidth: 760 } },
        ['gevelreiniging', 'impregneren', 'dakkapellen', 'dakramen', 'overige-diensten', 'airconditioning'].indexOf(group.id) > -1
          ? (mats.length > 1 ? 'Wat wij toepassen' : 'Wat wij toepassen')
          : (mats.length > 1 ? 'Soorten isolatiemateriaal' : 'Het materiaal dat wij gebruiken')),
      React.createElement('p', { style: { fontSize: 'var(--fs-body-lg)', color: 'var(--text-secondary)', margin: '0 0 40px', maxWidth: '62ch', lineHeight: 'var(--lh-body)' } },
        ['gevelreiniging', 'impregneren', 'dakkapellen', 'dakramen', 'overige-diensten', 'airconditioning'].indexOf(group.id) > -1
          ? 'Dit zijn de werkzaamheden en materialen die wij doorgaans toepassen bij ' + group.title.toLowerCase() + '.'
          : (mats.length > 1
            ? 'Bekijk welke soorten materiaal wij doorgaans gebruiken voor ' + group.title.toLowerCase() + '.'
            : 'Dit is het materiaal dat wij doorgaans toepassen bij ' + group.title.toLowerCase() + '.')),
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(' + cols + ',1fr)', gap: 28 } },
        mats.map((m) => React.createElement(MaterialCard, { key: m.naam, mat: m, groupId: group.id, onNavigate: onNavigate })))
    )
  );
}

function materiaalPaginaId(naam) {
  const n = naam.toLowerCase();
  if (n.indexOf('cavity wall') > -1) return 'supafil-cavity-wall';
  if (n.indexOf('timber frame') > -1) return 'supafil-cavity-wall';
  if (n.indexOf('eps') > -1) return 'eps-parels';
  if (n.indexOf('pir') > -1 || n.indexOf('kingspan') > -1) return 'pir-kingspan';
  if (n.indexOf('pif') > -1 || n.indexOf('folie') > -1 && n.indexOf('bodem') === -1) return 'pif-folie';
  if (n.indexOf('biobased') > -1 || n.indexOf('isovlas') > -1 || n.indexOf('natuurvezel') > -1) return 'biobased-isovlas';
  if (n.indexOf('bodemfolie') > -1) return 'bodemfolie';
  if (n.indexOf('parels') > -1) return 'eps-parels';
  if (n.indexOf('glaswol') > -1) return 'glaswol-platen';
  return null;
}

function MaterialCard(props) {
  const { mat, groupId, onNavigate } = props;
  const [hover, setHover] = React.useState(false);
  const slug = mat.naam.toLowerCase().replace(/[^a-z0-9]+/g, '-');
  const paginaId = materiaalPaginaId(mat.naam);
  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)', display: 'flex', flexDirection: 'column',
      },
    },
    React.createElement('div', { style: { position: 'relative', height: 260, background: 'var(--ink-50)' } },
      mat.foto
        ? React.createElement('img', { src: mat.foto, alt: mat.naam, style: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: mat.pos || 'center' } })
        : React.createElement('image-slot', { id: 'mat-' + groupId + '-' + slug, shape: 'rect', placeholder: 'Foto volgt: ' + mat.naam, style: { position: 'absolute', inset: 0, width: '100%', height: '100%' } })),
    React.createElement('div', { style: { padding: '26px 26px 28px' } },
      React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 19, margin: '0 0 10px', color: 'var(--ink-900)' } }, mat.naam),
      React.createElement('p', { style: { margin: 0, fontSize: 15, lineHeight: 'var(--lh-body)', color: 'var(--text-secondary)' } }, mat.tekst),
      paginaId && React.createElement('a', {
        onClick: () => onNavigate('materialen', paginaId),
        style: { display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 14, color: 'var(--brand-primary)', fontWeight: 700, fontSize: 14, cursor: 'pointer' },
      }, 'Meer over dit materiaal', React.createElement('span', { style: { transform: hover ? 'translateX(3px)' : 'none', transition: 'transform var(--dur-fast) var(--ease-standard)' } }, '→')),
      mat.ul && React.createElement('ul', { style: { margin: '16px 0 0', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 6 } },
        mat.ul.map((t) => React.createElement('li', { key: t, style: { display: 'flex', gap: 8, alignItems: 'baseline', fontSize: 14, color: 'var(--text-primary)' } },
          React.createElement('span', { style: { color: 'var(--brand-primary)', fontWeight: 700 } }, '✓'), t))))
  );
}

function SideLink(props) {
  const { label, onClick } = props;
  const [hover, setHover] = React.useState(false);
  return React.createElement('a', {
    onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false),
    style: { padding: '9px 0', fontSize: 14, fontWeight: 600, color: hover ? 'var(--brand-primary)' : 'var(--text-primary)', cursor: 'pointer', textDecoration: 'none', borderBottom: '1px solid var(--border-default)', transition: 'color var(--dur-fast) var(--ease-standard)' },
  }, label);
}

function DienstenScreen(props) {
  const { onNavigate, initialId } = props;
  const [activeId, setActiveId] = React.useState(initialId || null);
  React.useEffect(() => { setActiveId(initialId || null); }, [initialId]);
  const active = SERVICE_GROUPS.find((g) => g.id === activeId);

  return React.createElement('div', null,
    !active && React.createElement('section', { style: { background: 'var(--ink-900)', color: '#fff', padding: '64px 40px' } },
      React.createElement('div', { style: { maxWidth: 1000, margin: '0 auto' } },
        React.createElement(Badge, { tone: 'brand' }, 'Diensten & Producten'),
        React.createElement('h1', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-lg)', margin: '16px 0 12px', maxWidth: 820 } }, 'Dé specialist in duurzame isolatie, airconditioning en renovatie'),
        React.createElement('p', { style: { color: 'var(--ink-200)', fontSize: 'var(--fs-body-lg)', maxWidth: 720, margin: 0, lineHeight: 'var(--lh-body)' } },
          'Bij ISOKÖNIG Onderhoud B.V. geloven wij dat iedere woning comfortabel, energiezuinig en toekomstbestendig moet zijn. Wij bieden een totaalpakket aan isolatie- en renovatieoplossingen voor particuliere en zakelijke klanten.'))
    ),

    active
      ? React.createElement(ServiceDetail, { group: active, onBack: () => setActiveId(null), onNavigate })
      : React.createElement('section', { style: { maxWidth: 1000, margin: '0 auto', padding: '56px 40px' } },
          React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: 22, marginBottom: 24 } }, 'Waar kunnen wij u mee helpen?'),
          React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 16 } },
            SERVICE_GROUPS.map((g) => React.createElement(ServiceTile, { key: g.id, icon: g.icon, title: g.title, onClick: () => setActiveId(g.id) }))
          )
        ),

    !active && React.createElement('section', { style: { background: 'var(--ink-50)' } },
      React.createElement('div', { style: { maxWidth: 1000, margin: '0 auto', padding: '56px 40px 72px' } },
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 } },
          [
            { icon: 'piggy-bank', t: 'Subsidie', d: 'Wij helpen bij de ISDE-aanvraag via RVO en informeren u over het Warmtefonds.', link: 'Meer over subsidie', to: 'subsidie' },
            { icon: 'clipboard-check', t: 'Onze werkwijze', d: 'Gratis inspectie aan huis, binnen 48 uur een heldere offerte, uitvoering door eigen monteurs.', link: 'Adviesgesprek aanvragen', to: 'contact' },
            { icon: 'shield-check', t: 'Garantie', d: 'Standaard 10 jaar garantie op vochtdoorslag bij al onze isolatiewerkzaamheden.' },
          ].map((c) => React.createElement(InfoTile, { key: c.t, item: c, onNavigate: onNavigate }))
        )
      )
    )
  );
}

function InfoTile(props) {
  const { item, onNavigate } = props;
  const [hover, setHover] = React.useState(false);
  return React.createElement('div', {
      onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false),
      style: {
        background: '#fff', borderRadius: 'var(--radius-lg)', padding: '26px 24px 24px', display: 'flex', flexDirection: 'column', gap: 10,
        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: { width: 42, height: 42, borderRadius: '50%', background: 'var(--brand-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', transform: hover ? 'scale(1.06)' : 'none', transition: 'transform var(--dur-fast) var(--ease-standard)' } },
      React.createElement('img', { src: ICON(item.icon), alt: '', style: { width: 20, height: 20, filter: 'brightness(0) invert(1)' } })),
    React.createElement('div', { style: { fontFamily: 'var(--font-display)', fontSize: 18, color: 'var(--ink-900)' } }, item.t),
    React.createElement('p', { style: { margin: 0, fontSize: 14, lineHeight: 'var(--lh-body)', color: 'var(--text-secondary)', flex: 1 } }, item.d),
    item.link && React.createElement('a', { onClick: () => onNavigate(item.to), style: { fontSize: 14, fontWeight: 700, color: 'var(--brand-primary)', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6 } },
      item.link, React.createElement('span', { style: { transform: hover ? 'translateX(3px)' : 'none', transition: 'transform var(--dur-fast) var(--ease-standard)' } }, '→'))
  );
}
window.DienstenScreen = DienstenScreen;