#!/usr/bin/env python3
"""Genereer interactieve HTML eLearning module: Storytelling voor Lions 2026-2027"""

import os

output_path = "/root/projects/jg/2026-pbm-lions-storytelling/deliverables/html"
os.makedirs(output_path, exist_ok=True)

html = """<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Storytelling voor Lions 2026-2027 — eLearning Module</title>
<style>
:root {
  --primary: #003366;
  --gold: #C5A55A;
  --gold-light: #E8D5A3;
  --text-dark: #1F2937;
  --text-secondary: #374151;
  --bg-main: #FFFFFF;
  --bg-card: #F8F9FA;
  --bg-light: #FEFCE8;
  --border: #E5E7EB;
  --success: #00A859;
  --warning: #F59E0B;
  --info: #3B82F6;
  --font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  --container-max: 900px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-family); background: var(--bg-main); color: var(--text-dark); line-height: 1.6; font-size: 16px; }

/* Header */
.header { background: linear-gradient(135deg, var(--primary) 0%, #0a1628 100%); color: white; padding: 40px 20px; text-align: center; }
.header h1 { font-size: 2.2em; font-weight: 700; margin-bottom: 10px; }
.header .subtitle { font-size: 1.1em; opacity: 0.9; }
.header .badge { display: inline-block; background: var(--gold); color: var(--primary); padding: 4px 16px; border-radius: 20px; font-weight: 600; font-size: 0.85em; margin-top: 15px; }

/* Navigation */
.nav { background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 15px 20px; position: sticky; top: 0; z-index: 100; }
.nav-inner { max-width: var(--container-max); margin: 0 auto; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.nav a { color: var(--primary); text-decoration: none; padding: 6px 14px; border-radius: 6px; font-size: 0.9em; font-weight: 500; transition: all 0.2s; }
.nav a:hover { background: var(--primary); color: white; }

/* Container */
.container { max-width: var(--container-max); margin: 0 auto; padding: 30px 20px; }

/* Sections */
.section { margin-bottom: 40px; padding: 30px; background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border); }
.section-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.section-icon { width: 50px; height: 50px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.section-icon.p1 { background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.section-icon.p2 { background: linear-gradient(135deg, #dc2626, #ea580c); }
.section-icon.p3 { background: linear-gradient(135deg, #059669, #0d9488); }
.section-icon.p4 { background: linear-gradient(135deg, #0891b2, #0e7490); }
.section-icon.p5 { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.section h2 { color: var(--primary); font-size: 1.5em; font-weight: 700; }
.section h3 { color: var(--text-secondary); font-size: 1.1em; font-weight: 600; margin: 20px 0 10px; }

/* Quote blocks */
.quote { background: var(--bg-light); border-left: 4px solid var(--gold); padding: 15px 20px; margin: 15px 0; border-radius: 0 8px 8px 0; font-style: italic; color: var(--text-secondary); }
.quote strong { color: var(--primary); font-style: normal; }

/* Example boxes */
.example { background: white; border: 2px solid var(--border); border-radius: 10px; padding: 20px; margin: 15px 0; }
.example-title { font-weight: 700; color: var(--primary); margin-bottom: 10px; font-size: 0.95em; text-transform: uppercase; letter-spacing: 0.5px; }

/* Interactive elements */
.expandable { margin: 15px 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.expandable summary { padding: 15px 20px; background: var(--bg-card); cursor: pointer; font-weight: 600; color: var(--primary); list-style: none; display: flex; align-items: center; gap: 10px; }
.expandable summary::-webkit-details-marker { display: none; }
.expandable summary::before { content: '▶'; font-size: 0.7em; transition: transform 0.2s; }
.expandable[open] summary::before { transform: rotate(90deg); }
.expandable .content { padding: 20px; background: white; }

/* Quiz */
.quiz { background: white; border: 2px solid var(--info); border-radius: 10px; padding: 20px; margin: 15px 0; }
.quiz-question { font-weight: 600; margin-bottom: 12px; color: var(--text-dark); }
.quiz-options { list-style: none; }
.quiz-options li { padding: 10px 15px; margin: 8px 0; background: var(--bg-card); border-radius: 6px; cursor: pointer; transition: all 0.2s; border: 2px solid transparent; }
.quiz-options li:hover { border-color: var(--info); background: #EFF6FF; }
.quiz-options li.correct { border-color: var(--success); background: #ECFDF5; }
.quiz-options li.wrong { border-color: #EF4444; background: #FEF2F2; }

/* KPI Cards */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 20px 0; }
.kpi-card { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 20px; text-align: center; }
.kpi-number { font-size: 2em; font-weight: 700; color: var(--primary); }
.kpi-label { font-size: 0.85em; color: var(--text-secondary); margin-top: 5px; }

/* CTA */
.cta { background: linear-gradient(135deg, var(--primary), #0a1628); color: white; padding: 30px; border-radius: 12px; text-align: center; margin: 30px 0; }
.cta h3 { color: white; font-size: 1.3em; margin-bottom: 10px; }
.cta p { opacity: 0.9; }

/* Footer */
.footer { background: var(--text-secondary); color: white; padding: 30px 20px; text-align: center; font-size: 0.9em; margin-top: 40px; }
.footer a { color: var(--gold-light); }

/* Responsive */
@media (max-width: 768px) {
  .header h1 { font-size: 1.6em; }
  .section { padding: 20px; }
  .nav-inner { gap: 5px; }
  .nav a { padding: 4px 10px; font-size: 0.8em; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
}
</style>
</head>
<body>

<div class="header">
  <h1>🦁 Storytelling voor Lions</h1>
  <p class="subtitle">Hoe je verhalen inzet om District 110AN te inspireren en te verbinden</p>
  <span class="badge">Gouverneursjaar 2026-2027</span>
</div>

<nav class="nav">
  <div class="nav-inner">
    <a href="#intro">Introductie</a>
    <a href="#pilaar1">Pilaar 1</a>
    <a href="#pilaar2">Pilaar 2</a>
    <a href="#pilaar3">Pilaar 3</a>
    <a href="#pilaar4">Pilaar 4</a>
    <a href="#pilaar5">Pilaar 5</a>
    <a href="#kanalen">Kanalen</a>
    <a href="#quiz">Quiz</a>
  </div>
</nav>

<div class="container">

  <!-- INTRO -->
  <div class="section" id="intro">
    <div class="section-header">
      <div class="section-icon p1">📖</div>
      <h2>Waarom Storytelling?</h2>
    </div>
    <p>Storytelling is geen modegril. Het is de meest krachtige manier om mensen te verbinden, te inspireren en tot actie te bewegen. Als Governor van District 110AN is storytelling het verschil tussen:</p>
    <div class="kpi-grid">
      <div class="kpi-card">
        <div class="kpi-number">❌</div>
        <div class="kpi-label">"We deden 50 projecten"</div>
      </div>
      <div class="kpi-card">
        <div class="kpi-number">✅</div>
        <div class="kpi-label">"Mevrouw Jansen kon weer meedoen"</div>
      </div>
    </div>
    <p>Het eerste vergeten mensen. Het tweede raakt, motiveert en bindt. Dit is de kern van de storytelling-strategie voor ons district.</p>
    <div class="quote">
      <strong>Bron [1]</strong> — LION Magazine: "Listen to the Greatest Stories on Earth" — Lions International erkent storytelling als kern van hun communicatie.
    </div>
  </div>

  <!-- PILAAR 1 -->
  <div class="section" id="pilaar1">
    <div class="section-header">
      <div class="section-icon p1">🎯</div>
      <h2>Pilaar 1: Het Persoonlijke Verhaal</h2>
    </div>
    <p><strong>Wat:</strong> Jouw eigen reis van Leo naar Gouverneur, verteld als verhaal.</p>
    <p><strong>Wanneer:</strong> Installatiespeech, openingsconventie, social media launch.</p>

    <div class="example">
      <div class="example-title">📝 Voorbeeld — Installatiespeech fragment</div>
      <div class="quote">
        "In 2010 werd ik Leo. Ik was twintig jaar oud en ik wist niet wat er allemaal mogelijk was. Ik dacht: ik help wel een beetje op een inzamelactie. Maar Lions liet me zien dat ik meer kon — als clubvoorzitter, als regio-coördinator, als vice-gouverneur. En nu sta ik hier. Niet omdat ik het slimste ben, maar omdat ik bleef groeien. Dat is wat Lions doet — het laat je zien wat je niet wist dat je kon."
      </div>
    </div>

    <details class="expandable">
      <summary>💡 Tip: Hoe schrijf je je persoonlijke verhaal?</summary>
      <div class="content">
        <ol>
          <li><strong>Begin bij het begin.</strong> Waar was je vóór Lions? Wat dacht je dat het was?</li>
          <li><strong>Identificeer het keerpunt.</strong> Wat veranderde? Wie inspireerde je?</li>
          <li><strong>Laat zien wat je leerde.</strong> Niet wat je deed — wat je werd.</li>
          <li><strong>Eindig met de toekomst.</strong> Wat ga je als Gouverneur betekenen?</li>
        </ol>
      </div>
    </details>

    <details class="expandable">
      <summary>🤔 Reflectievraag: Wat is jouw "Lions-moment"?</summary>
      <div class="content">
        <p>Denk aan één specifiek moment waarop je dacht: "Dit is waarom ik Lion ben." Beschrijf het in 3 zinnen. Wie was er? Wat gebeurde er? Hoe voelde het? Dit is de kern van jouw persoonlijke verhaal.</p>
      </div>
    </details>
  </div>

  <!-- PILAAR 2 -->
  <div class="section" id="pilaar2">
    <div class="section-header">
      <div class="section-icon p2">👥</div>
      <h2>Pilaar 2: Het Ledenverhaal</h2>
    </div>
    <p><strong>Wat:</strong> Verhalen van individuele Lions die het verschil maken.</p>
    <p><strong>Wanneer:</strong> Maandelijks in nieuwsbrief, wekelijks op social media, tijdens conventies.</p>

    <div class="example">
      <div class="example-title">📝 Voorbeeld — Emotioneel (Type A)</div>
      <div class="quote">
        "Leo Marieke (58) uit Alkmaar vrijwilligt al 15 jaar bij de Voetbalhelden-afdeling van Alzheimer Nederland. 'De eerste keer dat ik de dementiepatiënt zag die de bal tikte, wist ik nog niet dat zij mij ging veranderen,' vertelt Marieke. 'Die man herkende zijn dochter niet meer — maar op het voetbalveld lachte hij weer.'"
      </div>
    </div>

    <div class="example">
      <div class="example-title">📝 Voorbeeld — Impact (Type B)</div>
      <div class="quote">
        "Club Alkmaar Victorie verzamelde €2.400 tijdens hun jaarlijkse vintage-avond. Maar het meest bijzondere was niet het bedrag — het was de 89-jarige oud-clublid die anoniem €100 overmaakte met de boodschap: 'Lions heeft mijn hele leven betekend. Dit is mijn dank.'"
      </div>
    </div>

    <details class="expandable">
      <summary>💡 Tip: Hoe verzamel je ledenverhalen?</summary>
      <div class="content">
        <ul>
          <li><strong>Vraag na elk project:</strong> "Wie was erbij? Wat was het meest bijzondere moment?"</li>
          <li><strong>Gebruik de 3-vraag-methode:</strong> Wat deed je? Wie raakte je? Wat veranderde er?</li>
          <li><strong>Foto + quote:</strong> Een sterke foto met een korte quote is meer waard dan een verslag van 2 pagina's.</li>
          <li><strong>Laat het de Lion zelf vertellen.</strong> Een quote in de eerste persoon is 3x krachtiger dan een samenvatting.</li>
        </ul>
      </div>
    </details>
  </div>

  <!-- PILAAR 3 -->
  <div class="section" id="pilaar3">
    <div class="section-header">
      <div class="section-icon p3">🏆</div>
      <h2>Pilaar 3: Het Projectverhaal</h2>
    </div>
    <p><strong>Wat:</strong> Van serviceproject naar verhaal — niet wat jullie deden, maar wie erdoor veranderde.</p>
    <p><strong>Wanneer:</strong> Na elk groot project, jubileumactie (Lions 75), conventies.</p>

    <div class="example">
      <div class="example-title">📝 Voorbeeld — Lions 75 Jaar × Alzheimer Nederland</div>
      <div class="quote">
        "75 jaar Lions in Nederland. 75 jaar helpen. En dit jaar kijken we niet alleen terug — wij geven door. Aan Alzheimer Nederland. Aan de man die zijn vrouw niet meer herkent, maar wel herinnert hoe het voelt om mee te doen. Aan de dochter die eindelijk ruimte krijgt terwijl haar moeder veilig is in een ontmoetingsruimte. Dit is ons verhaal. Samen."
      </div>
    </div>

    <details class="expandable">
      <summary>💡 Tip: Het framework voor projectverhalen</summary>
      <div class="content">
        <p>Gebruik altijd deze structuur:</p>
        <ol>
          <li><strong>Situatie:</strong> Wat was de aanleiding? Wie had hulp nodig?</li>
          <li><strong>Actie:</strong> Wat deed de club/lid? (kort, feitelijk)</li>
          <li><strong>Impact:</strong> Wat veranderde er voor de persoon?</li>
          <li><strong>Emotie:</strong> Wat voelde het? (quote of beschrijving)</li>
        </ol>
        <p><strong>Voorbeeld:</strong> "Mevrouw Jansen (82) kon al 3 jaar niet meer naar de ontmoetingsruimte vanwege haar dementie (situatie). Onze club financierde een begeleide transportdienst (actie). Nu komt ze weer elke woensdag (impact). 'Ik ben weer een mens,' zei ze bij haar eerste bezoek (emotie)."</p>
      </div>
    </details>
  </div>

  <!-- PILAAR 4 -->
  <div class="section" id="pilaar4">
    <div class="section-header">
      <div class="section-icon p4">🦁</div>
      <h2>Pilaar 4: Het District-verhaal</h2>
    </div>
    <p><strong>Wat:</strong> Een gedeelde identiteit voor District 110AN — het kleine district dat groot draagt.</p>
    <p><strong>Wanneer:</strong> Doorlopend, als rode draad door alle communicatie.</p>

    <div class="example">
      <div class="example-title">📝 Positionering</div>
      <div class="quote">
        "District 110AN. Klein in aantal. Groot in hart. Groot in impact. Wij zijn de eerste om te innoveren, de eerste om diversiteit omarmen, en de laatste om op te geven."
      </div>
    </div>

    <div class="kpi-grid">
      <div class="kpi-card">
        <div class="kpi-number">#ThisIs110AN</div>
        <div class="kpi-label">Hashtag</div>
      </div>
      <div class="kpi-card">
        <div class="kpi-number">Small District</div>
        <div class="kpi-label">Big Heart, Real Impact</div>
      </div>
      <div class="kpi-card">
        <div class="kpi-number">We Serve</div>
        <div class="kpi-label">110AN Style</div>
      </div>
    </div>

    <details class="expandable">
      <summary>💡 Tip: Hoe bouw je een district-identiteit?</summary>
      <div class="content">
        <ul>
          <li><strong>Kies 3 woorden</strong> die jullie district beschrijven. Voor 110AN: Innovatief. Verbonden. Moedig.</li>
          <li><strong>Gebruik de hashtag</strong> #ThisIs110AN bij elke social media post.</li>
          <li><strong>Begin elk clubbezoek</strong> met: "In 110AN doen we het anders."</li>
          <li><strong>Laat elke Lion het verhaal vertellen</strong> — niet alleen de Gouverneur.</li>
        </ul>
      </div>
    </details>
  </div>

  <!-- PILAAR 5 -->
  <div class="section" id="pilaar5">
    <div class="section-header">
      <div class="section-icon p5">🔮</div>
      <h2>Pilaar 5: Het Toekomstverhaal</h2>
    </div>
    <p><strong>Wat:</strong> Een gewenste toestand schetsen — niet alleen wat er gedaan is, maar waarom het ertoe doet.</p>
    <p><strong>Wanneer:</strong> Conventie-toespraken, jaarafsluiting, overdracht aan opvolger.</p>

    <div class="example">
      <div class="example-title">📝 Voorbeeld — Jaarafsluiting</div>
      <div class="quote">
        "Mijn opvolger zal in juli 2027 deze taak overnemen. En als hij of zij hier staat, zal ik willen dat ons district groter is — niet in hectares, maar in impact. Dat een Leo in Zaandam zegt: 'Lions leerde me dat ik kon leiden.' Dat een tiener uit Amsterdam zegt: 'Lions liet me zien dat mijn grenzen verder waren dan mijn angst.'"
      </div>
    </div>

    <details class="expandable">
      <summary>💡 Tip: Hoe schrijf je een toekomstverhaal?</summary>
      <div class="content">
        <ul>
          <li><strong>Begin met "Stel dat..."</strong> — schets een toekomst die mensen willen bereiken.</li>
          <li><strong>Gebruik specifieke voorbeelden</strong> — niet "meer leden" maar "een Leo die zegt..."</li>
          <li><strong>Maak het persoonlijk</strong> — wat betekent het voor jou als Gouverneur?</li>
          <li><strong>Eindig met een oproep</strong> — wat kunnen mensen vandaag doen?</li>
        </ul>
      </div>
    </details>
  </div>

  <!-- KANALEN -->
  <div class="section" id="kanalen">
    <div class="section-header">
      <div class="section-icon p1">📢</div>
      <h2>Communicatie-kanalen & Formats</h2>
    </div>

    <h3>Nieuwsbrief (maandelijks)</h3>
    <table>
      <tr><th>Sectie</th><th>Content</th><th>Pilaar</th></tr>
      <tr><td>Gouverneur's Column</td><td>Persoonlijke brief</td><td>1</td></tr>
      <tr><td>Club Spotlight</td><td>1 club, 1 verhaal</td><td>2 & 3</td></tr>
      <tr><td>Impact Update</td><td>Cijfers + verhaal</td><td>3</td></tr>
      <tr><td>Comicol / Quiz</td><td>Interactief</td><td>4</td></tr>
    </table>

    <h3>Social Media (2-3x per week)</h3>
    <table>
      <tr><th>Platform</th><th>Formaat</th><th>Stijl</th></tr>
      <tr><td>LinkedIn</td><td>Artikel (500-800 woorden)</td><td>Persoonlijk, reflectief</td></tr>
      <tr><td>Instagram</td><td>Foto + quote</td><td>Visueel, emotioneel</td></tr>
      <tr><td>Facebook</td><td>Evenement + verhaal</td><td>Community</td></tr>
    </table>

    <h3>Conventies</h3>
    <ul>
      <li><strong>Opening:</strong> 3-minuten visuele story (video/fotos) over het afgelopen kwartaal</li>
      <li><strong>Story Slot:</strong> 1 Lion vertelt zijn/haar verhaal (5 min live)</li>
      <li><strong>Einde:</strong> "Where we're going" — 2 min motivating close</li>
    </ul>
  </div>

  <!-- QUIZ -->
  <div class="section" id="quiz">
    <div class="section-header">
      <div class="section-icon p2">✅</div>
      <h2>Test je Kennis</h2>
    </div>

    <div class="quiz">
      <div class="quiz-question">1. Wat is de kernverschil tussen een verslag en een verhaal?</div>
      <ul class="quiz-options">
        <li onclick="this.classList.add('wrong')">A. Verslagen zijn langer dan verhalen</li>
        <li onclick="this.classList.add('correct')">B. Verhalen richten zich op het menselijke moment, verslagen op feiten en cijfers</li>
        <li onclick="this.classList.add('wrong')">C. Er is geen verschil</li>
        <li onclick="this.classList.add('wrong')">D. Verhalen zijn alleen voor social media</li>
      </ul>
    </div>

    <div class="quiz">
      <div class="quiz-question">2. Welke pilaar gaat over "wie we zijn als district"?</div>
      <ul class="quiz-options">
        <li onclick="this.classList.add('wrong')">A. Pilaar 1 — Persoonlijk verhaal</li>
        <li onclick="this.classList.add('wrong')">B. Pilaar 2 — Ledenverhaal</li>
        <li onclick="this.classList.add('correct')">C. Pilaar 4 — District-verhaal</li>
        <li onclick="this.classList.add('wrong')">D. Pilaar 5 — Toekomstverhaal</li>
      </ul>
    </div>

    <div class="quiz">
      <div class="quiz-question">3. Wat is de beste manier om een ledenverhaal te verzamelen?</div>
      <ul class="quiz-options">
        <li onclick="this.classList.add('wrong')">A. Schrijf een samenvatting van het projectverslag</li>
        <li onclick="this.classList.add('wrong')">B. Vraag de secretaris om notulen te delen</li>
        <li onclick="this.classList.add('correct')">C. Vraag de Lion: "Wat was het meest bijzondere moment? Wie raakte je? Wat veranderde er?"</li>
        <li onclick="this.classList.add('wrong')">D. Wacht tot iemand spontaan een verhaal instuurt</li>
      </ul>
    </div>

    <div class="quiz">
      <div class="quiz-question">4. Welke structuur gebruik je voor een projectverhaal?</div>
      <ul class="quiz-options">
        <li onclick="this.classList.add('correct')">A. Situatie → Actie → Impact → Emotie</li>
        <li onclick="this.classList.add('wrong')">B. Datum → Locatie → Aanwezigen → Resultaat</li>
        <li onclick="this.classList.add('wrong')">C. Probleem → Oplossing → Conclusie</li>
        <li onclick="this.classList.add('wrong')">D. Inleiding → Middel → Slot</li>
      </ul>
    </div>
  </div>

  <!-- CTA -->
  <div class="cta">
    <h3>🦁 Begin Vandaag</h3>
    <p>Je hebt niet alles nodig om te beginnen. Neem één pilaar, kies één kanaal, en vertel één verhaal. De rest volgt vanzelf.</p>
    <p style="margin-top: 15px; font-size: 0.9em; opacity: 0.8;">Vragen? Neem contact op met de Gouverneur's Office, District 110AN.</p>
  </div>

</div>

<div class="footer">
  <p><strong>Lions District 110AN</strong> | Storytelling Strategie 2026-2027</p>
  <p>Gouverneur: Jorick van Gemert | <a href="#">lions110an.nl</a></p>
  <p style="margin-top: 10px; opacity: 0.7;">© 2026 Lions Clubs International, District 110AN. Alle rechten voorbehouden.</p>
</div>

</body>
</html>"""

with open(os.path.join(output_path, "2026-LST-Storytelling-eLearning_v1.0.html"), "w", encoding="utf-8") as f:
    f.write(html)

print(f"✅ HTML opgeslagen: {output_path}/2026-LST-Storytelling-eLearning_v1.0.html")
print(f"   Bestandsgrootte: {len(html):,} bytes")
