#!/usr/bin/env python3
"""Genereer rapport_v1.0.html — responsive, JvG-branding (STYLEGUIDE v1.5 CSS-variabelen)."""
import base64, os, sys
sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
from rapport_content import SECTIES

OUT = os.path.join(os.path.dirname(os.path.dirname(os.path.abspath(__file__))), "deliverables", "rapport_v1.0.html")

LOGO_B64 = ""
b64file = "/root/projects/jg/assets/branding/logo-white-base64.txt"
if os.path.isfile(b64file):
    LOGO_B64 = open(b64file).read().strip()
if not LOGO_B64:
    png = "/root/projects/jg/assets/branding/jvg-consultancy-logo-white.png"
    if os.path.isfile(png):
        LOGO_B64 = base64.b64encode(open(png, "rb").read()).decode()
logo_html = f'<img src="data:image/png;base64,{LOGO_B64}" alt="JvG Consultancy">' if LOGO_B64 else ""

nav = "".join(f'<a href="#{sid}">{titel.split(".")[0]}. {titel.split(". ",1)[1].split(" (")[0]}</a>' for sid, titel, _ in SECTIES)
secties_html = "".join(f'<section id="{sid}"><h2>{titel}</h2>{body}</section>' for sid, titel, body in SECTIES)

CSS = """
:root { --primair:#003366; --donker:#0a1628; --succes:#00A859; --waarschuwing:#F59E0B; --fout:#C0392B; --bg:#f4f6f9; --tekst:#1f2937; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',Roboto,Arial,sans-serif; background:var(--bg); color:var(--tekst); line-height:1.65; }
header { background:var(--donker); color:#fff; padding:3rem 2rem 2.5rem; text-align:center; }
header img { max-height:70px; margin-bottom:1.2rem; }
header h1 { font-size:2.1rem; color:#fff; }
header .sub { color:#9fb3c8; margin-top:.5rem; font-size:1.05rem; }
.meta { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:1.4rem; }
.meta span { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); padding:.25rem .8rem; border-radius:999px; font-size:.8rem; color:#cdd9e5; }
nav { position:sticky; top:0; background:var(--primair); display:flex; flex-wrap:wrap; justify-content:center; gap:.2rem; padding:.6rem 1rem; z-index:10; box-shadow:0 2px 8px rgba(0,0,0,.25); }
nav a { color:#dce8f5; text-decoration:none; font-size:.83rem; padding:.35rem .7rem; border-radius:6px; }
nav a:hover { background:rgba(255,255,255,.12); }
main { max-width:960px; margin:0 auto; padding:2rem 1.2rem 3rem; }
section { background:#fff; border-radius:10px; padding:1.8rem 2rem; margin-bottom:1.6rem; box-shadow:0 1px 4px rgba(0,20,40,.08); scroll-margin-top:70px; }
h2 { color:var(--primair); border-bottom:2px solid var(--primair); padding-bottom:.4rem; margin-bottom:1rem; font-size:1.35rem; }
h3 { color:var(--primair); margin:1.2rem 0 .4rem; font-size:1.08rem; }
p { margin-bottom:.8rem; }
table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:.9rem; }
th { background:var(--primair); color:#fff; text-align:left; padding:.5rem .6rem; }
td { border:1px solid #d7dee6; padding:.45rem .6rem; vertical-align:top; }
tr:nth-child(even) td { background:#f2f5f9; }
code { background:#eef2f7; padding:.1rem .35rem; border-radius:4px; font-size:.88em; }
.callout { border-left:4px solid; border-radius:0 8px 8px 0; padding:.9rem 1.1rem; margin:1rem 0; }
.callout.rood { background:#fdeceb; border-color:var(--fout); }
.callout.amber { background:#fef6e7; border-color:var(--waarschuwing); }
.callout.groen { background:#e8f7f0; border-color:var(--succes); }
.kpis { display:flex; flex-wrap:wrap; gap:.8rem; margin:1rem 0; }
.kpi { flex:1 1 180px; border-radius:8px; padding:.8rem 1rem; font-weight:600; text-align:center; color:#fff; }
.kpi.kritiek { background:var(--fout); } .kpi.hoog { background:var(--waarschuwing); } .kpi.ok { background:var(--succes); }
td.ok { color:#00703c; font-weight:600; } td.kritiek { color:var(--fout); font-weight:600; } td.hoog { color:#B47A00; font-weight:600; }
ul, ol { margin:.6rem 0 .8rem 1.4rem; }
footer { text-align:center; color:#7a8ba0; font-size:.8rem; padding:1.5rem; }
footer a { color:var(--primair); }
@media (max-width:768px) { header h1 { font-size:1.5rem; } section { padding:1.2rem 1rem; } body { font-size:15px; } h2 { font-size:1.15rem; } }
"""

html = f"""<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uniforme Deliverables Borging — Rapport v1.0</title>
<style>{CSS}</style>
</head>
<body>
<header>
{logo_html}
<h1>Uniforme Deliverables Borging</h1>
<div class="sub">Foutanalyse en automatische kwaliteitsborging naar aanleiding van drie productiefouten op 24 augustus 2026</div>
<div class="meta"><span>Project 2026-repair-clan-uniform-deliverables</span><span>Versie 1.0</span><span>24 augustus 2026</span><span>Intern — Procesverbetering</span></div>
</header>
<nav>{nav}</nav>
<main>
{secties_html}
</main>
<footer>JvG Consultancy · Rapport v1.0 · <a href="rapport_v1.0.docx">Download DOCX-versie</a> · Bron: scripts/build_rapport.py + scripts/build_html.py</footer>
</body>
</html>"""

os.makedirs(os.path.dirname(OUT), exist_ok=True)
with open(OUT, "w") as fh:
    fh.write(html)
print(f"OK — {OUT} ({os.path.getsize(OUT)} bytes)")