/* global React */
const { useState: useStateI, useMemo: useMemoI } = React;
const ArrowI = window.Sections.Arrow;

// ============================ DIVERSITY-CHECK QUIZ ============================
function DiversityCheck() {
  const quiz = window.DATA.quiz;
  const [i, setI] = useStateI(0);
  const [answers, setAnswers] = useStateI(new Array(quiz.length).fill(null));
  const [done, setDone] = useStateI(false);

  const progress = done ? 100 : i / quiz.length * 100;

  const select = (idx) => {
    const next = [...answers];
    next[i] = idx;
    setAnswers(next);
  };

  const advance = () => {
    if (i < quiz.length - 1) setI(i + 1);else
    setDone(true);
  };

  const score = useMemoI(() => {
    return answers.reduce((sum, idx, qi) => {
      if (idx == null) return sum;
      return sum + quiz[qi].a[idx].s;
    }, 0);
  }, [answers]);

  const max = quiz.length * 3;
  const pct = Math.round(score / max * 100);

  const verdict = pct >= 80 ?
  { label: "Strukturell aufgestellt", body: "Sie haben DEIB in Strategie, Führung und KI strukturell verankert. Jetzt geht es um Tiefe, Wirkungsmessung und kulturelle Selbstverständlichkeit. Ein Sparring lohnt sich – um blinde Flecken aufzudecken." } :
  pct >= 55 ?
  { label: "Auf gutem Weg", body: "Einiges greift, anderes hängt an Einzelpersonen. Jetzt ist der Moment, Diversity zur Strategie zu machen – mit klaren KPIs, Top-Mandat und KI-Governance." } :
  pct >= 30 ?
  { label: "Punktuell aktiv", body: "Es passiert etwas, aber ohne System. Sie verlieren Energie an Einzelinitiativen. Ein Audit klärt: Was hält? Was muss weg? Was muss neu?" } :
  { label: "Strukturell blind", body: "Diversity ist bei Ihnen noch kein Thema – oder läuft an Ihnen vorbei. Genau der richtige Zeitpunkt für einen klaren Einstieg. Wir haben ein Format dafür." };

  const reset = () => {
    setI(0);setAnswers(new Array(quiz.length).fill(null));setDone(false);
  };

  return (
    <section className="section check" id="check">
      <div className="wrap">
        <div className="themen-head" style={{ marginBottom: 8 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18, color: "oklch(0.96 0.015 80 / 0.65)" }}>Diversity-Check · 2 Minuten</div>
            <h2 className="h1">
              Wo steht Ihre<br />
              Organisation <em>wirklich?</em>
            </h2>
          </div>
          <p className="lead" style={{ color: "oklch(0.96 0.015 80 / 0.75)" }}>
            5 ehrliche Fragen. Eine sofortige Standortbestimmung in vier DEIB-Reifegraden.
            Anonym. Ohne Anmeldung.
          </p>
        </div>

        <div className="quiz-card">
          <div className="quiz-progress"><div style={{ width: `${progress}%` }} /></div>

          {!done ?
          <div className="quiz-body">
              <div className="quiz-step">Frage {i + 1} / {quiz.length}</div>
              <h3 className="quiz-q">{quiz[i].q}</h3>
              <div className="quiz-options">
                {quiz[i].a.map((opt, oi) =>
              <button
                key={oi}
                className={`quiz-opt ${answers[i] === oi ? "selected" : ""}`}
                onClick={() => select(oi)}>
                
                    <span className="marker" />
                    <span>{opt.t}</span>
                  </button>
              )}
              </div>
              <div className="quiz-controls">
                <button
                className="btn btn-ghost"
                onClick={() => setI(Math.max(0, i - 1))}
                disabled={i === 0}
                style={{ opacity: i === 0 ? 0.4 : 1 }}>
                
                  ← Zurück
                </button>
                <button
                className="btn btn-light"
                onClick={advance}
                disabled={answers[i] == null}
                style={{ opacity: answers[i] == null ? 0.4 : 1 }}>
                
                  {i === quiz.length - 1 ? "Auswerten" : "Weiter"} <ArrowI size={14} />
                </button>
              </div>
            </div> :

          <div className="quiz-result">
              <div>
                <div className="quiz-score">{pct}<em style={{ fontSize: "0.5em" }}>/100</em></div>
                <div className="quiz-score-meta">DEIB-Reifegrad · {verdict.label}</div>
              </div>
              <div className="quiz-verdict">
                <h4>{verdict.label}.</h4>
                <p>{verdict.body}</p>
                <div className="actions">
                  <a href="#kontakt" className="btn btn-light">30-Min-Gespräch <ArrowI size={14} /></a>
                  <button className="btn btn-ghost" onClick={reset} style={{ color: "oklch(0.985 0.01 80)" }}>
                    Erneut starten ↺
                  </button>
                </div>
              </div>
            </div>
          }
        </div>

        <div className="check-more">
          <a href="tools.html" className="btn btn-light">Alle Tools im Überblick <ArrowI size={14} /></a>
        </div>
      </div>
    </section>);

}

// ============================ CONTACT ============================
function Contact() {
  const [sent, setSent] = useStateI(false);
  const [form, setForm] = useStateI({
    name: "", email: "", company: "", message: "", topic: "Erstgespräch (30 Min)"
  });
  const submit = (e) => {
    e.preventDefault();
    const subject = `Anfrage über lindabrack.com – ${form.topic}`;
    const body =
    `Name: ${form.name}\n` +
    `Unternehmen: ${form.company}\n` +
    `E-Mail: ${form.email}\n` +
    `Thema: ${form.topic}\n\n` +
    `${form.message}`;
    window.location.href =
    `mailto:mail@lindabrack.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    setSent(true);
  };
  const upd = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  return (
    <section className="section" id="kontakt">
      <div className="wrap">
        <div className="themen-head" style={{ marginBottom: 16 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Kontakt</div>
            <h2 className="h1">Lassen Sie uns<br /> <em>30 Minuten</em> reden.</h2>
          </div>
          <p className="lead">
            Erstgespräch, kostenlos. Keine Sales-Pitches. Wir klären in 30 Minuten,
            ob und wie ich helfen kann – konkret und ehrlich.
          </p>
        </div>

        <div className="contact-grid">
          <form className="contact-card" onSubmit={submit}>
            {!sent ?
            <>
                <div className="field-row">
                  <div className="field">
                    <label>Name</label>
                    <input required value={form.name} onChange={upd("name")} placeholder="Ihr Name" />
                  </div>
                  <div className="field">
                    <label>Unternehmen</label>
                    <input value={form.company} onChange={upd("company")} placeholder="Wo arbeiten Sie?" />
                  </div>
                </div>
                <div className="field">
                  <label>E-Mail</label>
                  <input type="email" required value={form.email} onChange={upd("email")} placeholder="name@unternehmen.de" />
                </div>
                <div className="field">
                  <label>Worum geht es?</label>
                  <select value={form.topic} onChange={upd("topic")}>
                    <option>Erstgespräch (30 Min)</option>
                    <option>Keynote-Anfrage</option>
                    <option>Workshop / Training</option>
                    <option>Beratung & Strategie</option>
                    <option>Moderation</option>
                    <option>Sonstiges</option>
                  </select>
                </div>
                <div className="field">
                  <label>Kurz erzählen</label>
                  <textarea
                  rows={3}
                  value={form.message}
                  onChange={upd("message")}
                  placeholder="Welcher Anlass, welches Ziel, welcher Termin – ein paar Sätze reichen." />
                
                </div>
                <div className="flex-row" style={{ justifyContent: "space-between", marginTop: 8 }}>
                  <span className="mono muted">Antwort innerhalb von 48h · DSGVO-konform</span>
                  <button type="submit" className="btn btn-primary">Anfrage senden <ArrowI size={14} /></button>
                </div>
              </> :

            <div style={{ padding: "60px 20px", textAlign: "center", display: "flex", flexDirection: "column", gap: 16 }}>
                <div className="serif" style={{ fontSize: 56, lineHeight: 1 }}>Danke.</div>
                <p style={{ color: "var(--fg-soft)", maxWidth: 36, margin: "0 auto", maxWidth: "32ch" }}>
                  Ihre Anfrage ist angekommen. Linda meldet sich innerhalb von 48 Stunden persönlich –
                  ohne automatisierte Funnel-Mails dazwischen.
                </p>
              </div>
            }
          </form>

          <div className="contact-side">
            <div className="booking-card">
              <span className="tag" style={{
                display: "inline-flex", padding: "6px 12px", border: "1px solid oklch(0.985 0.01 80 / 0.4)",
                borderRadius: 999, fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: "0.16em",
                textTransform: "uppercase"
              }}>
                Direkt buchen
              </span>
              <h4>30-Min-Erstgespräch.<br />Kostenlos.</h4>
              <p>Wählen Sie einen Termin direkt im Kalender. Ohne Umweg, ohne Telefon-Pingpong.</p>
              <a href="https://cal.eu/lindabrack/30min" target="_blank" rel="noreferrer" className="btn btn-light">
                Kalender öffnen <ArrowI size={14} />
              </a>
            </div>

            <div>
              <div className="contact-row">
                <span className="lbl">Mail</span>
                <a href="mailto:mail@lindabrack.com" className="val">mail@lindabrack.com</a>
              </div>
              <div className="contact-row">
                <span className="lbl">LinkedIn</span>
                <a href="https://www.linkedin.com/in/linda-brack-a8186287/" target="_blank" rel="noreferrer" className="val">/in/linda-brack</a>
              </div>
              <div className="contact-row">
                <span className="lbl">Instagram</span>
                <a href="https://www.instagram.com/lindabrack_/?hl=de" target="_blank" rel="noreferrer" className="val">@lindabrack_</a>
              </div>
              <div className="contact-row">
                <span className="lbl">Sitz</span>
                <span className="val">Berlin · DE</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ============================ FOOTER ============================
function Footer() {
  return (
    <footer className="footer" id="footer">
      <div className="wrap">
        <h2 className="footer-claim">
          <span className="fc-lead">Strukturen <em>verändern.</em></span>
          <span className="fc-sub">Damit echte Gleichberechtigung möglich wird.</span>
        </h2>
        <div className="footer-grid">
          <div className="footer-col">
            <h5>ALL IN Diversity</h5>
            <p style={{ fontSize: 14, lineHeight: 1.5, opacity: 0.85, maxWidth: 40, maxWidth: "40ch" }}>
              Dach für Online-Kurse, Masterclasses, Workshops und Formate –
              gemeinsam mit einem Netzwerk aus Expert:innen für KI, Leadership und Diversity.
            </p>
          </div>
          <div className="footer-col">
            <h5>Lösungen</h5>
            <a href="loesungen.html#keynotes">Keynotes & Impulse</a>
            <a href="loesungen.html#workshops">Workshops & Trainings</a>
            <a href="loesungen.html#beratung">Beratung & Strategie</a>
            <a href="loesungen.html#moderation">Moderation</a>
            <a href="loesungen.html#masterclasses">Masterclasses & Kurse</a>
            <a href="loesungen.html#sparring">Sparring & Begleitung</a>
          </div>
          <div className="footer-col">
            <h5>Über</h5>
            <a href="ueber.html">Linda Brack</a>
            <a href="termine.html">Termine & Kurse</a>
            <a href="index.html#themen">Themen</a>
            <a href="tools.html">Free Tools</a>
            <a href="index.html#check">Diversity-Check</a>
          </div>
          <div className="footer-col">
            <h5>Kontakt</h5>
            <a href="mailto:mail@lindabrack.com">mail@lindabrack.com</a>
            <a href="https://www.linkedin.com/in/linda-brack-a8186287/" target="_blank" rel="noreferrer">LinkedIn</a>
            <a href="https://www.instagram.com/lindabrack_/?hl=de" target="_blank" rel="noreferrer">Instagram</a>
            <a href="mailto:mail@lindabrack.com?subject=Newsletter%20%E2%80%93%20neue%20Termine">Newsletter</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} Linda Brack · ALL IN Diversity</span>
          <span>Impressum · Datenschutz · Made in Berlin</span>
        </div>
      </div>
    </footer>);

}

// ============================ RENTENLÜCKE-RECHNER (KI) ============================
function RentenluckeRechner() {
  const [form, setForm] = useStateI({
    alter: 35,
    geschlecht: "weiblich",
    bruttogehalt: 4200,
    wochenstunden: 40,
    care: 3,
    wunschnetto: 2500,
    privat: 0,
    privatJahre: 0
  });
  const [mode, setMode] = useStateI("input"); // input | loading | result | error
  const [result, setResult] = useStateI(null);

  const upd = (k, parse = (v) => v) => (e) => {
    const v = e.target ? e.target.value : e;
    setForm({ ...form, [k]: parse(v) });
  };

  const reset = () => {
    setMode("input");
    setResult(null);
  };

  const calculate = async () => {
    setMode("loading");
    const prompt = `Du bist Expert:in für Altersvorsorge in Deutschland und Diversity-Themen (Gender Pension Gap).
Berechne und analysiere die Rentenlücke einer Person in Deutschland mit folgenden Daten:

- Aktuelles Alter: ${form.alter} Jahre
- Geschlecht: ${form.geschlecht}
- Aktuelles Bruttogehalt (Vollzeit-Äquivalent, pro Monat): ${form.bruttogehalt} €
- Aktuelle Wochenarbeitszeit: ${form.wochenstunden} Stunden/Woche (Vollzeit = 40 Std/Woche, entspricht ${Math.round(form.wochenstunden / 40 * 100)}%)
- Geplante / vorhandene Care-Jahre ohne sozialversicherungspflichtige Beschäftigung: ${form.care} Jahre
- Bereits laufende private/betriebliche Altersvorsorge: ${form.privat} € pro Monat, bereits seit ${form.privatJahre} Jahren eingezahlt
- Wunsch-Nettorente zum Renteneintritt (in heutiger Kaufkraft): ${form.wunschnetto} € pro Monat

Aufgabe – antworte als kompaktes JSON, OHNE Markdown, ohne Erklärtext drumherum, EXAKT in diesem Format:
{
  "gesetzliche_rente_netto": <Zahl Euro pro Monat in heutiger Kaufkraft>,
  "private_rente_netto": <Zahl Euro pro Monat>,
  "wunsch_netto": <Zahl Euro pro Monat>,
  "luecke_pro_monat": <Zahl Euro pro Monat, positiv wenn Lücke>,
  "luecke_pro_jahr": <Zahl Euro>,
  "sparrate_noetig": <Zahl Euro pro Monat zusätzlich nötig>,
  "headline": "<ein prägnanter Satz, max. 80 Zeichen, der die Kernaussage trifft>",
  "analyse": "<3-5 Sätze Analyse mit Gender-Pension-Gap-Kontext, Auswirkung von Care-Jahren/Teilzeit, konkrete Empfehlungen. Du-Form. Keine Floskeln.>",
  "schritte": ["<konkreter Schritt 1>", "<konkreter Schritt 2>", "<konkreter Schritt 3>"]
}

Realistische Annahmen:
- Renteneintritt mit 67
- Rentenniveau: ca. 48% des letzten Bruttoeinkommens (gesetzlich), abzgl. Steuer/KV/PV ~ 80% netto
- Care-Jahre / Teilzeit reduzieren die spätere gesetzliche Rente messbar
- Inflationsbereinigt in heutiger Kaufkraft rechnen
- Annahmen kurz im Analyse-Feld erwähnen`;

    try {
      const text = await window.claude.complete(prompt);
      // Extract JSON from response
      const match = text.match(/\{[\s\S]*\}/);
      if (!match) throw new Error("Keine Daten erkannt");
      const data = JSON.parse(match[0]);
      setResult(data);
      setMode("result");
    } catch (e) {
      console.error(e);
      setMode("error");
    }
  };

  const eur = (n) => new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR", maximumFractionDigits: 0 }).format(n || 0);

  return (
    <section className="section rentenluecke-section" id="rentenluecke">
      <div className="wrap">
        <div className="themen-head" style={{ marginBottom: 22 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Tool · KI-gestützt</div>
            <h2 className="h1">Deine <em>Rentenlücke.</em><br />In 2 Minuten.</h2>
          </div>
          <p className="lead">
            Care-Jahre, Teilzeit, Gender Pay Gap – die Rentenlücke betrifft besonders Frauen.
            Trage ein paar Eckdaten ein, die KI rechnet und ordnet ein. Ohne Mail, ohne Tracking.
          </p>
        </div>

        <div className="rl-card">
          {mode === "input" &&
          <div className="rl-grid">
              <div className="rl-form">
                <div className="rl-field-row">
                  <div className="rl-field">
                    <label>Aktuelles Alter</label>
                    <div className="rl-num">
                      <input type="number" min="18" max="66" value={form.alter} onChange={upd("alter", Number)} />
                      <span className="rl-unit">Jahre</span>
                    </div>
                  </div>
                  <div className="rl-field">
                    <label>Geschlecht</label>
                    <select value={form.geschlecht} onChange={upd("geschlecht")}>
                      <option value="weiblich">weiblich</option>
                      <option value="männlich">männlich</option>
                      <option value="divers">divers</option>
                    </select>
                  </div>
                </div>

                <div className="rl-field">
                  <label>Aktuelles Bruttogehalt <span className="rl-hint">(Vollzeit-Äquivalent, pro Monat)</span></label>
                  <div className="rl-num">
                    <input type="number" min="0" step="100" value={form.bruttogehalt} onChange={upd("bruttogehalt", Number)} />
                    <span className="rl-unit">€/Monat</span>
                  </div>
                </div>

                <div className="rl-field">
                  <label>Wochenarbeitszeit <span className="rl-hint">({form.wochenstunden} Std/Woche — Vollzeit = 40 Std)</span></label>
                  <input type="range" min="8" max="40" step="1" value={form.wochenstunden} onChange={upd("wochenstunden", Number)} className="rl-range" />
                </div>

                <div className="rl-field">
                  <label>Auszeiten für Care-Arbeit <span className="rl-hint">(volle Elternzeit, Pflege – Jahre ganz ohne bezahlten Job: {form.care})</span></label>
                  <input type="range" min="0" max="15" step="1" value={form.care} onChange={upd("care", Number)} className="rl-range" />
                </div>

                <div className="rl-field-row">
                  <div className="rl-field">
                    <label>Private Vorsorge – Beitrag <span className="rl-hint">(was du heute einzahlst)</span></label>
                    <div className="rl-num">
                      <input type="number" min="0" step="50" value={form.privat} onChange={upd("privat", Number)} />
                      <span className="rl-unit">€/Monat</span>
                    </div>
                  </div>
                  <div className="rl-field">
                    <label>… seit <span className="rl-hint">(wie lange schon?)</span></label>
                    <div className="rl-num">
                      <input type="number" min="0" max="50" step="1" value={form.privatJahre} onChange={upd("privatJahre", Number)} />
                      <span className="rl-unit">Jahre</span>
                    </div>
                  </div>
                </div>

                <div className="rl-field">
                  <label>Wunsch-Nettorente <span className="rl-hint">(heutige Kaufkraft, pro Monat)</span></label>
                  <div className="rl-num">
                    <input type="number" min="500" step="100" value={form.wunschnetto} onChange={upd("wunschnetto", Number)} />
                    <span className="rl-unit">€/Monat</span>
                  </div>
                </div>

                <div className="rl-actions">
                  <button className="btn btn-primary" onClick={calculate}>
                    Lücke berechnen <ArrowI size={14} />
                  </button>
                  <span className="mono muted">Anonym · ohne Speicherung · KI-Schätzung, keine Beratung</span>
                </div>
              </div>

              <aside className="rl-side">
                <div className="rl-side-eyebrow">Wofür dieser Rechner?</div>
                <p>
                  Der <strong>Gender Pension Gap</strong> liegt in Deutschland bei ca. <strong>27%</strong>.
                  Frauen bekommen im Schnitt deutlich weniger Rente – vor allem wegen Care-Arbeit,
                  Teilzeit und Lohnlücke.
                </p>
                <p>
                  Dieser Rechner ordnet deine Situation grob ein und nennt konkrete nächste Schritte.
                  Er ersetzt keine Finanzberatung – aber er macht das Problem sichtbar.
                </p>
                <div className="rl-side-stats">
                  <div><div className="num serif">27%</div><div className="lbl">Gender Pension Gap DE</div></div>
                  <div><div className="num serif">3,4×</div><div className="lbl">Armutsrisiko Frauen 65+ vs. Männer</div></div>
                </div>
              </aside>
            </div>
          }

          {mode === "loading" &&
          <div className="rl-loading">
              <div className="rl-spinner" />
              <div>
                <div className="rl-loading-title">KI rechnet …</div>
                <div className="rl-loading-sub">Annahmen werden gegen aktuelle Rentenformeln geprüft.</div>
              </div>
            </div>
          }

          {mode === "result" && result &&
          <div className="rl-result">
              <div className="rl-result-head">
                <div className="rl-result-eyebrow">Ergebnis · KI-Schätzung</div>
                <h3 className="rl-result-headline">{result.headline}</h3>
              </div>

              <div className="rl-result-grid">
                <div className="rl-stat-big">
                  <div className="rl-stat-lbl">Monatliche Lücke</div>
                  <div className="rl-stat-num">{eur(result.luecke_pro_monat)}</div>
                  <div className="rl-stat-sub">pro Monat im Ruhestand · heutige Kaufkraft</div>
                </div>

                <div className="rl-stats-small">
                  <div className="rl-stat">
                    <div className="rl-stat-lbl">Gesetzliche Rente</div>
                    <div className="rl-stat-num-sm">{eur(result.gesetzliche_rente_netto)}<span>/Mon</span></div>
                  </div>
                  <div className="rl-stat">
                    <div className="rl-stat-lbl">Private/betriebl.</div>
                    <div className="rl-stat-num-sm">{eur(result.private_rente_netto)}<span>/Mon</span></div>
                  </div>
                  <div className="rl-stat">
                    <div className="rl-stat-lbl">Dein Wunsch</div>
                    <div className="rl-stat-num-sm">{eur(result.wunsch_netto)}<span>/Mon</span></div>
                  </div>
                  <div className="rl-stat">
                    <div className="rl-stat-lbl">Lücke / Jahr</div>
                    <div className="rl-stat-num-sm">{eur(result.luecke_pro_jahr)}</div>
                  </div>
                </div>
              </div>

              <div className="rl-result-bar">
                <div className="rl-bar-track">
                  {(() => {
                  const total = (result.gesetzliche_rente_netto || 0) + (result.private_rente_netto || 0) + (result.luecke_pro_monat || 0);
                  const safe = (n) => total > 0 ? n / total * 100 : 0;
                  return (
                    <>
                        <div className="rl-bar-seg seg-gesetz" style={{ width: `${safe(result.gesetzliche_rente_netto)}%` }} title={`Gesetzlich: ${eur(result.gesetzliche_rente_netto)}`} />
                        <div className="rl-bar-seg seg-privat" style={{ width: `${safe(result.private_rente_netto)}%` }} title={`Privat: ${eur(result.private_rente_netto)}`} />
                        <div className="rl-bar-seg seg-luecke" style={{ width: `${safe(result.luecke_pro_monat)}%` }} title={`Lücke: ${eur(result.luecke_pro_monat)}`} />
                      </>);

                })()}
                </div>
                <div className="rl-bar-legend">
                  <span><span className="dot seg-gesetz"></span>Gesetzlich</span>
                  <span><span className="dot seg-privat"></span>Privat/betriebl.</span>
                  <span><span className="dot seg-luecke"></span>Lücke</span>
                </div>
              </div>

              <div className="rl-result-body">
                <div>
                  <div className="rl-result-sub">Einordnung</div>
                  <p className="rl-result-analyse">{result.analyse}</p>
                </div>
                <div>
                  <div className="rl-result-sub">Konkrete nächste Schritte</div>
                  <ol className="rl-steps">
                    {(result.schritte || []).map((s, i) =>
                  <li key={i}><span className="rl-step-num">{String(i + 1).padStart(2, "0")}</span><span>{s}</span></li>
                  )}
                  </ol>
                </div>
              </div>

              {result.sparrate_noetig != null &&
            <div className="rl-savings">
                  Um die Lücke bis zum Renteneintritt zu schließen, bräuchte es zusätzlich
                  ca. <strong>{eur(result.sparrate_noetig)}</strong> Sparrate pro Monat
                  (KI-Richtwert, abhängig von Rendite und Restlaufzeit).
                </div>
            }

              <div className="rl-result-actions">
                <button className="btn btn-outline" onClick={reset}>Neu berechnen ↺</button>
                <a href="#kontakt" className="btn btn-primary">Workshop dazu anfragen <ArrowI size={14} /></a>
              </div>
            </div>
          }

          {mode === "error" &&
          <div className="rl-loading">
              <div>
                <div className="rl-loading-title">Hat nicht geklappt.</div>
                <div className="rl-loading-sub">Die KI hat keine valide Antwort geliefert. Bitte erneut versuchen.</div>
                <button className="btn btn-outline" onClick={reset} style={{ marginTop: 16 }}>Zurück zur Eingabe</button>
              </div>
            </div>
          }
        </div>
      </div>
    </section>);

}

// ============================ LEAD MAGNET (Freebie + Newsletter) ============================
function LeadMagnet() {
  const [email, setEmail] = useStateI("");
  const [consent, setConsent] = useStateI(false);
  const [sent, setSent] = useStateI(false);

  const submit = (e) => {
    e.preventDefault();
    if (!email || !consent) return;
    // Interim: bis ein Mailing-Dienst angebunden ist, läuft die Anmeldung per Mail an Linda.
    const subject = "Playbook Mitarbeitenden-Netzwerke anfordern + Newsletter";
    const body =
      `Bitte schick mir das Playbook für Mitarbeitenden-Netzwerke.\n\n` +
      `E-Mail: ${email}\n` +
      `Newsletter: Ja, ich möchte den ALL IN Newsletter (neue Termine, Tools, Impulse) erhalten.`;
    window.location.href =
      `mailto:mail@lindabrack.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    setSent(true);
  };

  return (
    <section className="section-pad-sm lead-magnet" id="playbook">
      <div className="wrap">
        <div className="lm-bar">
          <div className="lm-bar-cover" aria-label="Cover: Playbook Mitarbeitenden-Netzwerke">
            <div className="lm-cover-mini">
              <div className="lm-cover-mini-art">
                <span className="lm-cover-mini-dot"></span>
              </div>
              <div className="lm-cover-mini-body">
                <span className="lm-cover-mini-kicker">Playbook</span>
                <span className="lm-cover-mini-title">Mitarbeitenden-<br />Netzwerke.</span>
              </div>
            </div>
          </div>

          <div className="lm-bar-copy">
            <div className="eyebrow no-line">Kostenlos · PDF</div>
            <h3 className="lm-bar-title">Das Playbook für Mitarbeitenden-Netzwerke.</h3>
            <p>
              Interne <strong>Mitarbeitenden-Netzwerke</strong> (auch ERG genannt)
              gezielt aufbauen: vom ersten Treffen zum strategisch verankerten
              Netzwerk – mit Sponsor, Mandat und Budget.
            </p>
          </div>

          <div className="lm-bar-action">
            {!sent ?
            <form className="lm-bar-form" onSubmit={submit}>
                <div className="lm-input-row">
                  <input
                  type="email"
                  required
                  placeholder="name@unternehmen.de"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)} />
                  <button type="submit" className="btn btn-primary">Holen <ArrowI size={14} /></button>
                </div>
                <label className="lm-consent">
                  <input type="checkbox" required checked={consent} onChange={(e) => setConsent(e.target.checked)} />
                  <span>Newsletter mit neuen Terminen &amp; Impulsen. Double-Opt-In · DSGVO-konform.</span>
                </label>
              </form> :

            <div className="lm-bar-success">
                <span className="lm-success-mark" aria-hidden="true">✓</span>
                <p>Danke! Das Playbook ist unterwegs an <strong>{email}</strong>.</p>
              </div>
            }
          </div>
        </div>
      </div>
    </section>);

}

window.Interactive = { DiversityCheck, Contact, Footer, RentenluckeRechner, LeadMagnet };