/* global React, Icons */
const { useState: useStateC, useMemo: useMemoC, useEffect: useEffectC } = React;

// ─── CART PAGE ─────────────────────────────────────────────
function CartPage() {
  const { cartLines, cartCount, cartSubtotal, shippingFee, cartTotal, updateQty, removeLine, formatIDR, FREE_SHIPPING_THRESHOLD } = useStore();
  const { navigate } = useRouter();
  const [promo, setPromo] = useStateC("");
  const [promoApplied, setPromoApplied] = useStateC(false);

  const discount = promoApplied ? Math.round(cartSubtotal * 0.10) : 0;
  const grandTotal = Math.max(0, cartTotal - discount);
  const remainingFreeShip = Math.max(0, FREE_SHIPPING_THRESHOLD - cartSubtotal);
  const progress = Math.min(100, (cartSubtotal / FREE_SHIPPING_THRESHOLD) * 100);

  if (cartCount === 0) {
    return React.createElement("div", { className: "container page fade-in", style: { textAlign: "center", maxWidth: 500 } },
      React.createElement("div", { style: { width: 72, height: 72, borderRadius: 9999, background: "var(--graycool-50)", display: "grid", placeItems: "center", margin: "32px auto 20px", color: "var(--graycool-400)" } },
        React.createElement(Icons.ShoppingBag, { size: 32 })
      ),
      React.createElement("h1", { className: "section-title" }, "Your bag is empty"),
      React.createElement("p", { style: { color: "var(--graycool-600)", margin: "12px 0 24px" } }, "Start adding pieces you love — we'll keep them here while you browse."),
      React.createElement(Button, { variant: "primary", size: "xl", onClick: () => navigate("/shop"), iconRight: React.createElement(Icons.ArrowRight, { size: 16 }) }, "Start shopping")
    );
  }

  return React.createElement("div", { className: "container page fade-in" },
    React.createElement(Breadcrumbs, { items: [{ to: "/", label: "Home" }, { label: "Bag" }] }),
    React.createElement("h1", { className: "section-title", style: { margin: "20px 0 8px" } }, "Your bag"),
    React.createElement("p", { style: { color: "var(--graycool-600)", marginBottom: 32 } }, cartCount, " item", cartCount === 1 ? "" : "s"),

    React.createElement("div", { style: { display: "grid", gap: 32, gridTemplateColumns: "1fr" } },
      React.createElement("div", null,
        // Free shipping progress
        React.createElement("div", { className: "card-flat", style: { padding: 16, marginBottom: 20, display: "flex", alignItems: "center", gap: 12 } },
          React.createElement(Icons.Truck, { size: 18, style: { color: remainingFreeShip === 0 ? "var(--success-600)" : "var(--brand-500)" } }),
          React.createElement("div", { style: { flex: 1 } },
            React.createElement("div", { style: { fontSize: 13, fontWeight: 500, marginBottom: 6 } },
              remainingFreeShip === 0 ? "You've unlocked free express shipping." : `Add ${formatIDR(remainingFreeShip)} more for free express shipping.`
            ),
            React.createElement("div", { style: { height: 4, background: "var(--graycool-100)", borderRadius: 9999, overflow: "hidden" } },
              React.createElement("div", { style: { height: "100%", width: progress + "%", background: "var(--brand-400)", transition: "width 400ms" } })
            )
          )
        ),
        // LINES
        React.createElement("div", { className: "card", style: { padding: 0, overflow: "hidden" } },
          cartLines.map((line, i) =>
            React.createElement("div", { key: line.key, style: { display: "flex", gap: 16, padding: 20, borderTop: i === 0 ? "none" : "1px solid var(--graycool-100)" } },
              React.createElement("div", { style: { width: 92, flexShrink: 0, aspectRatio: "4/5", borderRadius: 10, overflow: "hidden", background: "var(--graycool-50)", cursor: "pointer" }, onClick: () => navigate(`/product/${line.product.id}`) },
                React.createElement("img", { src: line.product.images[0], style: { width: "100%", height: "100%", objectFit: "cover" } })
              ),
              React.createElement("div", { style: { flex: 1, minWidth: 0 } },
                React.createElement("div", { style: { display: "flex", justifyContent: "space-between", gap: 12 } },
                  React.createElement("div", null,
                    React.createElement("div", { style: { fontSize: 12, color: "var(--graycool-500)" } }, line.product.category),
                    React.createElement("div", { style: { fontSize: 15, fontWeight: 500, marginTop: 2, cursor: "pointer" }, onClick: () => navigate(`/product/${line.product.id}`) }, line.product.name),
                    React.createElement("div", { style: { fontSize: 13, color: "var(--graycool-500)", marginTop: 4, display: "flex", gap: 12 } },
                      line.color && React.createElement("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 } },
                        React.createElement("span", { style: { width: 10, height: 10, borderRadius: 9999, background: line.color.hex, border: "1px solid rgba(0,0,0,0.1)" } }),
                        line.color.name
                      ),
                      line.size && React.createElement("span", null, "Size ", line.size)
                    )
                  ),
                  React.createElement("div", { style: { textAlign: "right" } },
                    React.createElement("div", { style: { fontSize: 15, fontWeight: 600 } }, formatIDR(line.product.price * line.qty)),
                    line.qty > 1 && React.createElement("div", { style: { fontSize: 12, color: "var(--graycool-500)" } }, formatIDR(line.product.price), " each")
                  )
                ),
                React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 14 } },
                  React.createElement(Stepper, { value: line.qty, onChange: (v) => updateQty(line.key, v), max: line.product.stock }),
                  React.createElement(Button, { variant: "ghost", size: "sm", onClick: () => removeLine(line.key), icon: React.createElement(Icons.Trash, { size: 14 }) }, "Remove")
                )
              )
            )
          )
        ),
        React.createElement("div", { style: { marginTop: 16 } },
          React.createElement(Button, { variant: "ghost", size: "sm", onClick: () => navigate("/shop"), icon: React.createElement(Icons.ArrowLeft, { size: 14 }) }, "Continue shopping")
        )
      ),
      // SUMMARY
      React.createElement("aside", null,
        React.createElement("div", { className: "card", style: { padding: 24, position: "sticky", top: 100 } },
          React.createElement("h3", { style: { fontSize: 18, fontWeight: 600, margin: "0 0 16px" } }, "Order summary"),
          // Promo
          React.createElement("div", { style: { marginBottom: 20 } },
            React.createElement("label", { style: { fontSize: 13, fontWeight: 500, color: "var(--graycool-700)", display: "block", marginBottom: 6 } }, "Promo code"),
            promoApplied
              ? React.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 12px", background: "var(--success-50)", border: "1px solid var(--success-200)", borderRadius: 6 } },
                  React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: "var(--success-700)", fontWeight: 500 } },
                    React.createElement(Icons.Tag, { size: 14 }),
                    "FIRST10 applied · 10% off"
                  ),
                  React.createElement("button", { onClick: () => { setPromoApplied(false); setPromo(""); }, style: { background: "transparent", border: 0, color: "var(--success-700)", cursor: "pointer" } }, React.createElement(Icons.X, { size: 14 }))
                )
              : React.createElement("div", { style: { display: "flex", gap: 8 } },
                  React.createElement("input", { className: "input", placeholder: "Try FIRST10", value: promo, onChange: (e) => setPromo(e.target.value.toUpperCase()) }),
                  React.createElement(Button, { variant: "secondary", onClick: () => { if (promo === "FIRST10") setPromoApplied(true); else alert("Invalid promo code"); } }, "Apply")
                )
          ),
          // Totals
          React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 10, fontSize: 14, marginBottom: 16 } },
            React.createElement("div", { style: { display: "flex", justifyContent: "space-between" } },
              React.createElement("span", { style: { color: "var(--graycool-600)" } }, "Subtotal"),
              React.createElement("span", null, formatIDR(cartSubtotal))
            ),
            React.createElement("div", { style: { display: "flex", justifyContent: "space-between" } },
              React.createElement("span", { style: { color: "var(--graycool-600)" } }, "Shipping"),
              React.createElement("span", null, shippingFee === 0 ? "Free" : formatIDR(shippingFee))
            ),
            promoApplied && React.createElement("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--success-700)" } },
              React.createElement("span", null, "Discount (FIRST10)"),
              React.createElement("span", null, "−", formatIDR(discount))
            )
          ),
          React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "baseline", padding: "16px 0", borderTop: "1px solid var(--graycool-100)" } },
            React.createElement("span", { style: { fontWeight: 600 } }, "Total"),
            React.createElement("span", { style: { fontSize: 22, fontWeight: 600 } }, formatIDR(grandTotal))
          ),
          React.createElement(Button, {
            variant: "primary", size: "xl", block: true,
            onClick: () => navigate("/checkout"),
            iconRight: React.createElement(Icons.ArrowRight, { size: 16 }),
          }, "Checkout"),
          React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6, justifyContent: "center", fontSize: 12, color: "var(--graycool-500)", marginTop: 12 } },
            React.createElement(Icons.Lock, { size: 12 }), "Secure SSL checkout"
          )
        )
      ),
      React.createElement("style", null, `@media (min-width: 900px) { .container.page > div[style*="grid-template-columns: 1fr"] { grid-template-columns: 1.5fr 1fr !important; gap: 48px !important; } }`)
    )
  );
}

// ─── CHECKOUT PAGE (shipping info) ─────────────────────────
function CheckoutPage() {
  const { cartLines, cartCount, cartSubtotal, shippingFee, cartTotal, user, address, setOrderAddress, formatIDR } = useStore();
  const { navigate } = useRouter();
  const [form, setForm] = useStateC(address || {
    email: user?.email || "", firstName: user?.name?.split(" ")[0] || "", lastName: "",
    phone: "", addr1: "", addr2: "", city: "", province: "DKI Jakarta", postcode: "", notes: "",
    method: "express",
  });
  const [errors, setErrors] = useStateC({});

  useEffectC(() => { if (cartCount === 0) navigate("/cart"); }, [cartCount]);

  const methodFee = form.method === "express" ? (shippingFee) : (cartSubtotal >= 1000000 ? 0 : 18000);
  const methodTotal = cartSubtotal + methodFee;

  const validate = () => {
    const e = {};
    ["email", "firstName", "lastName", "phone", "addr1", "city", "postcode"].forEach((k) => {
      if (!form[k] || !form[k].trim()) e[k] = "Required";
    });
    if (form.email && !/^\S+@\S+\.\S+$/.test(form.email)) e.email = "Not a valid email";
    if (form.phone && !/^[0-9+\- ]{8,}$/.test(form.phone)) e.phone = "Not a valid phone";
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = (ev) => {
    ev.preventDefault();
    if (!validate()) { window.scrollTo({ top: 200, behavior: "smooth" }); return; }
    setOrderAddress(form);
    navigate("/payment");
  };

  const provinces = ["DKI Jakarta", "Jawa Barat", "Jawa Tengah", "Jawa Timur", "Bali", "Banten", "DI Yogyakarta", "Sumatra Utara"];

  const field = (name, label, extra = {}) =>
    React.createElement("div", { className: "field" },
      React.createElement("label", null, label),
      React.createElement("input", {
        className: "input" + (errors[name] ? " error" : ""),
        value: form[name], onChange: (e) => setForm({ ...form, [name]: e.target.value }),
        ...extra,
      }),
      errors[name] && React.createElement("div", { className: "err" }, React.createElement(Icons.AlertCircle, { size: 12 }), errors[name])
    );

  return React.createElement("div", { className: "container page fade-in" },
    // Stepper
    React.createElement(CheckoutSteps, { active: 1 }),
    React.createElement("form", { onSubmit: submit, style: { display: "grid", gap: 32, gridTemplateColumns: "1fr", marginTop: 32 } },
      React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 24 } },
        // Contact
        React.createElement("section", { className: "card", style: { padding: 28 } },
          React.createElement(SectionHead, { step: 1, title: "Contact" }),
          React.createElement("div", { style: { display: "grid", gap: 16, gridTemplateColumns: "1fr" } },
            field("email", "Email"),
            field("phone", "Phone", { placeholder: "+62 812 3456 7890" }),
          )
        ),
        // Shipping
        React.createElement("section", { className: "card", style: { padding: 28 } },
          React.createElement(SectionHead, { step: 2, title: "Shipping address" }),
          React.createElement("div", { style: { display: "grid", gap: 16, gridTemplateColumns: "1fr 1fr" } },
            field("firstName", "First name"),
            field("lastName", "Last name"),
          ),
          React.createElement("div", { style: { display: "grid", gap: 16, marginTop: 16 } },
            field("addr1", "Street address"),
            field("addr2", "Apartment, suite, etc. (optional)"),
          ),
          React.createElement("div", { style: { display: "grid", gap: 16, gridTemplateColumns: "2fr 2fr 1fr", marginTop: 16 } },
            field("city", "City"),
            React.createElement("div", { className: "field" },
              React.createElement("label", null, "Province"),
              React.createElement("select", { className: "input", value: form.province, onChange: (e) => setForm({ ...form, province: e.target.value }) },
                provinces.map((p) => React.createElement("option", { key: p }, p))
              )
            ),
            field("postcode", "Postal code"),
          ),
          React.createElement("div", { className: "field", style: { marginTop: 16 } },
            React.createElement("label", null, "Delivery notes (optional)"),
            React.createElement("textarea", {
              className: "input", rows: 2, placeholder: "Gate code, leave with concierge, etc.",
              value: form.notes, onChange: (e) => setForm({ ...form, notes: e.target.value }),
            })
          )
        ),
        // Shipping method
        React.createElement("section", { className: "card", style: { padding: 28 } },
          React.createElement(SectionHead, { step: 3, title: "Shipping method" }),
          React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 10 } },
            [
              { id: "express", label: "Express (JNE YES)", eta: "1–2 days", fee: cartSubtotal >= 1000000 ? 0 : 35000 },
              { id: "regular", label: "Regular (J&T)", eta: "3–5 days", fee: cartSubtotal >= 1000000 ? 0 : 18000 },
              { id: "pickup", label: "Store pickup — Bandung", eta: "Same day", fee: 0 },
            ].map((m) =>
              React.createElement("label", {
                key: m.id,
                style: {
                  display: "flex", alignItems: "center", gap: 12, padding: 14,
                  border: form.method === m.id ? "1.5px solid var(--brand-400)" : "1px solid var(--graycool-200)",
                  borderRadius: 10, cursor: "pointer",
                  background: form.method === m.id ? "var(--brand-25)" : "#fff",
                }
              },
                React.createElement("input", { type: "radio", name: "method", checked: form.method === m.id, onChange: () => setForm({ ...form, method: m.id }), style: { accentColor: "var(--brand-500)" } }),
                React.createElement("div", { style: { flex: 1 } },
                  React.createElement("div", { style: { fontSize: 14, fontWeight: 500 } }, m.label),
                  React.createElement("div", { style: { fontSize: 12, color: "var(--graycool-500)" } }, m.eta)
                ),
                React.createElement("div", { style: { fontWeight: 600, fontSize: 14 } }, m.fee === 0 ? "Free" : formatIDR(m.fee))
              )
            )
          )
        ),
        React.createElement("div", { style: { display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12 } },
          React.createElement(Button, { variant: "ghost", onClick: () => navigate("/cart"), icon: React.createElement(Icons.ArrowLeft, { size: 14 }), type: "button" }, "Back to bag"),
          React.createElement(Button, { variant: "primary", size: "xl", type: "submit", iconRight: React.createElement(Icons.ArrowRight, { size: 16 }) }, "Continue to payment")
        )
      ),
      // SUMMARY
      React.createElement("aside", null, React.createElement(OrderSummary, { compact: true, overrideShipping: methodFee })),
      React.createElement("style", null, `@media (min-width: 900px) { .container.page > form { grid-template-columns: 1.6fr 1fr !important; gap: 48px !important; } }`)
    )
  );
}

// ─── PAYMENT PAGE ──────────────────────────────────────────
function PaymentPage() {
  const { cartLines, cartCount, cartSubtotal, shippingFee, address, placeOrder, formatIDR } = useStore();
  const { navigate } = useRouter();
  const [method, setMethod] = useStateC("card");
  const [card, setCard] = useStateC({ number: "", name: "", exp: "", cvc: "", save: true });
  const [bank, setBank] = useStateC("bca");
  const [wallet, setWallet] = useStateC("gopay");
  const [processing, setProcessing] = useStateC(false);
  const [errors, setErrors] = useStateC({});

  useEffectC(() => {
    if (cartCount === 0) navigate("/cart");
    if (!address) navigate("/checkout");
  }, [cartCount, address]);

  const pay = () => {
    const e = {};
    if (method === "card") {
      if (!/^\d{13,19}$/.test(card.number.replace(/\s/g, ""))) e.number = "Enter a valid card number";
      if (!card.name.trim()) e.name = "Name on card";
      if (!/^\d{2}\/\d{2}$/.test(card.exp)) e.exp = "MM/YY";
      if (!/^\d{3,4}$/.test(card.cvc)) e.cvc = "3–4 digits";
    }
    setErrors(e);
    if (Object.keys(e).length) return;
    setProcessing(true);
    setTimeout(() => {
      const order = placeOrder({
        shippingAddress: address,
        paymentMethod: method === "card" ? "Credit card" : method === "bank" ? `Bank transfer · ${bank.toUpperCase()}` : method === "wallet" ? `E-wallet · ${wallet.toUpperCase()}` : "QRIS",
        paymentRef: method === "card" ? `•••• ${card.number.replace(/\s/g,'').slice(-4)}` : null,
        subtotal: cartSubtotal, shipping: shippingFee, total: cartSubtotal + shippingFee,
      });
      navigate(`/confirmation/${order.id}`);
    }, 1400);
  };

  const formatCard = (v) => v.replace(/\D/g, "").slice(0, 19).replace(/(.{4})/g, "$1 ").trim();
  const formatExp = (v) => {
    const n = v.replace(/\D/g, "").slice(0, 4);
    return n.length > 2 ? n.slice(0, 2) + "/" + n.slice(2) : n;
  };

  return React.createElement("div", { className: "container page fade-in" },
    React.createElement(CheckoutSteps, { active: 2 }),
    React.createElement("div", { style: { display: "grid", gap: 32, gridTemplateColumns: "1fr", marginTop: 32 } },
      React.createElement("div", null,
        // Method tabs
        React.createElement("section", { className: "card", style: { padding: 28, marginBottom: 24 } },
          React.createElement(SectionHead, { step: 1, title: "Payment method" }),
          React.createElement("div", { style: { display: "grid", gap: 10, gridTemplateColumns: "repeat(2, 1fr)" } },
            [
              { id: "card", I: Icons.CreditCard, label: "Credit / debit card", sub: "Visa, Mastercard, JCB" },
              { id: "wallet", I: Icons.Phone, label: "E-wallet", sub: "GoPay, OVO, DANA, ShopeePay" },
              { id: "bank", I: Icons.Package, label: "Bank transfer", sub: "BCA, Mandiri, BNI, BRI" },
              { id: "qris", I: Icons.Sparkles, label: "QRIS", sub: "Scan & pay with any app" },
            ].map((m) =>
              React.createElement("button", {
                key: m.id, type: "button",
                onClick: () => setMethod(m.id),
                style: {
                  display: "flex", alignItems: "center", gap: 12, padding: 16,
                  border: method === m.id ? "1.5px solid var(--brand-400)" : "1px solid var(--graycool-200)",
                  borderRadius: 10, background: method === m.id ? "var(--brand-25)" : "#fff",
                  cursor: "pointer", textAlign: "left",
                }
              },
                React.createElement("div", { style: { width: 40, height: 40, borderRadius: 8, background: method === m.id ? "var(--brand-100)" : "var(--graycool-50)", color: method === m.id ? "var(--brand-600)" : "var(--graycool-600)", display: "grid", placeItems: "center", flexShrink: 0 } },
                  React.createElement(m.I, { size: 18 })
                ),
                React.createElement("div", null,
                  React.createElement("div", { style: { fontSize: 14, fontWeight: 500, color: "var(--graycool-900)" } }, m.label),
                  React.createElement("div", { style: { fontSize: 12, color: "var(--graycool-500)" } }, m.sub)
                )
              )
            )
          )
        ),

        // Method-specific body
        React.createElement("section", { className: "card", style: { padding: 28, marginBottom: 24 } },
          method === "card" && React.createElement(React.Fragment, null,
            React.createElement(SectionHead, { step: 2, title: "Card details" }),
            React.createElement("div", { style: { display: "grid", gap: 16, gridTemplateColumns: "1fr" } },
              React.createElement("div", { className: "field" },
                React.createElement("label", null, "Card number"),
                React.createElement("div", { className: "input-group" + (errors.number ? " input-group--error" : "") },
                  React.createElement("span", { className: "addon" }, React.createElement(Icons.CreditCard, { size: 16 })),
                  React.createElement("input", { className: "input", placeholder: "4242 4242 4242 4242", value: card.number, onChange: (e) => setCard({ ...card, number: formatCard(e.target.value) }) })
                ),
                errors.number && React.createElement("div", { className: "err" }, React.createElement(Icons.AlertCircle, { size: 12 }), errors.number)
              ),
              React.createElement("div", { className: "field" },
                React.createElement("label", null, "Name on card"),
                React.createElement("input", { className: "input" + (errors.name ? " error" : ""), value: card.name, onChange: (e) => setCard({ ...card, name: e.target.value }) }),
                errors.name && React.createElement("div", { className: "err" }, errors.name)
              ),
              React.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 } },
                React.createElement("div", { className: "field" },
                  React.createElement("label", null, "Expiry"),
                  React.createElement("input", { className: "input" + (errors.exp ? " error" : ""), placeholder: "MM/YY", value: card.exp, onChange: (e) => setCard({ ...card, exp: formatExp(e.target.value) }) }),
                  errors.exp && React.createElement("div", { className: "err" }, errors.exp)
                ),
                React.createElement("div", { className: "field" },
                  React.createElement("label", null, "CVC"),
                  React.createElement("input", { className: "input" + (errors.cvc ? " error" : ""), placeholder: "123", value: card.cvc, onChange: (e) => setCard({ ...card, cvc: e.target.value.replace(/\D/g,'').slice(0,4) }) }),
                  errors.cvc && React.createElement("div", { className: "err" }, errors.cvc)
                )
              ),
              React.createElement("label", { style: { display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: "var(--graycool-700)", cursor: "pointer" } },
                React.createElement("input", { type: "checkbox", checked: card.save, onChange: (e) => setCard({ ...card, save: e.target.checked }) }),
                "Save this card securely for next time"
              )
            )
          ),
          method === "wallet" && React.createElement(React.Fragment, null,
            React.createElement(SectionHead, { step: 2, title: "Choose your e-wallet" }),
            React.createElement("div", { style: { display: "grid", gap: 10, gridTemplateColumns: "repeat(2, 1fr)" } },
              [
                { id: "gopay", label: "GoPay", color: "#00AED6" },
                { id: "ovo", label: "OVO", color: "#4C2A86" },
                { id: "dana", label: "DANA", color: "#118EEA" },
                { id: "shopeepay", label: "ShopeePay", color: "#EE4D2D" },
              ].map((w) =>
                React.createElement("label", {
                  key: w.id,
                  style: {
                    display: "flex", alignItems: "center", gap: 12, padding: 14,
                    border: wallet === w.id ? "1.5px solid var(--brand-400)" : "1px solid var(--graycool-200)",
                    borderRadius: 10, cursor: "pointer",
                    background: wallet === w.id ? "var(--brand-25)" : "#fff",
                  }
                },
                  React.createElement("input", { type: "radio", name: "wallet", checked: wallet === w.id, onChange: () => setWallet(w.id) }),
                  React.createElement("div", { style: { width: 36, height: 36, borderRadius: 8, background: w.color, color: "#fff", display: "grid", placeItems: "center", fontSize: 11, fontWeight: 700, letterSpacing: "0.04em" } }, w.label.slice(0,2).toUpperCase()),
                  React.createElement("div", { style: { fontWeight: 500 } }, w.label),
                )
              )
            ),
            React.createElement("p", { style: { marginTop: 16, fontSize: 13, color: "var(--graycool-500)" } }, "You'll be redirected to your wallet to approve the payment.")
          ),
          method === "bank" && React.createElement(React.Fragment, null,
            React.createElement(SectionHead, { step: 2, title: "Choose your bank" }),
            React.createElement("div", { style: { display: "grid", gap: 10 } },
              [
                { id: "bca", label: "BCA Virtual Account", sub: "Transfer from any BCA channel" },
                { id: "mandiri", label: "Mandiri Virtual Account", sub: "Livin', ATM, or e-Banking" },
                { id: "bni", label: "BNI Virtual Account", sub: "Wondr by BNI or ATM" },
                { id: "bri", label: "BRI Virtual Account", sub: "BRImo, ATM, or e-Banking" },
              ].map((b) =>
                React.createElement("label", {
                  key: b.id,
                  style: {
                    display: "flex", alignItems: "center", gap: 12, padding: 14,
                    border: bank === b.id ? "1.5px solid var(--brand-400)" : "1px solid var(--graycool-200)",
                    borderRadius: 10, cursor: "pointer",
                    background: bank === b.id ? "var(--brand-25)" : "#fff",
                  }
                },
                  React.createElement("input", { type: "radio", name: "bank", checked: bank === b.id, onChange: () => setBank(b.id) }),
                  React.createElement("div", { style: { flex: 1 } },
                    React.createElement("div", { style: { fontSize: 14, fontWeight: 500 } }, b.label),
                    React.createElement("div", { style: { fontSize: 12, color: "var(--graycool-500)" } }, b.sub)
                  ),
                )
              )
            ),
            React.createElement("div", { style: { marginTop: 16, padding: 12, background: "var(--warning-50)", border: "1px solid var(--warning-200)", borderRadius: 8, display: "flex", gap: 10, fontSize: 13, color: "var(--warning-800)" } },
              React.createElement(Icons.Clock, { size: 16, style: { flexShrink: 0, marginTop: 1 } }),
              "Complete your transfer within 24 hours or your order will be auto-cancelled."
            )
          ),
          method === "qris" && React.createElement(React.Fragment, null,
            React.createElement(SectionHead, { step: 2, title: "Pay with QRIS" }),
            React.createElement("div", { style: { display: "flex", gap: 24, alignItems: "center", flexWrap: "wrap" } },
              React.createElement("div", { style: { width: 200, height: 200, borderRadius: 12, padding: 14, background: "#fff", border: "1px solid var(--graycool-200)" } },
                React.createElement(QRPlaceholder, null)
              ),
              React.createElement("div", { style: { flex: 1, minWidth: 220 } },
                React.createElement("p", { style: { fontSize: 14, lineHeight: "22px", color: "var(--graycool-700)", margin: 0 } },
                  "Scan this code with any e-wallet or mobile banking app that supports QRIS — GoPay, OVO, DANA, ShopeePay, Livin', BRImo, Wondr, and more."),
                React.createElement("div", { style: { marginTop: 16, padding: "10px 14px", background: "var(--graycool-50)", borderRadius: 8, display: "inline-flex", alignItems: "center", gap: 8 } },
                  React.createElement(Icons.Clock, { size: 14, style: { color: "var(--graycool-500)" } }),
                  React.createElement("span", { style: { fontSize: 13, fontFamily: "var(--font-mono)" } }, "Expires in 14:59")
                )
              )
            )
          )
        ),

        // Billing
        React.createElement("section", { className: "card", style: { padding: 28, marginBottom: 24 } },
          React.createElement(SectionHead, { step: 3, title: "Billing" }),
          React.createElement("label", { style: { display: "flex", alignItems: "center", gap: 8, fontSize: 14 } },
            React.createElement("input", { type: "checkbox", defaultChecked: true }),
            "Billing address same as shipping"
          ),
          address && React.createElement("div", { style: { marginTop: 16, padding: 14, background: "var(--graycool-50)", borderRadius: 8, fontSize: 13, color: "var(--graycool-700)", lineHeight: "20px" } },
            React.createElement("div", { style: { fontWeight: 600, color: "var(--graycool-900)", marginBottom: 4 } }, address.firstName, " ", address.lastName),
            address.addr1, address.addr2 && `, ${address.addr2}`, React.createElement("br"),
            address.city, ", ", address.province, " ", address.postcode, React.createElement("br"),
            address.phone
          )
        ),

        React.createElement("div", { style: { display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12 } },
          React.createElement(Button, { variant: "ghost", onClick: () => navigate("/checkout"), icon: React.createElement(Icons.ArrowLeft, { size: 14 }) }, "Back to shipping"),
          React.createElement(Button, { variant: "primary", size: "xl", onClick: pay, disabled: processing, icon: !processing && React.createElement(Icons.Lock, { size: 16 }) },
            processing ? "Processing…" : `Pay ${formatIDR(cartSubtotal + shippingFee)}`
          )
        )
      ),
      React.createElement("aside", null, React.createElement(OrderSummary, { compact: true })),
      React.createElement("style", null, `@media (min-width: 900px) { .container.page > div[style*="grid-template-columns: 1fr"] { grid-template-columns: 1.6fr 1fr !important; gap: 48px !important; } }`)
    )
  );
}

// ─── ORDER CONFIRMATION ────────────────────────────────────
function ConfirmationPage() {
  const { orders, formatIDR } = useStore();
  const { parts, navigate } = useRouter();
  const id = parts[1];
  const order = orders.find((o) => o.id === id) || orders[0];

  if (!order) {
    return React.createElement("div", { className: "container page", style: { textAlign: "center" } },
      React.createElement("h2", null, "No order found"),
      React.createElement(Button, { variant: "primary", onClick: () => navigate("/") }, "Back to home")
    );
  }

  const eta = new Date(Date.now() + 2 * 24 * 3600 * 1000).toLocaleDateString("id-ID", { weekday: "long", day: "numeric", month: "long" });

  return React.createElement("div", { className: "container page fade-in", style: { maxWidth: 760 } },
    React.createElement("div", { style: { textAlign: "center", marginBottom: 40 } },
      React.createElement("div", { style: { width: 72, height: 72, borderRadius: 9999, background: "var(--success-50)", color: "var(--success-600)", display: "grid", placeItems: "center", margin: "0 auto 20px" } },
        React.createElement(Icons.CheckCircle, { size: 36 })
      ),
      React.createElement("h1", { className: "section-title" }, "Thank you for your order."),
      React.createElement("p", { style: { color: "var(--graycool-600)", margin: "12px 0 0" } },
        "A confirmation has been sent to ", React.createElement("strong", null, order.shippingAddress.email), "."
      )
    ),
    // Order card
    React.createElement("div", { className: "card", style: { padding: 28, marginBottom: 24 } },
      React.createElement("div", { style: { display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16, paddingBottom: 20, borderBottom: "1px solid var(--graycool-100)" } },
        React.createElement("div", null,
          React.createElement("div", { style: { fontSize: 12, color: "var(--graycool-500)" } }, "Order number"),
          React.createElement("div", { style: { fontFamily: "var(--font-mono)", fontSize: 15, fontWeight: 600, marginTop: 2 } }, order.id)
        ),
        React.createElement("div", null,
          React.createElement("div", { style: { fontSize: 12, color: "var(--graycool-500)" } }, "Estimated arrival"),
          React.createElement("div", { style: { fontSize: 15, fontWeight: 600, marginTop: 2 } }, eta)
        ),
        React.createElement("div", null,
          React.createElement("div", { style: { fontSize: 12, color: "var(--graycool-500)" } }, "Payment"),
          React.createElement("div", { style: { fontSize: 15, fontWeight: 600, marginTop: 2 } }, order.paymentMethod, order.paymentRef ? ` ${order.paymentRef}` : "")
        )
      ),
      // Items
      React.createElement("div", { style: { paddingTop: 20, display: "flex", flexDirection: "column", gap: 14 } },
        order.items.map((line) => {
          const p = window.PRODUCTS.find((x) => x.id === line.id);
          if (!p) return null;
          return React.createElement("div", { key: line.key, style: { display: "flex", gap: 14, alignItems: "center" } },
            React.createElement("div", { style: { width: 56, aspectRatio: "4/5", borderRadius: 8, overflow: "hidden" } },
              React.createElement("img", { src: p.images[0], style: { width: "100%", height: "100%", objectFit: "cover" } })
            ),
            React.createElement("div", { style: { flex: 1 } },
              React.createElement("div", { style: { fontSize: 14, fontWeight: 500 } }, p.name),
              React.createElement("div", { style: { fontSize: 12, color: "var(--graycool-500)" } },
                line.color?.name, line.size && ` · Size ${line.size}`, ` · Qty ${line.qty}`
              )
            ),
            React.createElement("div", { style: { fontWeight: 600 } }, formatIDR(p.price * line.qty))
          );
        })
      ),
      React.createElement("div", { style: { marginTop: 20, paddingTop: 20, borderTop: "1px solid var(--graycool-100)", display: "flex", flexDirection: "column", gap: 6, fontSize: 14 } },
        React.createElement("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--graycool-600)" } },
          React.createElement("span", null, "Subtotal"), React.createElement("span", null, formatIDR(order.subtotal))),
        React.createElement("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--graycool-600)" } },
          React.createElement("span", null, "Shipping"), React.createElement("span", null, order.shipping === 0 ? "Free" : formatIDR(order.shipping))),
        React.createElement("div", { style: { display: "flex", justifyContent: "space-between", fontWeight: 600, fontSize: 17, marginTop: 6 } },
          React.createElement("span", null, "Total"), React.createElement("span", null, formatIDR(order.total)))
      )
    ),
    // Shipping
    React.createElement("div", { className: "card", style: { padding: 28, marginBottom: 32 } },
      React.createElement("h3", { style: { margin: "0 0 12px", fontSize: 16, fontWeight: 600 } }, "Shipping to"),
      React.createElement("div", { style: { fontSize: 14, color: "var(--graycool-700)", lineHeight: "22px" } },
        React.createElement("div", { style: { fontWeight: 600, color: "var(--graycool-900)" } }, order.shippingAddress.firstName, " ", order.shippingAddress.lastName),
        order.shippingAddress.addr1, order.shippingAddress.addr2 && `, ${order.shippingAddress.addr2}`, React.createElement("br"),
        order.shippingAddress.city, ", ", order.shippingAddress.province, " ", order.shippingAddress.postcode, React.createElement("br"),
        order.shippingAddress.phone,
      )
    ),
    React.createElement("div", { style: { display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap" } },
      React.createElement(Button, { variant: "primary", size: "lg", onClick: () => navigate("/shop") }, "Keep shopping"),
      React.createElement(Button, { variant: "secondary", size: "lg", onClick: () => navigate("/account") }, "View my orders")
    )
  );
}

// ─── SHARED BITS ───────────────────────────────────────────
function CheckoutSteps({ active }) {
  const steps = ["Bag", "Shipping", "Payment"];
  return React.createElement("div", { style: { display: "flex", gap: 8, alignItems: "center", justifyContent: "center", marginTop: 12, flexWrap: "wrap" } },
    steps.map((s, i) =>
      React.createElement(React.Fragment, { key: s },
        React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } },
          React.createElement("div", {
            style: {
              width: 26, height: 26, borderRadius: 9999,
              display: "grid", placeItems: "center", fontSize: 12, fontWeight: 600,
              background: i < active ? "var(--brand-500)" : i === active ? "var(--graycool-900)" : "var(--graycool-100)",
              color: i <= active ? "#fff" : "var(--graycool-500)",
            }
          }, i < active ? React.createElement(Icons.Check, { size: 14 }) : (i + 1)),
          React.createElement("span", { style: { fontSize: 14, fontWeight: i === active ? 600 : 500, color: i === active ? "var(--graycool-900)" : "var(--graycool-600)" } }, s)
        ),
        i < steps.length - 1 && React.createElement("div", { style: { width: 40, height: 1, background: "var(--graycool-200)" } })
      )
    )
  );
}

function SectionHead({ step, title }) {
  return React.createElement("h2", { style: { fontSize: 18, fontWeight: 600, margin: "0 0 20px", display: "flex", alignItems: "center", gap: 10 } },
    React.createElement("span", { style: { width: 26, height: 26, borderRadius: 9999, background: "var(--graycool-900)", color: "#fff", display: "grid", placeItems: "center", fontSize: 12 } }, step),
    title
  );
}

function OrderSummary({ compact, overrideShipping }) {
  const { cartLines, cartSubtotal, shippingFee, cartTotal, formatIDR } = useStore();
  const fee = overrideShipping !== undefined ? overrideShipping : shippingFee;
  const total = cartSubtotal + fee;
  return React.createElement("div", { className: "card", style: { padding: 24, position: "sticky", top: 100 } },
    React.createElement("h3", { style: { fontSize: 16, fontWeight: 600, margin: "0 0 16px" } }, "Order summary"),
    React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 12, marginBottom: 16, maxHeight: 260, overflowY: "auto" } },
      cartLines.map((line) =>
        React.createElement("div", { key: line.key, style: { display: "flex", gap: 10, alignItems: "center" } },
          React.createElement("div", { style: { position: "relative", width: 52, flexShrink: 0, aspectRatio: "4/5", borderRadius: 6, overflow: "hidden" } },
            React.createElement("img", { src: line.product.images[0], style: { width: "100%", height: "100%", objectFit: "cover" } }),
            React.createElement("span", { style: { position: "absolute", top: -6, right: -6, background: "var(--graycool-900)", color: "#fff", width: 20, height: 20, borderRadius: 9999, fontSize: 11, fontWeight: 700, display: "grid", placeItems: "center", border: "2px solid #fff" } }, line.qty)
          ),
          React.createElement("div", { style: { flex: 1, minWidth: 0 } },
            React.createElement("div", { style: { fontSize: 13, fontWeight: 500, color: "var(--graycool-900)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, line.product.name),
            React.createElement("div", { style: { fontSize: 11, color: "var(--graycool-500)" } }, line.color?.name, line.size && ` · ${line.size}`)
          ),
          React.createElement("div", { style: { fontSize: 13, fontWeight: 600 } }, formatIDR(line.product.price * line.qty))
        )
      )
    ),
    React.createElement("div", { style: { borderTop: "1px solid var(--graycool-100)", paddingTop: 14, display: "flex", flexDirection: "column", gap: 8, fontSize: 14 } },
      React.createElement("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--graycool-600)" } },
        React.createElement("span", null, "Subtotal"), React.createElement("span", null, formatIDR(cartSubtotal))),
      React.createElement("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--graycool-600)" } },
        React.createElement("span", null, "Shipping"), React.createElement("span", null, fee === 0 ? "Free" : formatIDR(fee))),
      React.createElement("div", { style: { display: "flex", justifyContent: "space-between", marginTop: 8, paddingTop: 10, borderTop: "1px solid var(--graycool-100)", fontWeight: 600, fontSize: 16 } },
        React.createElement("span", null, "Total"), React.createElement("span", null, formatIDR(total)))
    ),
    React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6, justifyContent: "center", fontSize: 12, color: "var(--graycool-500)", marginTop: 14 } },
      React.createElement(Icons.Lock, { size: 12 }), "Secured with 256-bit SSL"
    )
  );
}

function QRPlaceholder() {
  // Checkerboard SVG QR code placeholder
  const cells = 21;
  const rng = (seed) => { let s = seed; return () => { s = (s * 1103515245 + 12345) & 0x7fffffff; return s / 0x7fffffff; }; };
  const r = rng(42);
  const grid = Array.from({ length: cells * cells }, () => (r() > 0.52 ? 1 : 0));
  // Finder patterns (corners)
  const finder = (gx, gy) => {
    for (let y = 0; y < 7; y++) for (let x = 0; x < 7; x++) {
      const on = (x === 0 || x === 6 || y === 0 || y === 6 || (x >= 2 && x <= 4 && y >= 2 && y <= 4)) ? 1 : 0;
      grid[(gy + y) * cells + (gx + x)] = on;
    }
  };
  finder(0, 0); finder(cells - 7, 0); finder(0, cells - 7);
  return React.createElement("svg", { viewBox: `0 0 ${cells} ${cells}`, width: "100%", height: "100%", style: { display: "block" } },
    grid.map((on, i) => on
      ? React.createElement("rect", { key: i, x: i % cells, y: Math.floor(i / cells), width: 1, height: 1, fill: "#0E121B" })
      : null
    )
  );
}

Object.assign(window, { CartPage, CheckoutPage, PaymentPage, ConfirmationPage });