#!/usr/bin/env python3
"""Genereer eLearning HTML, Quiz HTML+JSON, SCORM ZIP"""
import os, json, zipfile, datetime

BASE = "/root/projects/jg/2026-pgs15-phoenix-metals"
HTML_DIR = f"{BASE}/deliverables/html"
SCORM_DIR = f"{BASE}/deliverables/scorm"

LOGO_B64_PATH = "/root/projects/jg/assets/branding/logo-white-base64.txt"
try:
    with open(LOGO_B64_PATH) as f:
        LOGO_B64 = f.read().strip()
except:
    LOGO_B64 = ""

os.makedirs(HTML_DIR, exist_ok=True)
os.makedirs(SCORM_DIR, exist_ok=True)

NOW = datetime.datetime.now().strftime("%Y-%m-%d")

# ═══ eLearning HTML ═══
def gen_elearning():
    chapters = [
        ("intro", "Introductie PGS 15", """<h3>Wat is PGS 15?</h3>
<p>PGS 15 is de Nederlandse richtlijn voor de <strong>opslag van verpakte gevaarlijke stoffen</strong>. De nieuwste versie is <strong>PGS 15:2025 Nieuwe Stijl</strong> (januari 2025).</p>
<p>Voor Phoenix Metals B.V. is PGS 15 van toepassing op de opslag van:</p>
<ul>
<li><strong>Zwavelzuur (H₂SO₄)</strong> — ADR-klasse 8, bijtend</li>
<li><strong>Natriumhydroxide (NaOH)</strong> — ADR-klasse 8, bijtend</li>
<li><strong>Vanadiumoplossingen</strong> — ADR-klasse 9, milieugevaarlijk</li>
</ul>
<p>In deze eLearning leer je alles over veilige opslag conform PGS 15:2025, specifiek voor Phoenix Metals.</p>"""),
        
        ("nieuwestijl", "PGS 15:2025 Nieuwe Stijl", """<h3>De nieuwe structuur</h3>
<p>PGS 15:2025 introduceert een risicogebaseerde methodiek:</p>
<ul>
<li><strong>Scenario's (S1-S16)</strong>: Wat kan er mis gaan?</li>
<li><strong>Doelen (D1-D13)</strong>: Wat willen we bereiken?</li>
<li><strong>Maatregelen (M1-M167)</strong>: Hoe bereiken we dat?</li>
</ul>
<h3>4 Veiligheidsniveaus</h3>
<table class="info-table">
<tr><th>Niveau</th><th>Beschrijving</th><th>Phoenix Metals</th></tr>
<tr><td><span class="badge badge-green">Basis</span></td><td>Minimale set, altijd van toepassing</td><td>✅ Van toepassing</td></tr>
<tr><td><span class="badge badge-yellow">A</span></td><td>Branddetectie, VBB, blusleiding</td><td>Niet nodig</td></tr>
<tr><td><span class="badge badge-orange">B</span></td><td>Brand- en toxiciteitsmaatregelen</td><td>Niet nodig</td></tr>
<tr><td><span class="badge badge-red">C</span></td><td>Strengste niveau</td><td>Niet nodig</td></tr>
</table>
<p><strong>Waarom basis?</strong> H₂SO₄, NaOH en vanadium zijn <em>onbrandbaar</em> bij dedicated opslag.</p>"""),
        
        ("stoffen", "Gevaarlijke Stoffen bij PM", """<h3>Zwavelzuur (H₂SO₄)</h3>
<table class="info-table">
<tr><th>Eigenschap</th><th>Waarde</th></tr>
<tr><td>ADR-klasse</td><td>8 (Bijtend)</td></tr>
<tr><td>UN-nummer</td><td>1830 / 2796</td></tr>
<tr><td>H-zinnen</td><td>H290, H314</td></tr>
<tr><td>GHS-pictogrammen</td><td>GHS05 + GHS07</td></tr>
<tr><td>Signaalwoord</td><td><strong>GEVAAR</strong></td></tr>
</table>
<h3>Natriumhydroxide (NaOH) 50%</h3>
<table class="info-table">
<tr><th>Eigenschap</th><th>Waarde</th></tr>
<tr><td>ADR-klasse</td><td>8 (Bijtend)</td></tr>
<tr><td>UN-nummer</td><td>1824</td></tr>
<tr><td>H-zinnen</td><td>H290, H314</td></tr>
<tr><td>Kristallisatie</td><td>⚠️ &lt;12°C!</td></tr>
<tr><td>Signaalwoord</td><td><strong>GEVAAR</strong></td></tr>
</table>
<h3>⚠️ KRITIEK: Scheiding</h3>
<div class="warning-box">
<strong>H₂SO₄ en NaOH MOETEN GESCHEIDEN worden opgeslagen!</strong><br>
Bij menging: heftige exotherme reactie → hitte + spatten → ernstig letselrisico.
</div>"""),
        
        ("opslag", "Opslageisen", """<h3>Basisveiligheidsniveau eisen</h3>
<ul>
<li><strong>Opvangcapaciteit</strong>: 110% van grootste verpakking of 10% van totaal (wat meer is)</li>
<li><strong>Scheiding</strong>: Zuren en basen in aparte vakken</li>
<li><strong>Geen Wbdbo-eis</strong> bij dedicated onbrandbare opslag</li>
<li><strong>Geen verdiepingsbeperking</strong> voor onbrandbaar ADR-8/9</li>
<li><strong>Max oppervlak</strong>: 1.000 m² (&lt;20 ton) of 2.500 m² (&gt;20 ton)</li>
</ul>
<h3>Temperatuurbewaking</h3>
<div class="warning-box">
<strong>NaOH 50% kristalliseert bij &lt;12°C!</strong><br>
Maatregelen: temperatuursensor + alarm + verwarmingstracing + SCADA-log.
</div>
<h3>Neutralisatiemiddelen</h3>
<table class="info-table">
<tr><th>Stof</th><th>Neutralisatiemiddel</th></tr>
<tr><td>H₂SO₄ lekkage</td><td>Natriumcarbonaat (soda)</td></tr>
<tr><td>NaOH lekkage</td><td>Citroenzuur of azijnzuuroplossing</td></tr>
</table>"""),
        
        ("etiket", "Etikettering en Signalering", """<h3>Tanketiket — 10 verplichte elementen</h3>
<ol>
<li>Productnaam</li>
<li>CAS-nummer</li>
<li>GHS-pictogrammen (min 10×10 cm)</li>
<li>Signaalwoord (GEVAAR/WAARSCHUWING)</li>
<li>H-zinnen</li>
<li>P-zinnen</li>
<li>UN-nummer</li>
<li>Tankinhoud (liters)</li>
<li>Leverancier + contact</li>
<li>Noodtelefoon (24/7)</li>
</ol>
<h3>Borden bij opslagvoorziening</h3>
<ul>
<li>ADR-etiket klasse 8 (min 20×20 cm)</li>
<li>'Vuur/roken verboden' bord</li>
<li>'Bevoegd personeel' bord</li>
<li>Calamiteiteninstructie</li>
</ul>"""),
        
        ("veilig", "Veilig Werken & PBM's", """<h3>Verplichte PBM's</h3>
<table class="info-table">
<tr><th>Activiteit</th><th>PBM's</th></tr>
<tr><td>Werken met H₂SO₄</td><td>Zuurbestendige handschoenen, veiligheidsbril/face shield, beschermkleding</td></tr>
<tr><td>Werken met NaOH</td><td>Bijtwerende handschoenen (nitril/neopreen), veiligheidsbril, beschermkleding</td></tr>
<tr><td>Lekkage opruimen</td><td>Alles boven + evt. adembescherming</td></tr>
</table>
<h3>Noodvoorzieningen</h3>
<ul>
<li>Nooddouche binnen 10 seconden loopafstand</li>
<li>Oogdoucher binnen 10 seconden loopafstand</li>
<li>Absorptie- en neutralisatiemateriaal paraat</li>
<li>POVEERblusser (6 kg) beschikbaar</li>
</ul>"""),
        
        ("nood", "Noodprocedures", """<h3>Bij LEKKAGE</h3>
<ol>
<li><strong>ALARM</strong> — collega's waarschuwen, omgeving evacueren</li>
<li>PBM's aantrekken</li>
<li>Bron indammen (absorptiemateriaal)</li>
<li><strong>NOOIT zuur en base mengen!</strong></li>
<li>H₂SO₄: neutraliseren met <strong>soda</strong></li>
<li>NaOH: neutraliseren met <strong>citroenzuur</strong></li>
<li>Groot (>50L): <strong>112</strong> bellen</li>
<li>Opruimen in afvalvat</li>
</ol>
<h3>Bij BRAND</h3>
<ol>
<li>Brandalarm + evacueren</li>
<li>Brandweer <strong>112</strong></li>
<li><strong>NOOIT water op zuur-lekkage</strong></li>
<li>Poederblusser (6 kg) voor kleine branden</li>
<li>Grote brand: niet zelf blussen</li>
</ol>
<h3>Bij BLOOTSTELLING</h3>
<ol>
<li>Direct nooddouche/ogen doucheren (15 min)</li>
<li>Besmette kleding verwijderen</li>
<li>Medische hulp inschakelen</li>
<li>Melden aan HSE Manager</li>
</ol>"""),
        
        ("doc", "Documenten en Administratie", """<h3>11 Verplichte Documenttypen</h3>
<table class="info-table">
<tr><th>#</th><th>Document</th><th>Update</th></tr>
<tr><td>1</td><td>Stoffenlijst</td><td>Continu</td></tr>
<tr><td>2</td><td>SDS/VIB's</td><td>Max 5 jaar</td></tr>
<tr><td>3</td><td>Plattegrond opslag</td><td>Bij wijziging</td></tr>
<tr><td>4</td><td>Calamiteiteninstructie</td><td>Jaarlijks</td></tr>
<tr><td>5</td><td>Lekkage-instructie</td><td>Jaarlijks</td></tr>
<tr><td>6</td><td>Noodplan</td><td>Jaarlijks</td></tr>
<tr><td>7</td><td>RI&E</td><td>Jaarlijks</td></tr>
<tr><td>8</td><td>Keuringsrapporten</td><td>Per keuring</td></tr>
<tr><td>9</td><td>UPD (VBB)</td><td>Bij wijziging</td></tr>
<tr><td>10</td><td>Wbdbo-rapportage</td><td>Bij wijziging</td></tr>
<tr><td>11</td><td>Opleidingsrecords</td><td>Per training</td></tr>
</table>
<h3>Belangrijk</h3>
<ul>
<li>Stoffenlijst + plattegrond: <strong>hardcopy aan brandweer</strong></li>
<li>Alle documenten: versienummer + datum + goedkeuring</li>
<li>SDS: <strong>in het Nederlands</strong></li>
</ul>
<h3>Congratulations!</h3>
<p>Je hebt alle 8 hoofdstukken afgerond. Nu ben je klaar voor de quiz!</p>"""),
    ]
    
    nav_items = "".join(f'<li data-chapter="{cid}" class="nav-item">{ctitle}</li>' for cid, ctitle, _ in chapters)
    chapters_html = "".join(f'<div class="chapter" id="ch-{cid}">{content}</div>' for cid, _, content in chapters)
    
    html = f"""<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PGS-15 Opslagveiligheid eLearning v2.0 — Phoenix Metals</title>
<style>
:root {{ --pm-dark: #1a2744; --pm-blue: #2d5aa0; --pm-accent: #e8792f; --pm-green: #2d8f4e; --pm-light: #f0f4f8; --pm-text: #333; }}
* {{ margin:0; padding:0; box-sizing:border-box; }}
body {{ font-family:'Segoe UI',Calibri,Arial,sans-serif; background:var(--pm-light); color:var(--pm-text); }}
.header {{ background:var(--pm-dark); color:white; padding:1rem; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; }}
.header img {{ height:40px; }}
.header h1 {{ font-size:1.1rem; }}
.progress-bar {{ background:#ddd; height:6px; width:100%; }}
.progress-fill {{ background:var(--pm-accent); height:6px; width:0%; transition:width 0.3s; }}
.container {{ display:flex; min-height:calc(100vh - 80px); }}
.sidebar {{ width:240px; background:white; border-right:1px solid #ddd; padding:1rem 0; flex-shrink:0; overflow-y:auto; }}
.sidebar ul {{ list-style:none; }}
.nav-item {{ padding:0.75rem 1.5rem; cursor:pointer; border-left:3px solid transparent; font-size:0.9rem; transition:all 0.2s; }}
.nav-item:hover {{ background:var(--pm-light); }}
.nav-item.active {{ border-left-color:var(--pm-accent); background:var(--pm-light); font-weight:600; }}
.nav-item.completed {{ color:var(--pm-green); }}
.nav-item.completed::before {{ content:"✓ "; }}
.content {{ flex:1; padding:2rem; max-width:900px; }}
.chapter {{ display:none; }}
.chapter.active {{ display:block; }}
.chapter h2 {{ color:var(--pm-dark); margin-bottom:1rem; }}
.chapter h3 {{ color:var(--pm-blue); margin:1rem 0 0.5rem; }}
.chapter p {{ margin:0.5rem 0; line-height:1.6; }}
.chapter ul, .chapter ol {{ margin:0.5rem 0 0.5rem 1.5rem; }}
.chapter li {{ margin:0.3rem 0; line-height:1.5; }}
.info-table {{ width:100%; border-collapse:collapse; margin:1rem 0; }}
.info-table th {{ background:var(--pm-dark); color:white; padding:0.5rem; text-align:left; font-size:0.85rem; }}
.info-table td {{ padding:0.5rem; border-bottom:1px solid #ddd; font-size:0.9rem; }}
.info-table tr:nth-child(even) {{ background:#f8f9fa; }}
.warning-box {{ background:#fff3cd; border-left:4px solid var(--pm-accent); padding:1rem; margin:1rem 0; border-radius:4px; }}
.badge {{ padding:2px 8px; border-radius:4px; color:white; font-size:0.8rem; }}
.badge-green {{ background:var(--pm-green); }}.badge-yellow {{ background:#d4a017; }}.badge-orange {{ background:var(--pm-accent); }}.badge-red {{ background:#c0392b; }}
.nav-buttons {{ display:flex; justify-content:space-between; margin-top:2rem; padding-top:1rem; border-top:1px solid #ddd; }}
.btn {{ padding:0.6rem 1.5rem; border:none; border-radius:4px; cursor:pointer; font-size:0.95rem; font-weight:600; }}
.btn-prev {{ background:#ddd; color:#333; }}.btn-next {{ background:var(--pm-blue); color:white; }}
.btn-next:hover {{ background:var(--pm-dark); }}
.btn-quiz {{ background:var(--pm-green); color:white; font-size:1.1rem; padding:0.8rem 2rem; }}
@media (max-width:768px) {{ .sidebar {{ width:100%; position:relative; }} .container {{ flex-direction:column; }} .nav-item {{ display:inline-block; padding:0.5rem 1rem; border-left:none; border-bottom:2px solid transparent; }} }}
</style>
</head>
<body>
<div class="header">
<div style="display:flex;align-items:center;gap:1rem">
<img src="data:image/png;base64,{LOGO_B64}" alt="JvG" onerror="this.style.display='none'">
<h1>PGS-15 Opslagveiligheid — Phoenix Metals</h1>
</div>
<span style="font-size:0.8rem">v2.0</span>
</div>
<div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
<div class="container">
<div class="sidebar"><ul id="navList">{nav_items}</ul></div>
<div class="content" id="contentArea">
{chapters_html}
<div class="nav-buttons">
<button class="btn btn-prev" id="btnPrev" onclick="prevChapter()">← Vorige</button>
<button class="btn btn-next" id="btnNext" onclick="nextChapter()">Volgende →</button>
</div>
</div>
</div>
<script>
const chapters = {json.dumps([c[0] for c in chapters])};
let current = 0;
const completed = new Set();
function showChapter(idx) {{
  document.querySelectorAll('.chapter').forEach(c => c.classList.remove('active'));
  document.getElementById('ch-' + chapters[idx]).classList.add('active');
  document.querySelectorAll('.nav-item').forEach((n,i) => n.classList.toggle('active', i===idx));
  current = idx;
  updateButtons();
}}
function updateButtons() {{
  document.getElementById('btnPrev').disabled = current===0;
  const nextBtn = document.getElementById('btnNext');
  if (current === chapters.length-1) {{ nextBtn.textContent='Start Quiz →'; nextBtn.onclick=()=>window.location.href='PGS15_Opslagveiligheid_Quiz_v2.0.html'; }}
  else {{ nextBtn.textContent='Volgende →'; nextBtn.onclick=nextChapter; }}
}}
function nextChapter() {{ completed.add(current); markCompleted(); if(current<chapters.length-1)showChapter(current+1); updateProgress(); }}
function prevChapter() {{ if(current>0)showChapter(current-1); }}
function markCompleted() {{ completed.forEach(i=>document.querySelectorAll('.nav-item')[i]?.classList.add('completed')); }}
function updateProgress() {{ document.getElementById('progressFill').style.width=(completed.size/chapters.length*100)+'%'; }}
document.querySelectorAll('.nav-item').forEach((n,i)=>n.addEventListener('click',()=>showChapter(i)));
showChapter(0);
</script>
</body>
</html>"""
    
    fp = f"{HTML_DIR}/PGS15_Opslagveiligheid_eLearning_v2.0.html"
    with open(fp, 'w') as f:
        f.write(html)
    print(f"✅ eLearning HTML: {fp}")

# ═══ Quiz HTML + JSON ═══
def gen_quiz():
    questions = [
        {"id":1,"question":"Wat betekent de afkorting PGS?","options":["Publicatiereeks Gevaarlijke Stoffen","Procedure Gevaarlijke Stof","Programma Gevaarlijk Spul","Protocol Gevaarlijke Situatie"],"correct":0,"explanation":"PGS staat voor Publicatiereeks Gevaarlijke Stoffen — Nederlandse richtlijnen voor veilige opslag."},
        {"id":2,"question":"Welke ADR-klasse hebben H₂SO₄ en NaOH?","options":["Klasse 3 (Brandbaar)","Klasse 6 (Giftig)","Klasse 8 (Bijtend)","Klasse 9 (Milieugevaarlijk)"],"correct":2,"explanation":"H₂SO₄ en NaOH zijn ADR-klasse 8: bijtende (corrosieve) stoffen."},
        {"id":3,"question":"Waarom moeten H₂SO₄ en NaOH GESCHEIDEN worden opgeslagen?","options":["Omdat ze beide brandbaar zijn","Omdat zuur en base exotherm reageren bij menging","Omdat ze dezelfde UN-nummers hebben","Omdat ze beide giftig zijn"],"correct":1,"explanation":"Zuur (H₂SO₄) en base (NaOH) reageren exotherm: hitte + spatten → ernstig letselrisico. PGS 15:2025 Bijlage E."},
        {"id":4,"question":"Bij welke temperatuur kristalliseert NaOH 50%?","options":["0°C","5°C","12°C","25°C"],"correct":2,"explanation":"NaOH 50% kristalliseert bij ~12°C. Daarom is temperatuurbewaking + verwarmingstracing verplicht."},
        {"id":5,"question":"Wat is het vereiste veiligheidsniveau voor Phoenix Metals?","options":["Veiligheidsniveau C","Veiligheidsniveau B","Veiligheidsniveau A","Basisveiligheidsniveau"],"correct":3,"explanation":"H₂SO₄, NaOH en vanadium zijn onbrandbaar bij dedicated opslag → alleen basisveiligheidsniveau vereist."},
        {"id":6,"question":"Welk neutralisatiemiddel gebruik je bij H₂SO₄-lekkage?","options":["Citroenzuur","Natriumcarbonaat (soda)","Water","Azijn"],"correct":1,"explanation":"H₂SO₄ (zuur) neutraliseer je met een base: natriumcarbonaat (soda). NOOIT water direct op geconcentreerd zuur!"},
        {"id":7,"question":"Welke GHS-pictogrammen staan op H₂SO₄?","options":["GHS02 (Vlam) + GHS06 (Doodshoofd)","GHS05 (Corrosief) + GHS07 (Exclamatie)","GHS09 (Milieu) alleen","GHS01 (Explosief) + GHS03 (Vlam over cirkel)"],"correct":1,"explanation":"H₂SO₄: GHS05 (corrosief/bijtend) + GHS07 (irriterend). Signaalwoord: GEVAAR."},
        {"id":8,"question":"Wat is de opvangcapaciteit bij basisveiligheidsniveau?","options":["50% van totaal","100% van totaal","110% van grootste verpakking of 10% totaal","200% van grootste verpakking"],"correct":2,"explanation":"PGS 15:2025 M30: 110% van grootste verpakking of 10% van totale inhoud (wat groter is)."},
        {"id":9,"question":"Wat is NIET verplicht bij basisveiligheidsniveau?","options":["Opvangcapaciteit","Branddetectiesysteem","Etikettering","SDS beschikbaar"],"correct":1,"explanation":"Branddetectie (M96) is alleen verplicht bij veiligheidsniveau A. Bij basisniveau niet nodig voor onbrandbare stoffen."},
        {"id":10,"question":"Welke ADR-klasse heeft vanadiumoplossing waarschijnlijk?","options":["Klasse 3","Klasse 6.1","Klasse 8","Klasse 9"],"correct":3,"explanation":"Vanadiumoplossingen zijn waarschijnlijk UN 3082, ADR-klasse 9: milieugevaarlijke stoffen."},
        {"id":11,"question":"Wat doe je EERST bij een lekkage van gevaarlijke stof?","options":["Brandweer bellen","Neutraliseren","ALARM slaan en collega's waarschuwen","Opruimen met doekjes"],"correct":2,"explanation":"Eerste stap: ALARM — collega's waarschuwen, directe omgeving evacueren. Dan pas PBM's + indammen."},
        {"id":12,"question":"Hoeveel elementen moet een tanketiket minimaal bevatten?","options":["5","7","10","15"],"correct":2,"explanation":"10 verplichte elementen: productnaam, CAS, GHS-pictogrammen, signaalwoord, H-zinnen, P-zinnen, UN-nummer, inhoud, leverancier, noodtelefoon."},
        {"id":13,"question":"Wat is een scenariostudie in PGS 15:2025?","options":["Een brandtest","Een beschrijving van wat er mis kan gaan (oorzaken + gevolgen)","Een financiële analyse","Een milieu-effectrapportage"],"correct":1,"explanation":"PGS 15:2025 gebruikt scenario's S1-S16: oorzaakscenario's (S1-S10) en gevolgscenario's (S11-S16)."},
        {"id":14,"question":"Waar moet de nooddouche zich bevinden?","options":["In het kantoor","Binnen 10 seconden loopafstand","Bij de uitgang","In de kantine"],"correct":1,"explanation":"Nooddouche + oogdoucher moeten binnen 10 seconden loopafstand van de opslag/werkplek zijn."},
        {"id":15,"question":"Wat is de slagingsgrens voor deze PGS-15 quiz?","options":["50%","60%","70%","80%"],"correct":3,"explanation":"De slagingsgrens is 80%. Je moet minimaal 12 van de 15 vragen correct beantwoorden."},
    ]
    
    # Save JSON
    json_fp = f"{HTML_DIR}/PGS15_Opslagveiligheid_Quiz_v2.0.json"
    with open(json_fp, 'w') as f:
        json.dump({"title":"PGS-15 Opslagveiligheid Quiz v2.0","version":"2.0","passing_score":80,"questions":questions}, f, indent=2)
    print(f"✅ Quiz JSON: {json_fp}")
    
    # HTML
    q_html = ""
    for q in questions:
        opts = "".join(f'<label class="option" data-qid="{q["id"]}" data-idx="{i}"><input type="radio" name="q{q["id"]}" value="{i}"><span>{opt}</span></label>' for i, opt in enumerate(q["options"]))
        q_html += f"""<div class="question" id="q{q['id']}">
<div class="q-number">Vraag {q['id']} van 15</div>
<p class="q-text">{q['question']}</p>
<div class="options">{opts}</div>
<div class="feedback" id="fb{q['id']}"></div>
</div>"""
    
    html = f"""<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PGS-15 Quiz v2.0 — Phoenix Metals</title>
<style>
:root {{ --pm-dark:#1a2744; --pm-blue:#2d5aa0; --pm-accent:#e8792f; --pm-green:#2d8f4e; --pm-light:#f0f4f8; --pm-red:#c0392b; }}
* {{ margin:0;padding:0;box-sizing:border-box; }}
body {{ font-family:'Segoe UI',Calibri,sans-serif; background:var(--pm-light); color:#333; }}
.header {{ background:var(--pm-dark); color:white; padding:1rem; display:flex; align-items:center; gap:1rem; }}
.header img {{ height:40px; }}
.container {{ max-width:800px; margin:2rem auto; padding:0 1rem; }}
.question {{ background:white; border-radius:8px; padding:1.5rem; margin:1rem 0; box-shadow:0 2px 4px rgba(0,0,0,0.1); }}
.q-number {{ font-size:0.85rem; color:var(--pm-blue); margin-bottom:0.5rem; }}
.q-text {{ font-size:1.1rem; font-weight:600; margin-bottom:1rem; }}
.options {{ display:flex; flex-direction:column; gap:0.5rem; }}
.option {{ display:flex; align-items:center; gap:0.5rem; padding:0.75rem; border:2px solid #ddd; border-radius:6px; cursor:pointer; transition:all 0.2s; }}
.option:hover {{ border-color:var(--pm-blue); background:#f0f4f8; }}
.option.selected {{ border-color:var(--pm-blue); background:#e3edf7; }}
.option.correct {{ border-color:var(--pm-green); background:#e8f5e9; }}
.option.wrong {{ border-color:var(--pm-red); background:#fde8e8; }}
.option input {{ display:none; }}
.feedback {{ margin-top:0.75rem; padding:0.75rem; border-radius:4px; display:none; font-size:0.95rem; }}
.feedback.show {{ display:block; }}
.feedback.correct-fb {{ background:#e8f5e9; color:var(--pm-green); }}
.feedback.wrong-fb {{ background:#fde8e8; color:var(--pm-red); }}
.result {{ background:white; border-radius:8px; padding:2rem; margin:1rem 0; text-align:center; box-shadow:0 2px 4px rgba(0,0,0,0.1); }}
.result h2 {{ margin-bottom:1rem; }}
.result .score {{ font-size:3rem; font-weight:bold; }}
.score.pass {{ color:var(--pm-green); }}.score.fail {{ color:var(--pm-red); }}
.btn {{ padding:0.7rem 2rem; border:none; border-radius:6px; cursor:pointer; font-size:1rem; font-weight:600; margin:0.5rem; }}
.btn-submit {{ background:var(--pm-blue); color:white; }}.btn-retry {{ background:var(--pm-accent); color:white; }}
.btn-elearning {{ background:var(--pm-dark); color:white; }}
#resultArea {{ display:none; }}
</style>
</head>
<body>
<div class="header">
<img src="data:image/png;base64,{LOGO_B64}" alt="JvG" onerror="this.style.display='none'">
<h1>PGS-15 Quiz — Phoenix Metals</h1>
</div>
<div class="container">
<h2 style="color:var(--pm-dark);margin-bottom:0.5rem">PGS-15 Opslagveiligheid Quiz v2.0</h2>
<p style="margin-bottom:1rem">15 vragen over PGS 15:2025. Slagingsgrens: <strong>80%</strong> (12/15 correct).</p>
{q_html}
<div style="text-align:center;margin:1.5rem 0">
<button class="btn btn-submit" onclick="submitQuiz()">Inleveren</button>
</div>
<div id="resultArea">
<div class="result" id="resultBox"></div>
<div style="text-align:center">
<button class="btn btn-retry" onclick="location.reload()">Opnieuw proberen</button>
<a href="PGS15_Opslagveiligheid_eLearning_v2.0.html"><button class="btn btn-elearning">Terug naar eLearning</button></a>
</div>
</div>
</div>
<script>
const questions = {json.dumps(questions)};
const answers = {{}};
document.querySelectorAll('.option').forEach(opt => {{
  opt.addEventListener('click', function() {{
    const qid = this.dataset.qid;
    const idx = parseInt(this.dataset.idx);
    answers[qid] = idx;
    this.closest('.options').querySelectorAll('.option').forEach(o => o.classList.remove('selected'));
    this.classList.add('selected');
    this.querySelector('input').checked = true;
  }});
}});
function submitQuiz() {{
  let correct = 0;
  questions.forEach(q => {{
    const fb = document.getElementById('fb'+q.id);
    fb.classList.add('show');
    const opts = document.querySelectorAll('[data-qid="'+q.id+'"]');
    opts.forEach(o => {{
      const idx = parseInt(o.dataset.idx);
      if (idx === q.correct) o.classList.add('correct');
      if (answers[q.id] !== undefined && answers[q.id] === idx && idx !== q.correct) o.classList.add('wrong');
    }});
    if (answers[q.id] === q.correct) {{
      correct++;
      fb.className = 'feedback show correct-fb';
      fb.textContent = '✅ Correct! ' + q.explanation;
    }} else {{
      fb.className = 'feedback show wrong-fb';
      fb.textContent = '❌ Fout. ' + q.explanation;
    }}
  }});
  const pct = Math.round(correct / questions.length * 100);
  const pass = pct >= 80;
  const rb = document.getElementById('resultBox');
  rb.innerHTML = '<h2>' + (pass ? '🎉 Geslaagd!' : '❌ Niet geslaagd') + '</h2>' +
    '<div class="score ' + (pass?'pass':'fail') + '">' + pct + '%</div>' +
    '<p>' + correct + ' van ' + questions.length + ' correct (grens: 80%)</p>';
  document.getElementById('resultArea').style.display = 'block';
  document.querySelector('.btn-submit').disabled = true;
  rb.scrollIntoView({{behavior:'smooth'}});
}}
</script>
</body>
</html>"""
    
    html_fp = f"{HTML_DIR}/PGS15_Opslagveiligheid_Quiz_v2.0.html"
    with open(html_fp, 'w') as f:
        f.write(html)
    print(f"✅ Quiz HTML: {html_fp}")

# ═══ SCORM ZIP ═══
def gen_scorm():
    scorm_dir = f"{BASE}/_scorm_build"
    os.makedirs(scorm_dir, exist_ok=True)
    
    # Copy HTML files
    import shutil
    el_src = f"{HTML_DIR}/PGS15_Opslagveiligheid_eLearning_v2.0.html"
    qz_src = f"{HTML_DIR}/PGS15_Opslagveiligheid_Quiz_v2.0.html"
    js_src = f"{HTML_DIR}/PGS15_Opslagveiligheid_Quiz_v2.0.json"
    
    if os.path.exists(el_src): shutil.copy2(el_src, f"{scorm_dir}/index.html")
    if os.path.exists(qz_src): shutil.copy2(qz_src, f"{scorm_dir}/quiz.html")
    if os.path.exists(js_src): shutil.copy2(js_src, f"{scorm_dir}/quiz.json")
    
    # imsmanifest.xml
    manifest = """<?xml version="1.0" encoding="UTF-8"?>
<manifest identifier="PGS15_eLearning_v2.0" version="1.0"
  xmlns="http://www.imsproject.org/xsd/imscp_rootv1p1p2"
  xmlns:adlcp="http://www.adlnet.org/xsd/adlcp_rootv1p2"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.imsproject.org/xsd/imscp_rootv1p1p2 imscp_rootv1p1p2.xsd
                       http://www.adlnet.org/xsd/adlcp_rootv1p2 adlcp_rootv1p2.xsd">
  <metadata>
    <schema>ADL SCORM</schema>
    <schemaversion>1.2</schemaversion>
  </metadata>
  <organizations default="org1">
    <organization identifier="org1">
      <title>PGS-15 Opslagveiligheid eLearning v2.0</title>
      <item identifier="item1" identifierref="res1">
        <title>PGS-15 Opslagveiligheid — Phoenix Metals</title>
      </item>
    </organization>
  </organizations>
  <resources>
    <resource identifier="res1" type="webcontent" adlcp:scormtype="sco" href="index.html">
      <file href="index.html"/>
      <file href="quiz.html"/>
      <file href="quiz.json"/>
    </resource>
  </resources>
</manifest>"""
    
    with open(f"{scorm_dir}/imsmanifest.xml", 'w') as f:
        f.write(manifest)
    
    # Create ZIP
    zip_fp = f"{SCORM_DIR}/PGS15_Opslagveiligheid_SCORM_v2.0.zip"
    with zipfile.ZipFile(zip_fp, 'w', zipfile.ZIP_DEFLATED) as zf:
        for fname in os.listdir(scorm_dir):
            zf.write(f"{scorm_dir}/{fname}", fname)
    
    # Cleanup
    shutil.rmtree(scorm_dir)
    print(f"✅ SCORM ZIP: {zip_fp}")

# ═══ RUN ═══
gen_elearning()
gen_quiz()
gen_scorm()