/* global React, Icon, PayVisa, PayMC, PayPaypal, PayApple, PayKlarna, IMG, PhImg */
const { createElement: k, useState: useStateC } = React;

/* ---------------- Checkout ---------------- */
function Checkout({ open, qty, onClose, onPlace }) {
  const [pay, setPay] = useStateC("card");
  const [f, setF] = useStateC({});
  const set = (key) => (ev) => setF((s) => ({ ...s, [key]: ev.target.value }));
  const total = (34.9 * Math.max(1, qty)).toFixed(2).replace(".", ",") + " €";

  const Field = ({ id, label, half, type = "text" }) =>
    k("div", { className: "field" + (f[id] ? " filled" : ""), style: half ? { flex: 1 } : null },
      k("input", { id, type, value: f[id] || "", onChange: set(id), placeholder: " " }),
      k("label", { htmlFor: id }, label));

  return k("div", { className: "route" + (open ? " show" : "") },
    k("div", { className: "route-head" },
      k("button", { className: "tb-btn", onClick: onClose, "aria-label": "Zurück" }, k(Icon, { name: "arrowL", size: 22 })),
      k("div", { className: "tb-logo", style: { fontSize: 17 } }, "ANAYA", k("sup", null, "N°1")),
      k("div", { style: { display: "flex", alignItems: "center", gap: 5, color: "var(--ink-mute)" } },
        k(Icon, { name: "lock", size: 14 }), k("span", { className: "eyebrow", style: { fontSize: 8.5 } }, "Sicher"))),

    k("div", { className: "screen", style: { padding: "22px 18px 30px" } },
      /* express */
      k("div", { className: "eyebrow", style: { marginBottom: 14 } }, "Express-Checkout"),
      k("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 22 } },
        k("button", { onClick: () => onPlace("Apple Pay"), style: expressBtn("#000") },
          k("svg", { width: 16, height: 18, viewBox: "0 0 16 18", fill: "#fff" },
            k("path", { d: "M13.1 9.6c0-2 1.6-2.9 1.7-3-1-1.4-2.4-1.6-2.9-1.6-1.2-.1-2.4.7-3 .7-.6 0-1.6-.7-2.6-.7C4.1 5 2.9 5.8 2.3 7c-1.3 2.3-.3 5.6.9 7.5.6.9 1.3 1.9 2.2 1.9.9 0 1.2-.6 2.3-.6 1 0 1.3.6 2.3.6s1.6-.9 2.2-1.8c.7-1 1-2 1-2-.1 0-1.9-.7-2.1-3zM11.3 3.3c.5-.6.8-1.5.7-2.3-.7 0-1.6.5-2.1 1.1-.5.5-.9 1.4-.8 2.2.8.1 1.6-.4 2.2-1z" })),
          k("span", { style: { color: "#fff", fontSize: 13, fontWeight: 600 } }, "Pay")),
        k("button", { onClick: () => onPlace("PayPal"), style: expressBtn("#FFC439") },
          k("span", { style: { fontStyle: "italic", fontWeight: 700, fontSize: 14 } },
            k("span", { style: { color: "#003087" } }, "Pay"), k("span", { style: { color: "#0070E0" } }, "Pal")))),
      k("div", { style: { display: "flex", alignItems: "center", gap: 12, marginBottom: 22 } },
        k("div", { className: "rule", style: { flex: 1 } }),
        k("span", { className: "eyebrow", style: { fontSize: 9 } }, "oder mit Karte"),
        k("div", { className: "rule", style: { flex: 1 } })),

      /* contact */
      k("div", { className: "eyebrow gold", style: { marginBottom: 4 } }, "01 — Kontakt"),
      Field({ id: "email", label: "E-Mail-Adresse" }),

      /* address */
      k("div", { className: "eyebrow gold", style: { margin: "22px 0 4px" } }, "02 — Lieferadresse"),
      k("div", { style: { display: "flex", gap: 14 } }, Field({ id: "first", label: "Vorname", half: true }), Field({ id: "last", label: "Nachname", half: true })),
      Field({ id: "street", label: "Straße & Hausnummer" }),
      k("div", { style: { display: "flex", gap: 14 } }, Field({ id: "zip", label: "PLZ", half: true }), Field({ id: "city", label: "Ort", half: true })),
      k("div", { className: "field filled" },
        k("input", { value: "Deutschland", readOnly: true }), k("label", null, "Land")),

      /* shipping */
      k("div", { className: "eyebrow gold", style: { margin: "26px 0 10px" } }, "03 — Versand"),
      k("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", border: "1px solid var(--ink)", padding: "14px 16px" } },
        k("div", { style: { display: "flex", alignItems: "center", gap: 12 } },
          k("span", { style: { width: 16, height: 16, borderRadius: "50%", border: "5px solid var(--ink)", boxShadow: "inset 0 0 0 2px var(--cream)" } }),
          k("div", null,
            k("div", { style: { fontSize: 13, letterSpacing: ".02em" } }, "Express · Luftfracht"),
            k("div", { className: "muted", style: { fontSize: 11 } }, "5–9 Werktage · zollfrei (IOSS)"))),
        k("span", { style: { fontSize: 13, letterSpacing: ".06em" } }, "Kostenlos")),

      /* payment */
      k("div", { className: "eyebrow gold", style: { margin: "26px 0 10px" } }, "04 — Zahlung"),
      k("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 } },
        k("div", { style: { fontSize: 12, letterSpacing: ".04em" } }, "Kreditkarte"),
        k("div", { className: "paymarks" }, k(PayVisa), k(PayMC))),
      k("div", { className: "field" + (f.card ? " filled" : "") },
        k("input", { id: "card", value: f.card || "", onChange: set("card"), placeholder: " ", inputMode: "numeric" }),
        k("label", { htmlFor: "card" }, "Kartennummer")),
      k("div", { style: { display: "flex", gap: 14 } },
        k("div", { className: "field" + (f.exp ? " filled" : ""), style: { flex: 1 } },
          k("input", { id: "exp", value: f.exp || "", onChange: set("exp"), placeholder: " " }),
          k("label", { htmlFor: "exp" }, "MM / JJ")),
        k("div", { className: "field" + (f.cvc ? " filled" : ""), style: { flex: 1 } },
          k("input", { id: "cvc", value: f.cvc || "", onChange: set("cvc"), placeholder: " " }),
          k("label", { htmlFor: "cvc" }, "CVC"))),

      /* summary */
      k("div", { style: { background: "var(--cream-2)", padding: 16, margin: "26px 0 18px" } },
        k("div", { style: { display: "flex", gap: 12, marginBottom: 12 } },
          k("div", { className: "ph has-img", style: { width: 54, height: 54, flex: "0 0 auto" } },
            k(PhImg, { src: IMG.thumb, alt: "Geometric Block" })),
          k("div", { style: { flex: 1 } },
            k("div", { className: "serif", style: { fontSize: 14 } }, "Geometric Block"),
            k("div", { className: "muted", style: { fontSize: 11 } }, `Menge ${Math.max(1, qty)} · Espresso-Schwarz`)),
          k("div", { className: "price", style: { fontSize: 14 } }, total)),
        k("div", { className: "rule", style: { margin: "10px 0" } }),
        k("div", { style: { ...rowS, fontSize: 12, color: "var(--ink-mute)" } }, k("span", null, "enth. MwSt. (19%)"), k("span", null, (5.57 * Math.max(1, qty)).toFixed(2).replace(".", ",") + " €")),
        k("div", { style: { ...rowS, fontSize: 12, color: "var(--ink-mute)" } }, k("span", null, "Versand"), k("span", null, "Kostenlos")),
        k("div", { className: "rule gold", style: { margin: "10px 0" } }),
        k("div", { style: rowS }, k("span", { className: "serif", style: { fontSize: 15 } }, "Gesamt"), k("span", { className: "price", style: { fontSize: 18 } }, total))),

      k("button", { className: "btn", onClick: () => onPlace("Kreditkarte") }, "Kostenpflichtig bestellen", k(Icon, { name: "lock", size: 14 })),
      k("div", { className: "paymarks", style: { justifyContent: "center", margin: "16px 0 8px" } },
        k(PayApple), k(PayPaypal), k(PayVisa), k(PayMC), k(PayKlarna)),
      k("p", { className: "muted center", style: { fontSize: 10.5, lineHeight: 1.6, letterSpacing: ".02em" } },
        "Mit der Bestellung akzeptieren Sie unsere AGB & Datenschutzbestimmungen. 14 Tage Widerrufsrecht.")));
}
function expressBtn(bg) {
  return { display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
    padding: "14px", background: bg, border: "0", borderRadius: 4 };
}

/* ---------------- Confirmation ---------------- */
function Confirm({ open, qty, onClose }) {
  const total = (34.9 * Math.max(1, qty)).toFixed(2).replace(".", ",") + " €";
  return k("div", { className: "route" + (open ? " show" : ""), style: { background: "var(--cream)" } },
    k("div", { className: "screen", style: { display: "flex", flexDirection: "column" } },
      k("div", { style: { background: "var(--ink)", color: "var(--cream)", padding: "60px 24px 50px", textAlign: "center" } },
        k("div", { style: { width: 56, height: 56, borderRadius: "50%", border: "1.5px solid var(--gold)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 24px" } },
          k(Icon, { name: "check", size: 26, color: "var(--gold)" })),
        k("div", { className: "eyebrow", style: { color: "var(--gold)", marginBottom: 14 } }, "Bestellung bestätigt"),
        k("h1", { className: "display", style: { fontSize: 30, fontStyle: "italic", margin: "0 0 14px" } }, "Vielen Dank."),
        k("p", { style: { fontSize: 13, lineHeight: 1.6, opacity: .8, maxWidth: 280, margin: "0 auto" } },
          "Ihre ANAYA N°1 ist auf dem Weg. Eine Bestätigung wurde an Ihre E-Mail gesendet.")),
      k("div", { style: { padding: "30px 24px", flex: 1 } },
        k("div", { style: { ...rowS, marginBottom: 8 } }, k("span", { className: "eyebrow" }, "Bestellnummer"), k("span", { style: { fontSize: 13, letterSpacing: ".08em" } }, "ANY-2026-0917")),
        k("div", { className: "rule", style: { margin: "16px 0" } }),
        k("div", { style: { display: "flex", gap: 14, alignItems: "center" } },
          k("div", { className: "ph has-img", style: { width: 64, height: 64, flex: "0 0 auto" } },
            k(PhImg, { src: IMG.thumb, alt: "Geometric Block" })),
          k("div", { style: { flex: 1 } },
            k("div", { className: "serif", style: { fontSize: 15 } }, "Geometric Block"),
            k("div", { className: "muted", style: { fontSize: 11 } }, `Menge ${Math.max(1, qty)}`)),
          k("div", { className: "price", style: { fontSize: 15 } }, total)),
        k("div", { className: "rule", style: { margin: "16px 0" } }),
        k("div", { style: { display: "flex", alignItems: "center", gap: 10, color: "var(--gold-deep)", fontSize: 12, marginBottom: 6 } },
          k(Icon, { name: "truck", size: 18 }), "Voraussichtliche Lieferung: 5–9 Werktage"),
        k("div", { style: { display: "flex", alignItems: "center", gap: 10, color: "var(--ink-mute)", fontSize: 12 } },
          k(Icon, { name: "shield", size: 18 }), "Zollfrei abgewickelt über IOSS")),
      k("div", { style: { padding: "0 24px 40px" } },
        k("button", { className: "btn ghost", onClick: onClose }, "Zurück zum Shop"))));
}

Object.assign(window, { Checkout, Confirm });