// One-page checkout + confirmation
function Checkout({ cart, onNav, onPlaced }) {
  const [ship, setShip] = useState("standard");
  const [pay, setPay] = useState("card");
  const [placed, setPlaced] = useState(false);
  const [order, setOrder] = useState(null);

  const subtotal = cart.reduce((s, i) => s + i.price * i.qty, 0);
  const shipCost = subtotal >= 60 || ship === "pickup" ? 0 : (ship === "express" ? 12 : 5.9);
  const total = subtotal + shipCost;

  const place = (e) => {
    e.preventDefault();
    setOrder({ no: "AG-" + Math.floor(10000 + Math.random() * 89999), items: cart, total });
    setPlaced(true);
    onPlaced();
    window.scrollTo({ top: 0 });
  };

  if (placed && order) {
    return (
      <section className="checkout">
        <div className="wrap">
          <div className="confirm">
            <div className="confirm__mark"><Icon name="check" size={40} /></div>
            <h1>Bestellung aufgegeben. Schön!</h1>
            <p>Danke für deine Bestellung. Wir packen deinen Garten gekühlt ein und schicken ihn los.</p>
            <div className="confirm__order">Bestellnummer {order.no}</div>
            <p style={{ fontSize: 14 }}>Eine Bestätigung ist auf dem Weg in dein Postfach. Lieferung in 1–2 Tagen.</p>
            <div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 26 }}>
              <Button variant="primary" size="lg" onClick={() => onNav("account")}>Bestellung verfolgen</Button>
              <Button variant="secondary" size="lg" onClick={() => onNav("collection")}>Weiter stöbern</Button>
            </div>
          </div>
        </div>
      </section>
    );
  }

  if (cart.length === 0) {
    return (
      <section className="checkout">
        <div className="wrap">
          <div className="confirm">
            <h1>Dein Warenkorb ist leer.</h1>
            <p>Leg ein paar Flaschen in den Korb, dann geht's hier weiter.</p>
            <div style={{ marginTop: 24 }}><Button variant="primary" size="lg" onClick={() => onNav("collection")}>Garten entdecken</Button></div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="checkout">
      <div className="wrap">
        <div className="checkout__steps">
          <span onClick={() => onNav("collection")} style={{ cursor: "pointer" }}>Warenkorb</span>
          <span className="sep">→</span><span className="on">Kasse</span>
          <span className="sep">→</span><span>Bestätigt</span>
        </div>
        <h1 className="page-h1">Zur Kasse</h1>
        <form className="checkout__grid" onSubmit={place}>
          <div>
            <div className="cblock">
              <h3><span className="num">1</span> Kontakt</h3>
              <div className="fgrid">
                <input className="field full" type="email" placeholder="E-Mail" required />
              </div>
            </div>
            <div className="cblock">
              <h3><span className="num">2</span> Lieferadresse</h3>
              <div className="fgrid">
                <input className="field" placeholder="Vorname" required />
                <input className="field" placeholder="Nachname" required />
                <input className="field full" placeholder="Strasse und Nr." required />
                <input className="field" placeholder="PLZ" required />
                <input className="field" placeholder="Ort" required />
                <select className="field full" defaultValue="CH"><option value="CH">Schweiz</option><option value="LI">Liechtenstein</option></select>
              </div>
            </div>
            <div className="cblock">
              <h3><span className="num">3</span> Versand</h3>
              <div className="radio-row">
                <label className={`radio${ship === "standard" ? " on" : ""}`} onClick={() => setShip("standard")}>
                  <span className="dot"></span>
                  <span className="label"><b>Standard</b><span>1–2 Werktage · gekühlt</span></span>
                  <span className="price">{subtotal >= 60 ? "Gratis" : "CHF 5.90"}</span>
                </label>
                <label className={`radio${ship === "express" ? " on" : ""}`} onClick={() => setShip("express")}>
                  <span className="dot"></span>
                  <span className="label"><b>Express</b><span>Morgen geliefert</span></span>
                  <span className="price">CHF 12.–</span>
                </label>
                <label className={`radio${ship === "pickup" ? " on" : ""}`} onClick={() => setShip("pickup")}>
                  <span className="dot"></span>
                  <span className="label"><b>Abholung Zürich</b><span>Im Lager, kostenlos</span></span>
                  <span className="price">Gratis</span>
                </label>
              </div>
            </div>
            <div className="cblock">
              <h3><span className="num">4</span> Zahlung</h3>
              <div className="radio-row">
                <label className={`radio${pay === "card" ? " on" : ""}`} onClick={() => setPay("card")}>
                  <span className="dot"></span><span className="label"><b>Karte</b><span>Visa, Mastercard, Amex</span></span><Icon name="credit-card" size={20} color="var(--fg-3)" />
                </label>
                <label className={`radio${pay === "twint" ? " on" : ""}`} onClick={() => setPay("twint")}>
                  <span className="dot"></span><span className="label"><b>TWINT</b><span>Mit dem Handy zahlen</span></span><Icon name="smartphone" size={20} color="var(--fg-3)" />
                </label>
                <label className={`radio${pay === "invoice" ? " on" : ""}`} onClick={() => setPay("invoice")}>
                  <span className="dot"></span><span className="label"><b>Rechnung</b><span>14 Tage, zahlbar per E-Banking</span></span><Icon name="file-text" size={20} color="var(--fg-3)" />
                </label>
              </div>
            </div>
          </div>

          <aside className="summary">
            <h3>Deine Bestellung</h3>
            {cart.map((i) => (
              <div className="sitem" key={i.id}>
                <div className="m" style={!i.image ? { background: i.media } : undefined}>
                  {i.image ? <img className="product-photo" src={i.image} alt={i.name} loading="lazy" /> : <div className="b" style={{ background: i.bottle }}></div>}
                  <span className="q">{i.qty}</span>
                </div>
                <div className="i"><h4>{i.name}</h4><div className="meta">{i.category} · {i.character}</div></div>
                <span className="price" style={{ fontSize: 13 }}>{money(i.price * i.qty)}</span>
              </div>
            ))}
            <div className="promo">
              <input className="field" placeholder="Gutscheincode" />
              <Button variant="secondary" size="md" type="button">Einlösen</Button>
            </div>
            <div className="summary__row"><span>Zwischensumme</span><span className="price">{money(subtotal)}</span></div>
            <div className="summary__row"><span>Versand</span><span>{shipCost === 0 ? "Gratis" : money(shipCost)}</span></div>
            <div className="summary__row total"><span>Total</span><span className="price">{money(total)}</span></div>
            <Button variant="primary" size="lg" block type="submit">Bestellung abschliessen</Button>
            <p style={{ textAlign: "center", fontSize: 12, color: "var(--fg-3)", margin: "12px 0 0", display: "flex", gap: 6, alignItems: "center", justifyContent: "center" }}>
              <Icon name="lock" size={13} /> Sichere Zahlung · Inkl. MwSt.
            </p>
          </aside>
        </form>
      </div>
    </section>
  );
}
Object.assign(window, { Checkout });