/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio */
const { useState, useEffect, useRef, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light"
} /*EDITMODE-END*/;

// ───────────────────────────────────────────────────────────────────────────
// Brand placeholder marks (NOT official ZH crest / AGOV logo — neutral stand-ins)
// ───────────────────────────────────────────────────────────────────────────
function ZapMark({ size = 40 }) {
  return (
    <div className="zap-mark" style={{ width: size, height: size }}>
      <svg viewBox="0 0 40 40" width={size} height={size} aria-hidden="true">
        <rect x="0.5" y="0.5" width="39" height="39" fill="none" stroke="currentColor" strokeWidth="1" />
        <path d="M10 10 L30 10 L10 30 L30 30" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinejoin="miter" strokeLinecap="square" />
      </svg>
    </div>);

}

function EidMark({ size = 28 }) {
  return (
    <svg viewBox="0 0 28 28" width={size} height={size} aria-hidden="true" className="eid-mark">
      <rect x="1" y="1" width="26" height="26" rx="3" fill="none" stroke="currentColor" strokeWidth="1.5" />
      <rect x="6" y="7" width="6" height="6" fill="none" stroke="currentColor" strokeWidth="1.5" />
      <line x1="15" y1="9" x2="22" y2="9" stroke="currentColor" strokeWidth="1.5" />
      <line x1="15" y1="13" x2="20" y2="13" stroke="currentColor" strokeWidth="1.5" />
      <line x1="6" y1="18" x2="22" y2="18" stroke="currentColor" strokeWidth="1.5" />
      <line x1="6" y1="22" x2="18" y2="22" stroke="currentColor" strokeWidth="1.5" />
    </svg>);

}

function KeyMark({ size = 28 }) {
  return (
    <svg viewBox="0 0 28 28" width={size} height={size} aria-hidden="true">
      <circle cx="9" cy="14" r="5" fill="none" stroke="currentColor" strokeWidth="1.5" />
      <line x1="14" y1="14" x2="24" y2="14" stroke="currentColor" strokeWidth="1.5" />
      <line x1="22" y1="14" x2="22" y2="18" stroke="currentColor" strokeWidth="1.5" />
      <line x1="19" y1="14" x2="19" y2="17" stroke="currentColor" strokeWidth="1.5" />
    </svg>);

}

function CheckIcon({ size = 16 }) {
  return (
    <svg viewBox="0 0 16 16" width={size} height={size} aria-hidden="true">
      <path d="M3 8.5 L6.5 12 L13 4.5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

function XIcon({ size = 16 }) {
  return (
    <svg viewBox="0 0 16 16" width={size} height={size} aria-hidden="true">
      <path d="M4 4 L12 12 M12 4 L4 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
    </svg>);

}

function InfoIcon({ size = 14 }) {
  return (
    <svg viewBox="0 0 16 16" width={size} height={size} aria-hidden="true">
      <circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" strokeWidth="1.3" />
      <circle cx="8" cy="4.8" r="0.9" fill="currentColor" />
      <line x1="8" y1="7" x2="8" y2="12" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
    </svg>);

}

function ArrowIcon({ size = 14 }) {
  return (
    <svg viewBox="0 0 16 16" width={size} height={size} aria-hidden="true">
      <line x1="3" y1="8" x2="13" y2="8" stroke="currentColor" strokeWidth="1.5" />
      <path d="M9 4 L13 8 L9 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

function SpinnerIcon({ size = 16 }) {
  return (
    <svg viewBox="0 0 16 16" width={size} height={size} aria-hidden="true" className="spin">
      <circle cx="8" cy="8" r="6" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeDasharray="20 40" />
    </svg>);

}

// ───────────────────────────────────────────────────────────────────────────
// Header
// ───────────────────────────────────────────────────────────────────────────
function Header({ onHome }) {
  return (
    <header className="site-header">
      <button className="brand" onClick={onHome} aria-label="Zur Startseite">
        <ZapMark size={32} />
        <div className="brand-text">
          <span className="brand-eyebrow">Kanton Zürich · Bildungsdirektion</span>
          <span className="brand-title">Zentrale Aufnahmeprüfung</span>
        </div>
      </button>
      <div className="header-meta">
        <span className="lang-switch" aria-label="Sprache">
          <button className="lang active">DE</button>
          <button className="lang">FR</button>
          <button className="lang">IT</button>
          <button className="lang">EN</button>
        </span>
      </div>
    </header>);

}

function Footer() {
  return (
    <footer className="site-footer">
      <span>© Kanton Zürich · ZAP-Plattform · Prototyp</span>
      <span className="footer-links">
        <a href="#" onClick={(e) => e.preventDefault()}>Hilfe</a>
        <a href="#" onClick={(e) => e.preventDefault()}>Datenschutz</a>
        <a href="#" onClick={(e) => e.preventDefault()}>Impressum</a>
        <a href="#" onClick={(e) => e.preventDefault()}>Kontakt</a>
      </span>
    </footer>);

}

// ───────────────────────────────────────────────────────────────────────────
// LOGIN
// ───────────────────────────────────────────────────────────────────────────
function LoginScreen({ onNavigate }) {
  const [user, setUser] = useState("");
  const [pass, setPass] = useState("");
  const [showPass, setShowPass] = useState(false);
  const [submitState, setSubmitState] = useState("idle"); // idle | loading | error | success
  const [errors, setErrors] = useState({});

  function submit(e) {
    e.preventDefault();
    const errs = {};
    if (!user.trim()) errs.user = "Bitte Benutzername eingeben";else
    if (!/^[a-zäöü]+\.[a-zäöü]+$/i.test(user.trim())) errs.user = "Format: vorname.nachname";
    if (!pass) errs.pass = "Bitte Passwort eingeben";else
    if (pass.length < 6) errs.pass = "Passwort zu kurz";
    setErrors(errs);
    if (Object.keys(errs).length) {
      setSubmitState("error");
      return;
    }
    setSubmitState("loading");
    setTimeout(() => {
      // Demo: anything matching format goes through; "wrong" pass triggers credential error
      if (pass === "wrong") {
        setErrors({ form: "Benutzername oder Passwort falsch." });
        setSubmitState("error");
      } else {
        setSubmitState("success");
        setTimeout(() => onNavigate("dashboard"), 900);
      }
    }, 1100);
  }

  return (
    <div className="screen login-screen">
      <div className="login-intro">
        <h1>Anmelden</h1>
        <p>Melden Sie sich an, um Ihre Anmeldung zur Zentralen Aufnahmeprüfung fortzusetzen oder einzureichen.</p>
      </div>

      <div className="auth-card">
        <div className="auth-card-grid">
          {/* AGOV column */}
          <section className="auth-col">
            <div className="auth-col-head">
              <span className="auth-tag">Empfohlen · elektronisch</span>
              <h2>Mit AGOV anmelden</h2>
              <p>Sichere Anmeldung mit Ihrer staatlichen elektronischen Identität.</p>
            </div>

            <button className="btn btn-primary btn-block" onClick={() => onNavigate("agov")}>
              <EidMark size={20} />
              <span>Weiter mit AGOV</span>
              <ArrowIcon size={14} />
            </button>

            <ul className="bullets">
              <li><CheckIcon size={14} /> Keine zusätzlichen Zugangsdaten nötig</li>
              <li><CheckIcon size={14} /> Dokumente werden digital zugestellt</li>
              <li><CheckIcon size={14} /> Identität bereits verifiziert</li>
            </ul>
          </section>

          <div className="auth-divider" aria-hidden="true">
            <span className="divider-line" />
            <span className="divider-label">oder</span>
            <span className="divider-line" />
          </div>

          {/* Password column */}
          <section className="auth-col">
            <div className="auth-col-head">
              <span className="auth-tag muted">Papierweg</span>
              <h2>Mit Benutzerkonto anmelden</h2>
              <p>Anmeldung mit Benutzername und Passwort. Dokumente werden per Post versandt.</p>
            </div>

            <form className="form" onSubmit={submit} noValidate>
              <div className={"field" + (errors.user ? " has-error" : "")}>
                <label htmlFor="user">
                  Benutzername
                  <span className="hint">vorname.nachname</span>
                </label>
                <input
                  id="user"
                  type="text"
                  autoComplete="username"
                  value={user}
                  onChange={(e) => {setUser(e.target.value);if (errors.user) setErrors({ ...errors, user: undefined });}}
                  placeholder="anna.muster"
                  disabled={submitState === "loading" || submitState === "success"} />
                
                {errors.user && <span className="field-error">{errors.user}</span>}
              </div>

              <div className={"field" + (errors.pass ? " has-error" : "")}>
                <label htmlFor="pass">
                  Passwort
                  <a href="#" className="field-link" onClick={(e) => {e.preventDefault();onNavigate("forgot-password");}}>vergessen?</a>
                </label>
                <div className="input-with-toggle">
                  <input
                    id="pass"
                    type={showPass ? "text" : "password"}
                    autoComplete="current-password"
                    value={pass}
                    onChange={(e) => {setPass(e.target.value);if (errors.pass) setErrors({ ...errors, pass: undefined });}}
                    placeholder="••••••••••"
                    disabled={submitState === "loading" || submitState === "success"} />
                  
                  <button type="button" className="toggle-pass" onClick={() => setShowPass((s) => !s)}>
                    {showPass ? "verbergen" : "anzeigen"}
                  </button>
                </div>
                {errors.pass && <span className="field-error">{errors.pass}</span>}
              </div>

              {errors.form &&
              <div className="form-error" role="alert">
                  <XIcon size={14} /> {errors.form}
                </div>
              }

              {submitState === "success" &&
              <div className="form-success" role="status">
                  <CheckIcon size={14} /> Erfolgreich angemeldet. Sie werden weitergeleitet …
                </div>
              }

              <button
                type="submit"
                className="btn btn-secondary btn-block"
                disabled={submitState === "loading" || submitState === "success"}>
                
                {submitState === "loading" ? <><SpinnerIcon size={16} /> Anmelden …</> : <>Anmelden <ArrowIcon size={14} /></>}
              </button>

              <div className="form-meta">
                <a href="#" onClick={(e) => {e.preventDefault();onNavigate("forgot-username");}}>Benutzername vergessen?</a>
              </div>
            </form>
          </section>
        </div>

        <div className="auth-card-footer">
          <span>Noch kein Konto?</span>
          <button className="btn-link strong" onClick={() => onNavigate("register")}>
            Jetzt registrieren <ArrowIcon size={12} />
          </button>
        </div>
      </div>

      <div className="login-tip">
        <InfoIcon size={14} />
        <span>Kandidatinnen und Kandidaten registrieren sich in jedem Schuljahr neu für die ZAP. Die Registrierung dauert ca. 5 Minuten.</span>
      </div>
    </div>);

}

// ───────────────────────────────────────────────────────────────────────────
// AGOV mock (QR redirect)
// ───────────────────────────────────────────────────────────────────────────
function AgovScreen({ onNavigate }) {
  const [scanned, setScanned] = useState(false);

  // Tiny pseudo-QR pattern — deterministic, illustrative
  const qrCells = useMemo(() => {
    const N = 21;
    const cells = [];
    let s = 1;
    for (let y = 0; y < N; y++) {
      for (let x = 0; x < N; x++) {
        // finder squares
        const inFinder = (cx, cy) => x >= cx && x < cx + 7 && y >= cy && y < cy + 7;
        const onFinder = (cx, cy) => inFinder(cx, cy) && !(x > cx && x < cx + 6 && y > cy && y < cy + 6 && !(x > cx + 1 && x < cx + 5 && y > cy + 1 && y < cy + 5));
        if (onFinder(0, 0) || onFinder(14, 0) || onFinder(0, 14)) {
          cells.push({ x, y, on: true });
          continue;
        }
        if (inFinder(0, 0) || inFinder(14, 0) || inFinder(0, 14)) continue;
        // pseudo-random
        s = s * 1103515245 + 12345 & 0x7fffffff;
        cells.push({ x, y, on: (s >> 8 & 1) === 1 });
      }
    }
    return { N, cells };
  }, []);

  return (
    <div className="screen agov-screen">
      <div className="agov-back">
        <button className="btn-link" onClick={() => onNavigate("login")}>← Zurück zur Anmeldung</button>
      </div>

      <div className="agov-card">
        <div className="agov-card-head">
          <div className="agov-mark">
            <span className="agov-mark-glyph">eID</span>
            <span className="agov-mark-text">Federal Login Service<br /><small>(Platzhalter für AGOV-Logo)</small></span>
          </div>
          <span className="agov-help">? Hilfe</span>
        </div>

        <div className="agov-grid">
          <section className="agov-main">
            <h2>Anmelden mit der Access App</h2>
            <p>Scannen Sie den QR-Code mit Ihrer Access App auf dem Mobiltelefon.</p>

            <div className={"qr-wrap" + (scanned ? " is-scanned" : "")}>
              <div className="qr">
                <svg viewBox={`0 0 ${qrCells.N} ${qrCells.N}`} width="220" height="220" shapeRendering="crispEdges">
                  <rect width={qrCells.N} height={qrCells.N} fill="var(--surface)" />
                  {qrCells.cells.filter((c) => c.on).map((c, i) =>
                  <rect key={i} x={c.x} y={c.y} width="1" height="1" fill="var(--ink)" />
                  )}
                </svg>
                {scanned &&
                <div className="qr-scanned">
                    <div className="qr-check"><CheckIcon size={28} /></div>
                  </div>
                }
              </div>
              <button className="btn btn-ghost qr-sim" onClick={() => {setScanned(true);setTimeout(() => onNavigate("dashboard"), 1100);}}>
                {scanned ? "Erkannt – Weiterleitung …" : "Scan simulieren"}
              </button>
            </div>

            <div className="agov-help-line">
              <strong>Keinen Zugriff auf die App?</strong>
              <button className="btn btn-outline btn-small">Konto­wieder­herstellung starten</button>
            </div>
          </section>

          <section className="agov-side">
            <div className="agov-side-card">
              <h3>Andere Methoden</h3>
              <button className="btn btn-outline btn-block"><KeyMark size={18} /> Sicherheits­schlüssel</button>
              <button className="btn btn-outline btn-block"><EidMark size={18} /> Mobile ID</button>
            </div>
            <div className="agov-side-card">
              <h3>Noch kein eID-Konto?</h3>
              <p>Registrieren Sie sich kostenlos beim staatlichen eID-Dienst.</p>
              <button className="btn btn-outline btn-block">Jetzt registrieren</button>
            </div>
          </section>
        </div>
      </div>

      <p className="agov-disclaimer">
        Sie verlassen die ZAP-Plattform und werden mit dem staatlichen eID-Dienst verbunden.
        Nach erfolgreicher Anmeldung kehren Sie automatisch zurück.
      </p>
    </div>);

}

// ───────────────────────────────────────────────────────────────────────────
// REGISTER
// ───────────────────────────────────────────────────────────────────────────
function pwChecks(pw) {
  return {
    len: pw.length >= 12,
    upper: /[A-Z]/.test(pw),
    lower: /[a-z]/.test(pw),
    digit: /\d/.test(pw),
    special: /[^A-Za-z0-9]/.test(pw)
  };
}

function RegisterScreen({ onNavigate }) {
  const [path, setPath] = useState(null); // null | 'agov' | 'manual'
  const [data, setData] = useState({
    name: "", vorname: "", geb: "", email: "",
    ahv: "", pass: "", pass2: "",
    robot: false, agree: false
  });
  const [touched, setTouched] = useState({});
  const [submitState, setSubmitState] = useState("idle");

  function set(k, v) {
    setData((d) => ({ ...d, [k]: v }));
  }

  const checks = pwChecks(data.pass);
  const pwValid = Object.values(checks).every(Boolean);
  const pwMatch = data.pass && data.pass === data.pass2;

  function ahvFormatted(v) {
    const digits = v.replace(/\D/g, "").slice(0, 13);
    const parts = [digits.slice(0, 3), digits.slice(3, 7), digits.slice(7, 11), digits.slice(11, 13)].filter(Boolean);
    return parts.join(".");
  }
  function gebFormatted(v) {
    const digits = v.replace(/\D/g, "").slice(0, 8);
    const parts = [digits.slice(0, 2), digits.slice(2, 4), digits.slice(4, 8)].filter(Boolean);
    return parts.join(".");
  }

  const validations = {
    name: data.name.trim().length >= 2,
    vorname: data.vorname.trim().length >= 2,
    geb: /^\d{2}\.\d{2}\.\d{4}$/.test(data.geb),
    email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email),
    ahv: /^756\.\d{4}\.\d{4}\.\d{2}$/.test(data.ahv),
    pass: pwValid,
    pass2: pwMatch,
    robot: data.robot,
    agree: data.agree
  };

  const allValid = Object.values(validations).every(Boolean);

  function submit(e) {
    e.preventDefault();
    setTouched({
      name: true, vorname: true, geb: true, email: true,
      ahv: true, pass: true, pass2: true, robot: true, agree: true
    });
    if (!allValid) return;
    setSubmitState("loading");
    setTimeout(() => setSubmitState("sent"), 1200);
  }

  // ── Path picker (initial state) ────────────────────────────────────────
  if (path === null) {
    return (
      <div className="screen register-screen">
        <div className="reg-back">
          <button className="btn-link" onClick={() => onNavigate("login")}>← Zurück zur Anmeldung</button>
        </div>

        <div className="reg-intro">
          <span className="step-pill">Schritt 1 von 2 · Methode wählen</span>
          <h1>Registrierung</h1>
          <p>Wählen Sie, wie Sie Ihr Konto für die Zentrale Aufnahmeprüfung erstellen möchten. Beide Wege führen zur gleichen Anmeldung.</p>
        </div>

        <div className="path-grid">
          <button className="path-card" onClick={() => onNavigate("agov")}>
            <div className="path-icon"><EidMark size={32} /></div>
            <div className="path-tag">Empfohlen · elektronisch</div>
            <h2>Mit AGOV registrieren</h2>
            <p>Registrierung über den staatlichen Login-Dienst. Ihre Identität ist bereits geprüft – Dokumente werden digital zugestellt.</p>
            <ul className="bullets">
              <li><CheckIcon size={14} /> Ohne Aktivierungs-E-Mail</li>
              <li><CheckIcon size={14} /> Sofort einsatzbereit</li>
              <li><CheckIcon size={14} /> Digitale Zustellung</li>
            </ul>
            <span className="path-cta">Weiter <ArrowIcon size={14} /></span>
          </button>

          <button className="path-card" onClick={() => setPath("manual")}>
            <div className="path-icon"><KeyMark size={32} /></div>
            <div className="path-tag muted">Papierweg</div>
            <h2>Mit Benutzerkonto registrieren</h2>
            <p>Klassische Registrierung mit Passwort. Dokumente werden per Post zugestellt. Aktivierung erfolgt per E-Mail.</p>
            <ul className="bullets">
              <li><CheckIcon size={14} /> Ohne eID nutzbar</li>
              <li><CheckIcon size={14} /> Aktivierungs-E-Mail in 4 Schritten</li>
              <li><CheckIcon size={14} /> Postversand</li>
            </ul>
            <span className="path-cta">Weiter <ArrowIcon size={14} /></span>
          </button>
        </div>

        <div className="reg-foot">
          <span>Bereits registriert?</span>
          <button className="btn-link strong" onClick={() => onNavigate("login")}>Zur Anmeldung</button>
        </div>
      </div>);

  }

  // ── Sent confirmation ─────────────────────────────────────────────────
  if (submitState === "sent") {
    return (
      <div className="screen register-screen">
        <div className="confirm-card">
          <div className="confirm-icon"><CheckIcon size={32} /></div>
          <h1>Aktivierungs-E-Mail wurde versendet</h1>
          <p className="confirm-lead">
            Wir haben eine E-Mail an <strong>{data.email}</strong> gesendet. Bitte folgen Sie den Anweisungen, um Ihr Konto zu aktivieren.
          </p>

          <ol className="confirm-steps">
            <li>
              <span className="step-num">1</span>
              <div>
                <strong>E-Mail-Postfach öffnen</strong>
                <p>Suchen Sie nach der Nachricht von „ZAP – Zentrale Aufnahmeprüfung". Prüfen Sie auch den Spam-Ordner.</p>
              </div>
            </li>
            <li>
              <span className="step-num">2</span>
              <div>
                <strong>Benutzername notieren</strong>
                <p>Die E-Mail enthält Ihren automatisch generierten Benutzernamen im Format <em>vorname.nachname</em>.</p>
              </div>
            </li>
            <li>
              <span className="step-num">3</span>
              <div>
                <strong>Aktivierungslink anklicken</strong>
                <p>Der Link ist 24 Stunden gültig. Danach werden Sie zur Anmeldeseite weitergeleitet.</p>
              </div>
            </li>
            <li>
              <span className="step-num">4</span>
              <div>
                <strong>Anmelden und Anmeldung ausfüllen</strong>
                <p>Mit Benutzernamen und gewähltem Passwort einloggen.</p>
              </div>
            </li>
          </ol>

          <div className="confirm-actions">
            <button className="btn btn-primary" onClick={() => onNavigate("login")}>Zur Anmeldung</button>
            <button className="btn btn-outline" onClick={() => {setSubmitState("idle");}}>E-Mail erneut senden</button>
          </div>
        </div>
      </div>);

  }

  // ── Manual form ────────────────────────────────────────────────────────
  const showErr = (k) => touched[k] && !validations[k];

  return (
    <div className="screen register-screen">
      <div className="reg-back">
        <button className="btn-link" onClick={() => setPath(null)}>← Methode ändern</button>
      </div>

      <div className="reg-intro">
        <span className="step-pill">Schritt 2 von 2 · Daten eingeben</span>
        <h1>Konto erstellen</h1>
        <p>Tragen Sie die Daten der Person ein, die sich für eine Zürcher Maturitätsschule anmelden möchte. Sie erhalten anschliessend eine Aktivierungs-E-Mail.</p>
      </div>

      <form className="reg-form" onSubmit={submit} noValidate>
        <fieldset className="reg-section">
          <legend>Persönliche Daten</legend>

          <div className="row two">
            <div className={"field" + (showErr("vorname") ? " has-error" : "")}>
              <label htmlFor="vorname">Vorname</label>
              <input id="vorname" value={data.vorname}
              onChange={(e) => set("vorname", e.target.value)}
              onBlur={() => setTouched({ ...touched, vorname: true })}
              placeholder="Anna" autoComplete="given-name" />
              {showErr("vorname") && <span className="field-error">Bitte Vornamen eingeben (mind. 2 Zeichen)</span>}
            </div>
            <div className={"field" + (showErr("name") ? " has-error" : "")}>
              <label htmlFor="name">Nachname</label>
              <input id="name" value={data.name}
              onChange={(e) => set("name", e.target.value)}
              onBlur={() => setTouched({ ...touched, name: true })}
              placeholder="Muster" autoComplete="family-name" />
              {showErr("name") && <span className="field-error">Bitte Nachnamen eingeben (mind. 2 Zeichen)</span>}
            </div>
          </div>

          <div className="row two">
            <div className={"field" + (showErr("geb") ? " has-error" : "")}>
              <label htmlFor="geb">Geburtsdatum <span className="hint">TT.MM.JJJJ</span></label>
              <input id="geb" value={data.geb} inputMode="numeric"
              onChange={(e) => set("geb", gebFormatted(e.target.value))}
              onBlur={() => setTouched({ ...touched, geb: true })}
              placeholder="14.03.2010" />
              {showErr("geb") && <span className="field-error">Format TT.MM.JJJJ</span>}
            </div>
            <div className={"field" + (showErr("ahv") ? " has-error" : "")}>
              <label htmlFor="ahv">Sozialversicherungsnummer <span className="hint">756.XXXX.XXXX.XX</span></label>
              <input id="ahv" value={data.ahv} inputMode="numeric"
              onChange={(e) => set("ahv", ahvFormatted(e.target.value))}
              onBlur={() => setTouched({ ...touched, ahv: true })}
              placeholder="756.1234.5678.97" />
              {showErr("ahv") && <span className="field-error">Bitte gültige AHV-Nr. (756.XXXX.XXXX.XX)</span>}
            </div>
          </div>

          <div className={"field" + (showErr("email") ? " has-error" : "")}>
            <label htmlFor="email">E-Mail-Adresse <span className="hint">für Aktivierung und Benachrichtigungen</span></label>
            <input id="email" type="email" value={data.email}
            onChange={(e) => set("email", e.target.value)}
            onBlur={() => setTouched({ ...touched, email: true })}
            placeholder="anna.muster@beispiel.ch" autoComplete="email" />
            {showErr("email") && <span className="field-error">Bitte gültige E-Mail-Adresse</span>}
          </div>
        </fieldset>

        <fieldset className="reg-section">
          <legend>Passwort festlegen</legend>

          <div className="row two">
            <div className={"field" + (showErr("pass") ? " has-error" : "")}>
              <label htmlFor="rpass">Passwort</label>
              <input id="rpass" type="password" value={data.pass}
              onChange={(e) => set("pass", e.target.value)}
              onBlur={() => setTouched({ ...touched, pass: true })}
              autoComplete="new-password" />
            </div>
            <div className={"field" + (showErr("pass2") ? " has-error" : "")}>
              <label htmlFor="rpass2">Passwort wiederholen</label>
              <input id="rpass2" type="password" value={data.pass2}
              onChange={(e) => set("pass2", e.target.value)}
              onBlur={() => setTouched({ ...touched, pass2: true })}
              autoComplete="new-password" />
              {showErr("pass2") && <span className="field-error">Passwörter stimmen nicht überein</span>}
            </div>
          </div>

          <ul className="pw-checks" aria-label="Passwortanforderungen">
            <li className={checks.len ? "ok" : data.pass ? "no" : ""}>
              {checks.len ? <CheckIcon /> : <XIcon />} mindestens 12 Zeichen
            </li>
            <li className={checks.upper ? "ok" : data.pass ? "no" : ""}>
              {checks.upper ? <CheckIcon /> : <XIcon />} 1 Großbuchstabe (A–Z)
            </li>
            <li className={checks.lower ? "ok" : data.pass ? "no" : ""}>
              {checks.lower ? <CheckIcon /> : <XIcon />} 1 Kleinbuchstabe (a–z)
            </li>
            <li className={checks.digit ? "ok" : data.pass ? "no" : ""}>
              {checks.digit ? <CheckIcon /> : <XIcon />} 1 Ziffer (0–9)
            </li>
            <li className={checks.special ? "ok" : data.pass ? "no" : ""}>
              {checks.special ? <CheckIcon /> : <XIcon />} 1 Sonderzeichen (+, =, %, …)
            </li>
          </ul>
        </fieldset>

        <fieldset className="reg-section">
          <legend>Sicherheit & Bestätigung</legend>

          <button type="button"
          className={"robot-check" + (data.robot ? " is-checked" : "") + (showErr("robot") ? " has-error" : "")}
          onClick={() => {set("robot", !data.robot);setTouched({ ...touched, robot: true });}}>
            <span className="robot-box">
              {data.robot ? <CheckIcon size={18} /> : null}
            </span>
            <span className="robot-label">Ich bin kein Roboter</span>
            <span className="robot-brand">
              <span className="robot-shield">
                <svg viewBox="0 0 16 18" width="20" height="22" aria-hidden="true">
                  <path d="M8 1 L14 3 V9 C14 13 11 16 8 17 C5 16 2 13 2 9 V3 Z" fill="none" stroke="currentColor" strokeWidth="1.3" />
                </svg>
              </span>
              <span className="robot-brand-text">Captcha<br /><small>Datenschutz · AGB</small></span>
            </span>
          </button>
          {showErr("robot") && <span className="field-error">Bitte bestätigen Sie, dass Sie kein Roboter sind</span>}

          <label className={"checkbox" + (showErr("agree") ? " has-error" : "")}>
            <input type="checkbox" checked={data.agree}
            onChange={(e) => {set("agree", e.target.checked);setTouched({ ...touched, agree: true });}} />
            <span className="checkbox-box">{data.agree && <CheckIcon size={12} />}</span>
            <span>Ich bestätige, dass die angegebenen Daten korrekt sind, und akzeptiere die Datenschutzbestimmungen der ZAP-Plattform.</span>
          </label>
          {showErr("agree") && <span className="field-error">Bitte Datenschutzbestimmungen akzeptieren</span>}
        </fieldset>

        <div className="reg-actions">
          <button type="button" className="btn btn-outline" onClick={() => onNavigate("login")}>Abbrechen</button>
          <button type="submit" className="btn btn-primary" disabled={submitState === "loading"}>
            {submitState === "loading" ? <><SpinnerIcon size={16} /> Konto wird erstellt …</> : <>Registrieren <ArrowIcon size={14} /></>}
          </button>
        </div>
      </form>
    </div>);

}

// ───────────────────────────────────────────────────────────────────────────
// Dashboard stub (post-login success target)
// ───────────────────────────────────────────────────────────────────────────
function DashboardStub({ onNavigate }) {
  return (
    <div className="screen dashboard-stub">
      <div className="confirm-card">
        <div className="confirm-icon ok"><CheckIcon size={32} /></div>
        <h1>Willkommen zurück</h1>
        <p className="confirm-lead">Sie sind angemeldet. Hier würde Ihr ZAP-Dashboard erscheinen — dieser Prototyp zeigt nur den Anmeldefluss.</p>
        <div className="confirm-actions">
          <button className="btn btn-outline" onClick={() => onNavigate("login")}>Abmelden & zurück zur Anmeldung</button>
        </div>
      </div>
    </div>);

}

// ───────────────────────────────────────────────────────────────────────────
// App shell
// ───────────────────────────────────────────────────────────────────────────
function App() {
  const [route, setRoute] = useState("login"); // login | register | agov | dashboard
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.documentElement.dataset.theme = tweaks.theme;
  }, [tweaks.theme]);

  function navigate(r) {
    setRoute(r);
    window.scrollTo({ top: 0, behavior: "instant" });
  }

  let body = null;
  if (route === "login") body = <LoginScreen onNavigate={navigate} />;else
  if (route === "register") body = <RegisterScreen onNavigate={navigate} />;else
  if (route === "agov") body = <AgovScreen onNavigate={navigate} />;else
  if (route === "dashboard") body = <DashboardStub onNavigate={navigate} />;else
  body = <LoginScreen onNavigate={navigate} />;

  return (
    <div className="app" data-screen-label={
    route === "login" ? "01 Login" :
    route === "register" ? "02 Registrierung" :
    route === "agov" ? "03 AGOV" : "04 Dashboard"
    }>
      <Header onHome={() => navigate("login")} />
      <main className="main">{body}</main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Erscheinungsbild">
          <TweakRadio
            label="Farbschema"
            value={tweaks.theme}
            options={[{ value: "light", label: "Hell" }, { value: "dark", label: "Dunkel" }]}
            onChange={(v) => setTweak("theme", v)} />
          
        </TweakSection>
        <TweakSection title="Demo">
          <p style={{ fontSize: 12, color: "var(--ink-muted)", margin: 0, lineHeight: 1.5 }}>
            Tipp: Im Login-Formular Passwort <code>wrong</code> eingeben, um den Fehlerzustand zu sehen. Andere Werte führen zum Erfolgszustand.
          </p>
        </TweakSection>
      </TweaksPanel>
    </div>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);