#!/usr/bin/env python3
"""Generate PM_EL_T06_Emergency_Response_Equipment_eLearning_v1.1.html"""

import datetime

OUT = "/root/projects/jg/2026-PM-eLearning/deliverables/PM_EL_T06_Emergency_Response_Equipment_eLearning_v1.1.html"

modules = [
    {
        "id": 1, "title": "Waarom nooduitrusting?",
        "content": """<p>Bij Phoenix Metals B.V. werken we met gevaarlijke stoffen zoals zwavelzuur (H₂SO₄), natriumhydroxide (NaOH) en vanadiumpentoxide (V₂O₅). Een snelle en adequate reactie bij een incident kan het verschil maken tussen een kleine gebeurtenis en een ernstig letsel.</p>
<p>De Arbowet (artikel 3.23) en het Besluit BRZO 2015 (Seveso III) verplichten de werkgever om adequate nooduitrusting beschikbaar te stellen en werknemers te trainen in het gebruik ervan. Bij een inrichting zoals PlantOne IJmuiden en Rotterdam is dit geen optie maar een wettelijke plicht.</p>
<p>Statistieken tonen aan dat bij chemische incidenten de eerste 15 minuten cruciaal zijn. Wie dan niet de juiste uitrusting kan bedienen, loopt een significant hoger risico op blijvend letsel. Onze MD Stijn van Zelst benadrukt: <em>"Nooduitrusting is je laatste verdedigingslinie — ken je equipment."</em></p>
<p>Elke medewerker op de werkvloer moet weten waar de nooduitrusting zich bevindt, hoe deze werkt en wanneer deze te gebruiken. Deze eLearning biedt je die kennis.</p>""",
        "wistje": "Volgens Arbowet artikel 3.23 moet nooduitrusting minimaal één keer per jaar getest worden. Bij Seveso-inrichtingen geldt vaak een strengere eis van kwartaalcontroles.",
        "praktijk": "Op PlantOne IJmuiden hangt bij elke ingang van de verwerkingshal een plattegrond met de locaties van alle nooduitrusting. Kennis van deze plattegrond is verplicht bij introductie.",
        "vraag": "Wat is de wettelijke basis voor nooduitrusting bij Phoenix Metals?",
        "opties": ["Arbowet art. 3.23 + BRZO 2015 (Seveso III)", "Alleen de Arbobesluiten", "Het is vrijwillig", "Alleen NEN 4003"],
        "correct": 0
    },
    {
        "id": 2, "title": "Oogdouches",
        "content": """<p>Oogdouches zijn ontworpen voor spoeling van de ogen bij blootstelling aan chemische stoffen. Bij H₂SO₄ en NaOH is directe spoeling essentieel — zuur en base kunnen binnen seconden blijvende schade aan het hoornvlies veroorzaken.</p>
<p>De voorgeschreven spoeltijd bij blootstelling aan zuren of basen is <strong>minimaal 15 minuten</strong> met een constante, zachte waterstroom. Het water moet een temperatuur hebben tussen 15°C en 35°C (te koud = onderkoeling, te warm = verergering van de chemische reactie).</p>
<p>Op PlantOne IJmuiden bevinden oogdouches zich bij elke werkplek waar H₂SO₄ of NaOH wordt gehanteerd: de reactorkamer, het pompgedeelte en de laad- en lospier. Op Rotterdam zijn ze geplaatst bij het opslag- en doseringsgebied.</p>
<p>Bediening is eenvoudig: duw de hendel naar beneden (of trap het pedaal). De waterstroom start direct. Houd de ogen open en draai het hoofd zodat beide ogen gespoeld worden. Roep om hulp.</p>""",
        "wistje": "De ANSI Z358.1 norm (vaak als referentie gebruikt) vereist dat oogdouches bereikbaar zijn binnen 10 seconden lopen — dat is ongeveer 15 meter.",
        "praktijk": "Bij Phoenix Metals wordt na elke oogdouche-activering een incidentrapport opgemaakt, ongeacht of er daadwerkelijk blootstelling was. Dit is vereist in het kader van BRZO-rapportage.",
        "vraag": "Hoe lang moet je de ogen spoelen bij blootstelling aan H₂SO₄?",
        "opties": ["5 minuten", "10 minuten", "Minimaal 15 minuten", "Tot het pijn stopt"],
        "correct": 2
    },
    {
        "id": 3, "title": "Nooddouches",
        "content": """<p>Nooddouches zijn bedoeld voor volledige lichaamsspoeling bij grootschalige blootstelling aan gevaarlijke stoffen. Bij een lekkage van H₂SO₄ of NaOH over een groot deel van het lichaam is onmiddellijke spoeling levensreddend.</p>
<p>De spoeltijd bedraagt minimaal 15 minuten bij chemische blootstelling. Het waterdebiet moet voldoen aan NEN-EN 15154: minimaal 60 liter per minuut. De watertemperatuur ligt tussen 15°C en 35°C.</p>
<p>Locaties op PlantOne IJmuiden: bij de hoofdingang van de verwerkingshal, naast de reactorruimte en bij de laadpier. Op PlantOne Rotterdam: bij de ontvangsthal en het doseringsstation. Elke nooddouche is aangesloten op het drinkwaternet.</p>
<p>Kleding moet tijdens het spoelen worden verwijderd (mits veilig mogelijk) omdat chemicaliën in de kleding blijven zitten en verdere blootstelling veroorzaken.</p>""",
        "wistje": "Nooddouches moeten wekelijks worden doorgespoeld om legionella en bacteriegroei te voorkomen. Dit wordt vastgelegd in het logboek.",
        "praktijk": "Phoenix Metals heeft een plattegrond met alle nooddouche-locaties. Bij de introductietraining loop je de route fysiek mee. De kaart hangt ook op de Safety Board bij de koffieruimte.",
        "vraag": "Wat is het minimale waterdebiet van een nooddouche volgens NEN-EN 15154?",
        "opties": ["30 liter/minuut", "60 liter/minuut", "100 liter/minuut", "Er is geen eis"],
        "correct": 1
    },
    {
        "id": 4, "title": "Eerste hulp kits",
        "content": """<p>Eerstehulpkits bij Phoenix Metals voldoen aan de NEN 4003 norm. De inhoud is afgestemd op de specifieke risico's van onze werkomgeving: chemische blootstelling, snijwonden en brandwonden.</p>
<p>Standaard inhoud per NEN 4003: verbandmiddelen (wondkompressen, snelverband, triangelin), ontsmettingsmiddel (alcohol 70%), hechthechtstrips, schaar (met stompe punt), vinyl/nitril handschoenen, pijnstillers (paracetamol), een oogbad en een instructiekaart.</p>
<p>Bij Phoenix Metals is de kit uitgebreid met: calciumcarbonaat-poeder (voor neutralisatie van H₂SO₄ op de huid), specifieke brandwondenzalf en een extra set oogbaden. De kits bevinden zich bij elke veiligheidsvoorziening en in de controlekamers.</p>
<p>Controleer maandelijks de vervaldatums en compleetheid. Een incomplete kit is een risico bij een incident.</p>""",
        "wistje": "NEN 4003 onderscheidt vier typen bedrijfsnoodhulpkits (A, B, C, D) op basis van het aantal werknemers en risiconiveau. Phoenix Metals gebruikt type D (hoog risico, >50 werknemers).",
        "praktijk": "Op PlantOne IJmuiden staan de eerstehulpkits in oranje kasten gemarkeerd met een wit kruis. Elke BHV'er draagt een sleutel van de kast bij zich.",
        "vraag": "Welke norm is leidend voor de inhoud van de eerstehulpkit bij Phoenix Metals?",
        "opties": ["NEN 4003", "ISO 45001", "NEN-EN 15154", "PGS 15"],
        "correct": 0
    },
    {
        "id": 5, "title": "Gasdetectieapparatuur",
        "content": """<p>Op de werkvloer van Phoenix Metals gebruiken we 4-gas meters die tegelijkertijd zuurstof (O₂), ontvlambare gassen (LEL), waterstofsulfide (H₂S) en koolmonoxide (CO) meten.</p>
<p><strong>Alarmdrempels:</strong> O₂ < 19,5% en > 23,5% (zuurstoftekort/-overschot), LEL > 10% (waarschuwing) en > 20% (alarm), H₂S > 5 ppm (TWA) en > 10 ppm (STEL), CO > 25 ppm (TWA) en > 100 ppm (STEL). Bij overschrijding klinkt een luid alarm (≥95 dB) en trilt het toestel.</p>
<p>Bediening: zet de meter aan in een schone omgeving (fresh air calibratie). Wacht tot de opwarmcyclus voltooid is. Controleer of alle sensoren groen zijn. Bij een alarm: verlaat onmiddellijk de ruimte in tegenwindrichting.</p>
<p>De meters worden vóór elke dienst geïnspieceerd en kalibratie vindt maandelijks plaats via een erkende leverancier.</p>""",
        "wistje": "Een 4-gas meter moet bij elke shift starten met een bump-test: blootstelling aan een bekende testgasconcentratie om te verifiëren dat de sensoren reageren.",
        "praktijk": "Bij Phoenix Metals wordt bij binnenkomst in de reactorruimte een 4-gas meter gedragen op de borstzak. De waarde wordt automatisch gelogd in het SCADA-systeem.",
        "vraag": "Bij welk zuurstofpercentage slaat de 4-gas meter alarm (ondergrens)?",
        "opties": ["< 18%", "< 19,5%", "< 20,9%", "< 21%"],
        "correct": 1
    },
    {
        "id": 6, "title": "Ademluchttoestellen",
        "content": """<p>Ademluchttoestellen (perslucht — SCBA) worden ingezet bij zuurstofarme atmosferen, bij hoge concentraties giftige gassen of bij brandbestrijding. Bij Phoenix Metals zijn dit relevante scenario's bij een H₂SO₄-dampwolk of een brand in de installatie.</p>
<p>De gebruiksduur bedraagt circa 30 minuten bij normaal werktempo. Bij zware inspanning (bijv. brandbestrijding) kan dit dalen tot 15-20 minuten. Controleer altijd de flesdruk voor gebruik: deze moet ≥ 200 bar zijn.</p>
<p>Inspectiepunten: flesdruk, maskeraansluiting (lekvrij), regelautomaat (ademweerstand), alarmfluit (bij ≈55 bar). Het masker moet strak zitten en de neusstuk en kinoverlapping moeten afgedicht zijn.</p>
<p>Ademluchttoestellen bevinden zich bij de ingang van de reactorruimte en in de BHV-container bij de parkeerplaats. Alleen getrainde BHV'ers mogen deze gebruiken.</p>""",
        "wistje": "Het laagdrukalarm (fluit) van een SCBA gaat af bij ongeveer 55 bar. Dit betekent dat je nog circa 5-8 minuten lucht over hebt — onmiddellijk de ruimte verlaten!",
        "praktijk": "Phoenix Metals organiseert vier keer per jaar een BHV-oefening waarbij het opzetten van een ademluchttoestel binnen 60 seconden wordt getraind.",
        "vraag": "Hoeveel bar moet de flesdruk minimaal zijn bij aanvang van gebruik?",
        "opties": ["≥ 100 bar", "≥ 150 bar", "≥ 200 bar", "≥ 300 bar"],
        "correct": 2
    },
    {
        "id": 7, "title": "Sorptiemateriaal",
        "content": """<p>Sorptiemateriaal is cruciaal bij het opruimen van chemische lekken. Bij Phoenix Metals werken we met H₂SO₄ en NaOH — stoffen die <strong>specifiek</strong> sorptiemateriaal vereisen, geen universele absorbentia.</p>
<p>Voor <strong>H₂SO₄-lekken</strong>: gebruik zuurbestendig sorptiemateriaal (polypropyleen basis, gemarkeerd met "ACID"). Universeel absorber kan reageren met het zuur en hitte ontwikkelen. Het materiaal wordt aangebracht rondom het lekkagepunt om verspreiding te voorkomen.</p>
<p>Voor <strong>NaOH-lekken</strong>: gebruik basebestendig sorptiemateriaal (eveneens polypropyleen, gemarkeerd met "BASE" of "ALKALI"). NaOH is bijtend en reageert met organische materialen — gebruik daarom nooit zaagsel of cellulose-gebaseerde producten.</p>
<p>Na absorptie wordt het verzadigde materiaal verzameld in een geëtiketteerde chemisch afvalcontainer en afgevoerd als gevaarlijk afval volgens het LAP3 protocol.</p>""",
        "wistje": "Universeel sorptiemateriaal (zoals zaagsel of kitty litter) kan exotherm reageren met H₂SO₄. Dit heeft in het verleden geleid tot brandjes. Gebruik ALTIJD het juiste specifieke materiaal.",
        "praktijk": "Bij elke laad- en lospier van PlantOne IJmuiden staan gemarkeerde sorptiekits: rode zakken voor zuur, blauwe zakken voor base. De kleurcodering is vastgelegd in het HSE-handboek.",
        "vraag": "Welk sorptiemateriaal gebruik je bij een H₂SO₄-lekkage?",
        "opties": ["Zaagsel", "Universele absorbent", "Zuurbestendig polypropyleen (gemarkeerd 'ACID')", "Kitty litter"],
        "correct": 2
    },
    {
        "id": 8, "title": "Blusdekens en brandblussers",
        "content": """<p>Blusdekens zijn bedoeld voor het doven van kledingbrand en het afdekken van kleine beginnende branden. Op PlantOne IJmuiden en Rotterdam hangen blusdekken bij elke uitgang en in de buurt van brandgevaarlijke werkplekken.</p>
<p>Brandblussers bij Phoenix Metals: <strong>poederblussers (ABC)</strong> voor algemene branden (klasse A, B, C), <strong>CO₂-blussers</strong> voor branden aan elektrische installaties en <strong>schuimblussers</strong> voor vloeistofbranden. De locatiekaart in de verwerkingshal toont per type waar deze zich bevinden.</p>
<p>Bij brand aan een H₂SO₄-installatie: <strong>NOOIT met water blussen</strong> — water reacteert exotherm met geconcentreerd H₂SO₄. Gebruik droog zand, poeder of schuim. Bij NaOH-branden is schuim de voorkeur.</p>
<p>Inspectie: visuele controle maandelijks (drukindicator, toegankelijkheid, etikettering). Jaarlijks onderhoud door een gecertificeerd bedrijf.</p>""",
        "wistje": "DePASS-methode voor brandblussers: P (Pin eruit), A (Aim op de basis van de brand), S (Squeeze hendel), S (Sweep heen en weer). Altijd met de wind in de rug blussen.",
        "praktijk": "De brandblusser-locatiekaart van PlantOne IJmuiden is gedigitaliseerd in het intranet. Bij elke blusser hangt een QR-code die linkt naar de bijbehorende veiligheidsinstructie.",
        "vraag": "Waarmee blus je NOOIT een brand aan een H₂SO₄-installatie?",
        "opties": ["Poederblusser", "CO₂-blusser", "Water", "Schuimblusser"],
        "correct": 2
    },
    {
        "id": 9, "title": "Inspectie en onderhoud",
        "content": """<p>Alle nooduitrusting bij Phoenix Metals is onderhevig aan een gestructureerd inspectie- en onderhoudsregime. Dit is niet alleen wettelijk verplicht maar essentieel voor betrouwbaarheid bij een incident.</p>
<p><strong>Indeling verantwoordelijkheden:</strong> De uitvoerende medewerker doet een dagelijkse visuele check. De BHV-coördinator doet een wekelijkse functionele test (nooddouches doorspoelen, oogdouchen activeren). De HSE-afdeling doet een maandelijkse controle (gasdetectie kalibratie, blusser inspectie). Externe partijen doen halfjaarlijks onderhoud aan ademluchttoestellen en jaarlijks aan brandblussers.</p>
<p>Alle bevindingen worden vastgelegd in het <strong>inspectielogboek</strong> (digitaal via het HSE-management systeem). Afwijkingen leiden tot een actie-item met termijn en verantwoordelijke. De MD ondertekent het logboek maandelijks.</p>
<p>Bij constatering van defecte uitrusting: onmiddellijk rapporteren, de uitrusting markeren als buiten gebruik en vervanging/aanvulling aanvragen via het HSE-systeem.</p>""",
        "wistje": "Een logboek met alleen vinkjes voldoet niet aan de BRZO-eis. Het logboek moet ook de bevindingen, acties en sluitingsdata bevatten. Auditors controleren hier steekproefsgewijs op.",
        "praktijk": "Phoenix Metals gebruikt een digitaal inspectieplatform (tablet aan de werkvloer) waarbij de inspecteur per item een foto uploadt. Dit bewijsmateriaal wordt automatisch gekoppeld aan het logboek.",
        "vraag": "Wie is verantwoordelijk voor de wekelijkse functionele test van nooddouches?",
        "opties": ["De MD", "De BHV-coördinator", "Externe partij", "Elke medewerker zelf"],
        "correct": 1
    },
    {
        "id": 10, "title": "Scenario's — Praktijksituaties",
        "content": """<p><strong>Scenario 1: H₂SO₄-lekkage bij de reactor.</strong> Een flens lekt en zwavelzuur stroomt op de vloer. Actie: 1) Waarschuw collega's en activeer het alarm. 2) Verlaat de directe omgeving. 3) BHV'er trekt PBM's aan (zuurbestendig pak + handschoenen + gezichtsbeschermer). 4) Omsingel het lekkagepunt met zuurbestendig sorptiemateriaal. 5) Sluit de afsluiter bovenstrooms als veilig mogelijk. 6) Spoel aangetaste huid minimaal 15 minuten onder de nooddouche.</p>
<p><strong>Scenario 2: V₂O₅-stofwolk bij het lossen.</strong> Tijdens het lossen van vanadiumpentoxide ontstaat een stofwolk. Actie: 1) Verlaat onmiddellijk de zone (tegenwind). 2) Activeer het lokaal alarm. 3) Draag een ademluchttoestel als je binnen moet blijven. 4) Ventileer de ruimte maximaal. 5) Decontamineer oppervlakken met natte doeken (NOOIT droog vegen — stofverspreiding!). 6) Medische controle voor iedereen die is blootgesteld.</p>
<p><strong>Scenario 3: Brand in de installatie.</strong> Een brand ontstaat nabij een H₂SO₄-doseerpomp. Actie: 1) Activeer het brandalarm en bel 112. 2) Evacueer via de aangewezen vluchtroutes. 3) BHV'team: benader met de wind in de rug, blus met CO₂ of poeder (NOOIT water bij H₂SO₄). 4) Controleer of iedereen geëvacueerd is via de verzamelpunten. 5) Overhandig aan de brandweer bij aankomst: stoffenlijst, locatiekaart en ADR/SDS fiches.</p>
<p>Onthoud: jouw veiligheid staat altijd voorop. Neem geen onnodige risico's. Laat het oplossen van grootschalige incidenten over aan de BHV en de professionele hulpdiensten.</p>""",
        "wistje": "Bij een V₂O₅-stofwolk is blootstelling al bij lage concentraties gevaarlijk. V₂O₅ is een kankerverwekkende stof (categorie 1B). Droog vegen creëert een nog grotere stofwolk — altijd nat decontaminëren.",
        "praktijk": "Phoenix Metals houdt per kwartaal een scenario-oefening. In Q1 2026 werd het H₂SO₄-lekkage-scenario geoefend op PlantOne IJmuiden. Bevindingen zijn verwerkt in het noodplan.",
        "vraag": "Wat is de EERSTE actie bij een V₂O₅-stofwolk?",
        "opties": ["V₂O₅ opvegen", "Ademluchttoestel opzetten", "Zone verlaten (tegenwind) en alarm slaan", "Brandblusser pakken"],
        "correct": 2
    }
]

quiz = [
    {"v": "Wat is de wettelijke basis voor nooduitrusting bij Phoenix Metals?", "o": ["Arbowet art. 3.23 + BRZO 2015", "Alleen NEN 4003", "Vrijwillig", "PGS 15"], "c": 0},
    {"v": "Hoe lang spoel je ogen bij H₂SO₄-blootstelling?", "o": ["5 min", "10 min", "Min. 15 min", "Tot pijn stopt"], "c": 2},
    {"v": "Wat is het minimale waterdebiet van een nooddouche (NEN-EN 15154)?", "o": ["30 L/min", "60 L/min", "100 L/min", "Geen eis"], "c": 1},
    {"v": "Welke norm geldt voor de eerstehulpkit?", "o": ["NEN 4003", "ISO 45001", "NEN-EN 15154", "PGS 15"], "c": 0},
    {"v": "Bij welk O₂-percentage slaat de 4-gas meter alarm (ondergrens)?", "o": ["< 18%", "< 19,5%", "< 20,9%", "< 21%"], "c": 1},
    {"v": "Minimale flesdruk ademluchttoestel bij gebruik?", "o": ["≥ 100 bar", "≥ 150 bar", "≥ 200 bar", "≥ 300 bar"], "c": 2},
    {"v": "Welk sorptiemateriaal bij H₂SO₄-lek?", "o": ["Zaagsel", "Universeel", "Zuurbestendig polypropyleen", "Kitty litter"], "c": 2},
    {"v": "Waarmee blus je NOOIT een H₂SO₄-brand?", "o": ["Poeder", "CO₂", "Water", "Schuim"], "c": 2},
    {"v": "Wie doet de wekelijkse functionele test van nooddouches?", "o": ["MD", "BHV-coördinator", "Externe partij", "Medewerker zelf"], "c": 1},
    {"v": "Eerste actie bij V₂O₅-stofwolk?", "o": ["Opvegen", "Ademlucht halen", "Zone verlaten + alarm", "Blusser pakken"], "c": 2}
]

def build():
    today = datetime.date.today().strftime("%d-%m-%Y")
    mods_html = ""
    for m in modules:
        opts = "".join(f'<label class="quiz-option" onclick="checkModuleQ(this,{m['id']},{i},{m['correct']})"><input type="radio" name="mq{m['id']}">{o}</label>' for i, o in enumerate(m["opties"]))
        mods_html += f"""
    <div class="module" id="mod{m['id']}" style="display:none">
      <h2>Module {m['id']}: {m['title']}</h2>
      {m['content']}
      <div class="wistje" onclick="this.classList.toggle('open')"><strong>📖 Wist je dat?</strong><div class="wistje-body">{m['wistje']}</div></div>
      <div class="praktijk"><strong>🏭 Phoenix Metals Praktijk</strong><p>{m['praktijk']}</p></div>
      <div class="controle-vraag">
        <h3>✅ Controle-vraag</h3>
        <p>{m['vraag']}</p>
        {opts}
        <div id="mq{m['id']}fb" class="feedback"></div>
      </div>
      <div class="nav-buttons">
        {'<button onclick="goMod(' + str(m['id']-1) + ')">⬅ Vorige</button>' if m['id'] > 1 else ''}
        <button onclick="goMod({m['id']+1 if m['id'] < 10 else 'quiz'})">{'Volgende module ➡' if m['id'] < 10 else 'Start Quiz 📋'}</button>
      </div>
    </div>"""

    quiz_html = ""
    for i, q in enumerate(quiz):
        opts = "".join(f'<label class="quiz-option" onclick="checkQuiz(this,{i},{j},{q['c']})"><input type="radio" name="q{i}">{o}</label>' for j, o in enumerate(q["o"]))
        quiz_html += f"""
      <div class="quiz-q" id="qq{i}">
        <p><strong>Vraag {i+1}:</strong> {q['v']}</p>
        {opts}
        <div id="qfb{i}" class="feedback"></div>
      </div>"""

    html = """<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>T06 — Emergency Response Equipment | Phoenix Metals B.V.</title>
<style>
*{{margin:0;padding:0;box-sizing:border-box}}
body{{font-family:Calibri,Arial,sans-serif;background:#e8f4f8;color:#1F2937;line-height:1.6}}
.header{{background:linear-gradient(135deg,#003366,#1a5276);color:#fff;padding:20px 30px;position:sticky;top:0;z-index:100;box-shadow:0 2px 10px rgba(0,0,0,.3)}}
.header h1{{font-size:1.3em}}.header .sub{{font-size:.85em;opacity:.85}}
.progress-bar{{height:6px;background:#e8f4f8;border-radius:3px;overflow:hidden;margin-top:8px}}
.progress-bar .fill{{height:100%;background:linear-gradient(90deg,#f39c12,#27ae60);transition:width .4s;width:0%}}
.container{{max-width:900px;margin:20px auto;padding:0 15px}}
.module,.welcome,.quiz-section,.cert-section{{background:#fff;border-radius:12px;padding:25px 30px;margin-bottom:20px;box-shadow:0 2px 12px rgba(0,0,0,.08)}}
h2{{color:#003366;margin-bottom:12px}}h3{{color:#1a5276;margin:12px 0 8px}}
p{{margin-bottom:10px}}
.wistje{{background:#fff8e1;border-left:4px solid #f39c12;padding:10px 15px;margin:15px 0;cursor:pointer;border-radius:0 8px 8px 0}}
.wistje .wistje-body{{display:none;margin-top:8px}}.wistje.open .wistje-body{{display:block}}
.praktijk{{background:#e8f4f8;border-left:4px solid #003366;padding:12px 15px;margin:15px 0;border-radius:0 8px 8px 0}}
.praktijk strong{{color:#003366}}
.controle-vraag{{background:#f0f9ff;border:2px solid #1a5276;border-radius:8px;padding:15px;margin:15px 0}}
.quiz-option{{display:block;padding:10px 15px;margin:5px 0;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s}}
.quiz-option:hover{{background:#e8f4f8;border-color:#1a5276}}
.quiz-option.correct{{background:#d5f5e3;border-color:#27ae60}}
.quiz-option.wrong{{background:#fadbd8;border-color:#e74c3c}}
.feedback{{margin-top:8px;font-weight:bold;min-height:1.2em}}
.nav-buttons{{display:flex;justify-content:space-between;margin-top:20px}}
button{{background:linear-gradient(135deg,#003366,#1a5276);color:#fff;border:none;padding:12px 24px;border-radius:8px;cursor:pointer;font-size:1em;transition:all .2s}}
button:hover{{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,51,102,.4)}}
.btn-quiz{{background:linear-gradient(135deg,#f39c12,#e67e22)}}
.quiz-result{{text-align:center;padding:20px}}
.cert-section{{text-align:center}}
.cert-box{{border:3px solid #003366;border-radius:12px;padding:30px;margin:20px auto;max-width:600px;background:linear-gradient(135deg,#fff,#e8f4f8)}}
.cert-box h2{{color:#003366;font-size:1.5em}}
.hidden{{display:none!important}}
@media(max-width:600px){{.container{{padding:0 8px}}.module,.welcome,.quiz-section,.cert-section{{padding:15px}}}}
</style>
</head>
<body>
<div class="header">
  <h1>🛡️ T06 — Emergency Response Equipment</h1>
  <div class="sub">Phoenix Metals B.V. | PlantOne IJmuiden &amp; Rotterdam | eLearning v1.1</div>
  <div class="progress-bar"><div class="fill" id="pbar"></div></div>
</div>
<div class="container">

  <div class="welcome" id="welcome">
    <h2>Welkom bij deze eLearning</h2>
    <p>Deze training behandelt alle nooduitrusting bij Phoenix Metals B.V. Na het doorlopen van 10 modules volgt een quiz. Je hebt minimaal 80% correct nodig om te slagen.</p>
    <p><strong>Structuur:</strong> 10 modules → Quiz (10 vragen) → Certificaat</p>
    <p><strong>Verantwoordelijke:</strong> MD Stijn van Zelst | <strong>Locatie:</strong> PlantOne IJmuiden + Rotterdam</p>
    <div style="text-align:center;margin-top:20px"><button onclick="goMod(1)">Start Training ➡</button></div>
  </div>

  {mods_html}

  <div class="quiz-section" id="quiz" style="display:none">
    <h2>📋 Quiz — Emergency Response Equipment</h2>
    <p>Beantwoord alle 10 vragen. Je hebt minimaal 8 correct nodig (80%).</p>
    {quiz_html}
    <div style="text-align:center;margin-top:20px">
      <button class="btn-quiz" onclick="submitQuiz()">Inleveren ✅</button>
    </div>
    <div id="quiz-result" class="quiz-result hidden">
      <h3 id="result-title"></h3>
      <p id="result-text"></p>
      <div id="cert-input" class="hidden">
        <p>Vul je naam in voor het certificaat:</p>
        <input type="text" id="uname" placeholder="Voor- en achternaam" style="padding:8px;font-size:1em;border:2px solid #003366;border-radius:6px;width:280px;margin:10px">
        <button onclick="showCert()">Genereer Certificaat 🎓</button>
      </div>
    </div>
  </div>

  <div class="cert-section hidden" id="cert">
    <div class="cert-box">
      <h2>🎓 Certificaat van Voltooiing</h2>
      <p style="font-size:1.2em;margin:15px 0">Dit certificaat wordt verstrekt aan</p>
      <h3 id="cert-name" style="font-size:1.4em;color:#003366"></h3>
      <p>voor het succesvol voltooien van</p>
      <p><strong>T06 — Emergency Response Equipment</strong></p>
      <p>Phoenix Metals B.V. — PlantOne IJmuiden &amp; Rotterdam</p>
      <p id="cert-score" style="margin-top:10px"></p>
      <p id="cert-date" style="margin-top:10px;color:#666"></p>
      <p style="margin-top:15px;font-size:.9em;color:#666">MD: Stijn van Zelst | Versie 1.1 | """ + today + """</p>
    </div>
    <button onclick="window.print()" style="margin-top:15px">🖨️ Afdrukken</button>
  </div>

</div>
<script>
const total=10;let current=0,score=0,answered={},quizAnswered={};
function goMod(n){{
  document.querySelectorAll('.module,.welcome,.quiz-section,.cert-section').forEach(e=>e.style.display='none');
  if(n==='quiz'){{document.getElementById('quiz').style.display='block';current=total;}}
  else if(n==='cert'){{document.getElementById('cert').classList.remove('hidden');document.getElementById('cert').style.display='block';current=total+1;}}
  else{{document.getElementById('mod'+n).style.display='block';current=n-1;}}
  document.getElementById('pbar').style.width=((current)/(total+1)*100)+'%';
  window.scrollTo(0,0);
}}
function checkModuleQ(el,mod,idx,correct){{
  if(answered[mod])return;answered[mod]=true;
  el.parentElement.querySelectorAll('.quiz-option').forEach((o,i)=>{{
    o.style.pointerEvents='none';
    if(i===correct)o.classList.add('correct');
    if(i===idx&&i!==correct)o.classList.add('wrong');
  }});
  let fb=document.getElementById('mq'+mod+'fb');
  fb.textContent=idx===correct?'✅ Correct!':'❌ Fout — het juiste antwoord is gemarkeerd.';
  fb.style.color=idx===correct?'#27ae60':'#e74c3c';
}}
function checkQuiz(el,qi,idx,correct){{
  if(quizAnswered[qi]!==undefined)return;quizAnswered[qi]=idx;
  el.parentElement.querySelectorAll('.quiz-option').forEach((o,i)=>{{
    o.style.pointerEvents='none';
    if(i===correct)o.classList.add('correct');
    if(i===idx&&i!==correct)o.classList.add('wrong');
  }});
  let fb=document.getElementById('qfb'+qi);
  fb.textContent=idx===correct?'✅ Correct!':'❌ Fout';
  fb.style.color=idx===correct?'#27ae60':'#e74c3c';
}}
function submitQuiz(){{
  if(Object.keys(quizAnswered).length<total){{alert('Beantwoord alle 10 vragen eerst!');return;}}
  score=0;
  const answers={0:0,1:2,2:1,3:0,4:1,5:2,6:2,7:2,8:1,9:2};
  for(let k in quizAnswered)if(quizAnswered[k]===answers[k])score++;
  let ok=score>=8;
  document.getElementById('result-title').textContent=ok?'🎉 Gefeliciteerd — Geslaagd!':'❌ Helaas — Niet geslaagd';
  document.getElementById('result-title').style.color=ok?'#27ae60':'#e74c3c';
  document.getElementById('result-text').textContent='Score: '+score+'/10 ('+(score*10)+'%) — Cesuur: 80%';
  document.getElementById('quiz-result').classList.remove('hidden');
  if(ok)document.getElementById('cert-input').classList.remove('hidden');
  document.getElementById('pbar').style.width='95%';
}}
function showCert(){{
  let name=document.getElementById('uname').value.trim();
  if(!name){{alert('Vul je naam in!');return;}}
  document.getElementById('cert-name').textContent=name;
  document.getElementById('cert-score').textContent='Behaald resultaat: '+score+'/10 ('+(score*10)+'%)';
  document.getElementById('cert-date').textContent='Datum: '+new Date().toLocaleDateString('nl-NL');
  goMod('cert');
}}
</script>
</body>
</html>"""

    with open(OUT, "w", encoding="utf-8") as f:
        f.write(html)
    print(f"✅ {OUT}")

if __name__ == "__main__":
    build()
