/* global React, Icon, IMG, PhImg */
const { createElement: w, useState: useStateW, useEffect: useEffectW } = React;

/* ---------------- Founders List (Warteliste + Gründerpreis) ---------------- */
const EDITION_TOTAL = 200;

const PERKS = [
  { icon: "lock",   t: "Gründerpreis · 34,90 € fixiert", d: "Dein Preis bleibt — auch wenn der offizielle Launch-Preis steigt." },
  { icon: "truck",  t: "48 Stunden früher Zugang",       d: "Bestelle vor allen anderen, solange die erste Edition reicht." },
  { icon: "shield", t: "Nummerierte Echtheitskarte",     d: "Dein Exemplar trägt deine persönliche Nummer von 200." },
  { icon: "leaf",   t: "Kostenloser Versand · IOSS",     d: "Zollfrei, 5–9 Werktage, 14 Tage Widerrufsrecht." },
];

function emailOk(v) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test((v || "").trim()); }

function Founders({ open, onClose, state, onJoin, prefillEmail }) {
  const joined = !!(state && state.joined);
  const [f, setF] = useStateW({ first: "", email: prefillEmail || "" });
  const [err, setErr] = useStateW("");
  const set = (key) => (ev) => { setF((s) => ({ ...s, [key]: ev.target.value })); setErr(""); };

  useEffectW(() => { if (prefillEmail) setF((s) => ({ ...s, email: prefillEmail })); }, [prefillEmail]);

  const submit = () => {
    if (!f.first.trim()) return setErr("Bitte gib deinen Vornamen ein.");
    if (!emailOk(f.email)) return setErr("Bitte gib eine gültige E-Mail-Adresse ein.");
    onJoin({ first: f.first.trim(), email: f.email.trim() });
  };

  const Field = ({ id, label, type = "text" }) =>
    w("div", { className: "field" + (f[id] ? " filled" : "") },
      w("input", { id, type, value: f[id] || "", onChange: set(id), placeholder: " ",
        autoComplete: id === "email" ? "email" : "given-name" }),
      w("label", { htmlFor: id }, label));

  return w("div", { className: "route" + (open ? " show" : ""), style: { background: "var(--cream)" } },
    w("div", { className: "route-head" },
      w("button", { className: "tb-btn", onClick: onClose, "aria-label": "Zurück" }, w(Icon, { name: "arrowL", size: 22 })),
      w("div", { className: "tb-logo", style: { fontSize: 17 } }, "ANAYA", w("sup", null, "N°1")),
      w("div", { className: "eyebrow", style: { fontSize: 8.5, color: "var(--gold-deep)" } }, "Pre-Launch")),

    w("div", { className: "screen" },
      joined
        ? /* ---------- SUCCESS STATE ---------- */
          w("div", { style: { display: "flex", flexDirection: "column", minHeight: "100%" } },
            w("div", { style: { background: "var(--ink)", color: "var(--cream)", padding: "58px 24px 46px", textAlign: "center" } },
              w("div", { style: { width: 56, height: 56, borderRadius: "50%", border: "1.5px solid var(--gold)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 22px" } },
                w(Icon, { name: "check", size: 26, color: "var(--gold)" })),
              w("div", { className: "eyebrow", style: { color: "var(--gold)", marginBottom: 14 } }, "Willkommen auf der Founders List"),
              w("h1", { className: "display", style: { fontSize: 30, fontStyle: "italic", margin: "0 0 16px" } },
                "Du bist N°", state.number),
              w("p", { style: { fontSize: 13, lineHeight: 1.65, opacity: .82, maxWidth: 290, margin: "0 auto" } },
                `Reserviert von ${EDITION_TOTAL} Exemplaren. Wir melden uns 48 Stunden vor dem Launch an ${state.email} — mit deinem fixierten Gründerpreis.`)),
            w("div", { style: { padding: "30px 24px", flex: 1 } },
              w("div", { className: "eyebrow gold", style: { marginBottom: 16 } }, "Deine Vorteile sind gesichert"),
              PERKS.map((p, i) =>
                w("div", { key: i, style: { display: "flex", gap: 14, padding: "14px 0", borderTop: "1px solid var(--line)" } },
                  w("div", { style: { color: "var(--gold-deep)", flex: "0 0 auto" } }, w(Icon, { name: p.icon, size: 20, stroke: 1.3 })),
                  w("div", null,
                    w("div", { style: { fontSize: 12.5, letterSpacing: ".02em", marginBottom: 3 } }, p.t),
                    w("p", { className: "muted", style: { fontSize: 12, lineHeight: 1.5, margin: 0 } }, p.d)))),
              w("div", { style: { marginTop: 26, padding: "20px", background: "var(--cream-2)", textAlign: "center" } },
                w("p", { className: "serif", style: { fontSize: 16, fontStyle: "italic", margin: "0 0 14px" } }, "Sei die Erste, die sie trägt."),
                w("div", { style: { display: "flex", gap: 22, justifyContent: "center", fontSize: 12 } },
                  w("span", { style: { letterSpacing: ".06em" } }, "Instagram"),
                  w("span", { style: { letterSpacing: ".06em" } }, "TikTok")))),
            w("div", { style: { padding: "0 24px 40px" } },
              w("button", { className: "btn ghost", onClick: onClose }, "Zurück zur Kollektion")))

        : /* ---------- FORM STATE ---------- */
          w("div", null,
            /* editorial intro */
            w("section", { style: { position: "relative", minHeight: 300 } },
              w("div", { className: "ph dark has-img", style: { position: "absolute", inset: 0 } },
                w(PhImg, { src: IMG.editorialRed, alt: "ANAYA — Founders List Editorial", pos: "center 20%" })),
              w("div", { style: {
                position: "absolute", inset: 0, display: "flex", flexDirection: "column", justifyContent: "flex-end",
                padding: "0 24px 30px",
                background: "linear-gradient(to top, rgba(20,19,17,.74) 0%, rgba(20,19,17,.1) 60%, rgba(20,19,17,.3) 100%)" } },
                w("div", { className: "eyebrow", style: { color: "rgba(248,246,240,.85)", marginBottom: 12 } }, "Erste Edition · limitiert auf 200"),
                w("h1", { className: "display", style: { color: "var(--cream)", fontSize: 38, margin: "0 0 12px" } },
                  "The", w("br"), w("em", { style: { fontStyle: "italic" } }, "Founders List.")),
                w("p", { style: { color: "rgba(248,246,240,.8)", fontSize: 13, lineHeight: 1.6, maxWidth: 300, margin: 0 } },
                  "Die ANAYA N°1 erscheint als nummerierte erste Edition. Sichere dir deinen Platz — bevor wir öffnen."))),

            /* perks */
            w("section", { className: "pad", style: { padding: "28px 24px 6px" } },
              PERKS.map((p, i) =>
                w("div", { key: i, style: { display: "flex", gap: 14, padding: "16px 0", borderTop: i === 0 ? "0" : "1px solid var(--line)" } },
                  w("div", { style: { color: "var(--gold-deep)", flex: "0 0 auto" } }, w(Icon, { name: p.icon, size: 22, stroke: 1.3 })),
                  w("div", null,
                    w("div", { style: { fontSize: 13, letterSpacing: ".02em", marginBottom: 4 } }, p.t),
                    w("p", { className: "muted", style: { fontSize: 12.5, lineHeight: 1.55, margin: 0 } }, p.d))))),

            /* form */
            w("section", { className: "pad", style: { padding: "18px 24px 8px" } },
              w("div", { className: "eyebrow gold", style: { marginBottom: 6 } }, "Platz sichern"),
              Field({ id: "first", label: "Vorname" }),
              w("div", { style: { height: 6 } }),
              Field({ id: "email", label: "E-Mail-Adresse", type: "email" }),
              err && w("div", { style: { color: "#9a3412", fontSize: 11.5, letterSpacing: ".02em", marginTop: 10 } }, err),
              w("button", { className: "btn", style: { marginTop: 20 }, onClick: submit },
                "Platz auf der Liste sichern", w(Icon, { name: "arrowR", size: 15 })),
              w("p", { className: "muted center", style: { fontSize: 10.5, lineHeight: 1.65, letterSpacing: ".02em", margin: "16px 0 0" } },
                "Kein Kauf, keine Zahlung — du sicherst nur deinen Platz & Gründerpreis. Jederzeit mit einem Klick abbestellbar. Mit der Anmeldung stimmst du der Datenschutzerklärung zu.")),

            /* scarcity line */
            w("section", { style: { background: "var(--ink)", color: "var(--cream)", padding: "30px 24px", textAlign: "center", marginTop: 18 } },
              w("div", { className: "eyebrow", style: { color: "var(--gold)", marginBottom: 10 } }, "Bereits reserviert"),
              w("p", { className: "display", style: { fontSize: 26, fontStyle: "italic", margin: 0 } },
                state && state.taken ? `${state.taken} von ${EDITION_TOTAL}` : `38 von ${EDITION_TOTAL}`)))));
}

Object.assign(window, { Founders });