/* global React */
const { useState: uS4 } = React;

// ============================================================
// WEDDING / ATELIER / REVIEWS / JOURNAL / CART / CHECKOUT
// ============================================================

function WeddingPage({ setRoute }) {
  return (
    <div className="page-enter">
      <section style={{ padding: 0, position: "relative", height: "72vh", minHeight: 560, overflow: "hidden" }}>
        <img src="assets/products/flower-heart.jpg" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(20,16,10,0.2), rgba(20,16,10,0.55))" }} />
        <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", textAlign: "center", color: "#f4ead8", padding: "var(--pad)" }}>
          <div className="eyebrow" style={{ color: "rgba(244,234,216,0.85)" }}>The Wedding Atelier</div>
          <h1 className="display" style={{ fontSize: "clamp(72px, 11vw, 180px)", margin: "20px 0 16px", color: "#f4ead8", letterSpacing: "-0.03em" }}>
            <span style={{ fontStyle: "italic", fontWeight: 400 }}>Save</span> · <span style={{ fontStyle: "italic", fontWeight: 400 }}>invite</span> · <span style={{ fontStyle: "italic", fontWeight: 400 }}>thank</span>
          </h1>
          <p style={{ fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 22, maxWidth: "50ch", lineHeight: 1.5, opacity: 0.92 }}>
            A seal for every piece of paper in your wedding year — from the first envelope to the last handwritten thank-you.
          </p>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="eyebrow">Three packages</div>
          <h2 className="section-title" style={{ marginTop: 12 }}>Chosen by <span className="italic-accent">our brides.</span></h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28, marginTop: 48 }}>
            {[
              { name: "The Invitation", price: 78, items: ["One monogram seal", "3 wax sticks, paired", "Melting spoon", "Linen presentation case"], n: "I" },
              { name: "The Full Paper Course", price: 165, items: ["Three seals (Save · Invite · Thank)", "Nine wax sticks, triple-paired", "Brass melting spoon", "Oxblood linen trousseau case", "Instructions, letterpressed"], n: "II", featured: true },
              { name: "The Heirloom", price: 320, items: ["Custom armorial die", "Presentation box in walnut", "Twelve wax sticks", "Engraved brass spoon", "Calligraphy starter kit", "Six-week production"], n: "III" },
            ].map(p => (
              <div key={p.name} style={{
                border: p.featured ? "1px solid var(--ink)" : "1px solid var(--rule)",
                background: p.featured ? "var(--surface)" : "transparent",
                padding: "40px 32px", position: "relative"
              }}>
                {p.featured && <div className="product-card-tag" style={{ position: "absolute", top: -10, left: 32 }}>Most chosen</div>}
                <div style={{ fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 56, color: "var(--bronze)", lineHeight: 1 }}>№ {p.n}</div>
                <h3 className="display" style={{ fontSize: 36, margin: "14px 0 8px" }}>{p.name}</h3>
                <div style={{ fontFamily: "var(--serif-display)", fontSize: 32 }}>${p.price}</div>
                <ul style={{ listStyle: "none", padding: 0, margin: "28px 0 0" }}>
                  {p.items.map((it, i) => (
                    <li key={i} style={{ padding: "10px 0", borderTop: "1px solid var(--rule-soft)", fontSize: 15, display: "flex", gap: 12 }}>
                      <span style={{ color: "var(--bronze)" }}>·</span>{it}
                    </li>
                  ))}
                </ul>
                <button className="btn btn-ghost" style={{ width: "100%", marginTop: 24 }} onClick={() => setRoute("custom")}>Reserve →</button>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: "var(--surface)" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <div className="eyebrow">The Concierge</div>
            <h2 className="section-title" style={{ fontSize: "clamp(40px, 5vw, 64px)", marginTop: 16 }}>A quiet <span className="italic-accent">correspondence</span> with our atelier.</h2>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--ink-soft)" }}>
              Every wedding commission comes with a named point of contact — a single person in our Hangzhou atelier who will proof, revise, and ship your work. No forms, no ticketing. Just letters.
            </p>
            <button className="btn" style={{ marginTop: 28 }} onClick={() => setRoute("custom")}>Open a wedding file →</button>
          </div>
          <img src="assets/products/bow-heart.jpg" style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover" }} />
        </div>
      </section>
    </div>
  );
}

function AtelierPage({ setRoute }) {
  return (
    <div className="page-enter">
      <section style={{ paddingTop: 60 }}>
        <div className="container">
          <div style={{ textAlign: "center", paddingBottom: 48, borderBottom: "1px solid var(--rule)" }}>
            <div className="eyebrow">The Atelier</div>
            <h1 className="section-title" style={{ fontSize: "clamp(64px, 10vw, 160px)", marginTop: 18 }}>Always <span className="italic-accent">lit.</span></h1>
            <p className="section-intro" style={{ margin: "24px auto 0" }}>
              EVERLIT is an atelier of wax seals founded in 2024. Our workshop sits in Hangzhou, our paperwork in Wilmington, and our five-axis CNC machines run until the last proof is pressed.
            </p>
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 64, alignItems: "start" }}>
            <img src="assets/hero/handle-green.jpg" style={{ width: "100%", aspectRatio: "3/4", objectFit: "cover" }} />
            <div style={{ paddingTop: 24 }}>
              <h2 className="display" style={{ fontSize: "clamp(32px, 4vw, 48px)", lineHeight: 1.1, margin: 0 }}>
                We began as a <span className="italic-accent">single die</span> — the house mark, cut in 2024 for a cardboard box of stationery samples.
              </h2>
              <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--ink-soft)", marginTop: 28 }}>
                Since that first mark, EVERLIT has pressed 3,482 seals for 895 customers in 34 countries. Our work has sat inside wedding envelopes in Lisbon, book-press colophons in Brooklyn, law-firm jacket flaps in San Francisco, and at least one Hogwarts-letter reproduction in Edinburgh.
              </p>
              <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--ink-soft)" }}>
                We remain small by design. Every seal is made by the same four-person atelier — one draughtsman, two engravers, one finisher — so that every piece carries the same weight and the same pressing depth. No two orders are passed between hands we do not know.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section style={{ background: "var(--ink)", color: "#f4ead8" }}>
        <div className="container">
          <div className="eyebrow" style={{ color: "var(--bronze)" }}>Inside the atelier</div>
          <h2 className="section-title" style={{ color: "#f4ead8", marginTop: 16 }}>The craft, <span className="italic-accent">briefly.</span></h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 40, marginTop: 56 }}>
            {[
              { h: "Brass", n: "360,000", unit: "grams of brass used", t: "Rolled ingots of dezincification-resistant C3604, sourced from a mill our grandfather once used for valve fittings." },
              { h: "Precision", n: "2µm", unit: "engraving tolerance", t: "Two microns is a quarter of a red blood cell. It is also the tolerance at which a rose petal stops being a suggestion and starts being a rose." },
              { h: "Trade", n: "34", unit: "countries served", t: "From Wilmington, Delaware we ship DDP — duties prepaid — so your envelope never waits in a customs queue." },
            ].map(c => (
              <div key={c.h}>
                <div className="eyebrow" style={{ color: "var(--bronze)" }}>{c.h}</div>
                <div style={{ fontFamily: "var(--serif-display)", fontSize: 72, lineHeight: 1, margin: "14px 0 6px" }}>{c.n}</div>
                <div className="fig-caption" style={{ color: "rgba(244,234,216,0.6)" }}>{c.unit}</div>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: "rgba(244,234,216,0.75)", marginTop: 20 }}>{c.t}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 72, alignItems: "center" }}>
            <div>
              <div className="eyebrow">Verified · Etsy Shop Manager</div>
              <h2 className="display" style={{ fontSize: "clamp(36px, 4.5vw, 60px)", lineHeight: 1.05, margin: "16px 0 20px" }}>
                Our service record, <span className="italic-accent">unredacted.</span>
              </h2>
              <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--ink-soft)" }}>
                A screenshot from our live Etsy dashboard — the same page our atelier checks each morning. 100% message response. 100% on-time shipping. Zero open cases. An average star rating of exactly five.
              </p>
              <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 20, fontFamily: "var(--sans)", fontSize: 13, color: "var(--ink-soft)" }}>
                {[
                  ["100%", "Message response"],
                  ["100%", "On-time shipping"],
                  ["5.0", "Star rating"],
                  ["0", "Open cases"],
                ].map(([n, l]) => (
                  <div key={l} style={{ borderTop: "1px solid var(--rule)", paddingTop: 12 }}>
                    <div style={{ fontFamily: "var(--serif-display)", fontSize: 36, lineHeight: 1, color: "var(--ink)" }}>{n}</div>
                    <div className="eyebrow" style={{ marginTop: 8 }}>{l}</div>
                  </div>
                ))}
              </div>
            </div>
            <figure style={{ margin: 0 }}>
              <div style={{ border: "1px solid var(--rule)", background: "#fff", padding: 6 }}>
                <img src="assets/img_36.jpg" alt="Etsy Shop Manager dashboard showing 100% response rate, 100% on-time shipping, 5.0 star rating, 0 cases" style={{ width: "100%", display: "block" }} />
              </div>
              <figcaption className="fig-caption" style={{ marginTop: 14 }}>Fig. — Etsy Shop Manager, current review period · Screenshot retained for verification.</figcaption>
            </figure>
          </div>
        </div>
      </section>

      <section style={{ paddingTop: 0 }}>
        <div className="container">
          <div style={{ textAlign: "center" }}>
            <div className="eyebrow">Press</div>
            <h2 className="display" style={{ fontSize: "clamp(28px, 3vw, 40px)", maxWidth: "28ch", margin: "20px auto", lineHeight: 1.2 }}>
              "The rose detail is astonishing — <span className="italic-accent">I've never seen wax this dimensional.</span>"
            </h2>
            <div className="fig-caption">— Myranda, Etsy</div>
          </div>
        </div>
      </section>
    </div>
  );
}

function ReviewsPage() {
  const { reviews } = window.EVERLIT_DATA;
  const all = [...reviews, ...reviews, ...reviews].slice(0, 18);
  return (
    <div className="page-enter">
      <section style={{ paddingTop: 60 }}>
        <div className="container">
          <div style={{ textAlign: "center", paddingBottom: 48, borderBottom: "1px solid var(--rule)" }}>
            <div className="eyebrow">Letters of praise</div>
            <h1 className="section-title" style={{ fontSize: "clamp(56px, 8vw, 120px)", marginTop: 18 }}>152 letters. <span className="italic-accent">Not one</span> below five.</h1>
            <div style={{ display: "flex", justifyContent: "center", gap: 48, marginTop: 32 }}>
              <div><div style={{ fontFamily: "var(--serif-display)", fontSize: 48 }}>5.0</div><div className="fig-caption">Average</div></div>
              <div><div style={{ fontFamily: "var(--serif-display)", fontSize: 48 }}>152</div><div className="fig-caption">Reviews</div></div>
              <div><div style={{ fontFamily: "var(--serif-display)", fontSize: 48 }}>895</div><div className="fig-caption">Orders</div></div>
              <div><div style={{ fontFamily: "var(--serif-display)", fontSize: 48 }}>97%</div><div className="fig-caption">Repeat rate</div></div>
            </div>
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div style={{ columnCount: 3, columnGap: 40 }}>
            {all.map((r, i) => (
              <figure key={i} style={{ margin: "0 0 32px", padding: "24px 0", borderTop: "1px solid var(--rule)", breakInside: "avoid" }}>
                <div style={{ display: "flex", justifyContent: "space-between" }}>
                  <Stars filled={r.rating} />
                  <span className="fig-caption">{r.date}</span>
                </div>
                <blockquote style={{ margin: "16px 0", fontFamily: "var(--serif-display)", fontSize: 18, lineHeight: 1.45, fontStyle: "italic" }}>
                  "{r.text}"
                </blockquote>
                <figcaption className="fig-caption">— {r.name} · {r.product}</figcaption>
              </figure>
            ))}
          </div>

          <div style={{ marginTop: 100, paddingTop: 64, borderTop: "1px solid var(--rule)" }}>
            <div style={{ textAlign: "center", marginBottom: 56 }}>
              <div className="eyebrow">Unredacted · Etsy verified</div>
              <h2 className="display" style={{ fontSize: "clamp(36px, 4.5vw, 64px)", margin: "16px 0 10px" }}>
                The <span className="italic-accent">original</span> correspondence.
              </h2>
              <p className="section-intro" style={{ margin: "0 auto" }}>
                Four pages from our live Etsy review feed — customer names, dates, and product titles intact. No filters, no hand-picked quotes.
              </p>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 40 }}>
              {[
                { src: "assets/img_32.jpg", label: "Fig. A — Reviews, page 1 of 38" },
                { src: "assets/img_33.jpg", label: "Fig. B — Dawn · Cosmic Elixir · Mar 4" },
                { src: "assets/img_34.jpg", label: "Fig. C — Jane · Rose Seal · Feb 18" },
                { src: "assets/img_35.jpg", label: "Fig. D — Myranda · Rose Seal · Jan 21" },
              ].map((s, i) => (
                <figure key={i} style={{ margin: 0 }}>
                  <div style={{ border: "1px solid var(--rule)", background: "#fff", padding: 6 }}>
                    <img src={s.src} alt={s.label} style={{ width: "100%", display: "block" }} />
                  </div>
                  <figcaption className="fig-caption" style={{ marginTop: 12 }}>{s.label}</figcaption>
                </figure>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function JournalPage() {
  const { journal } = window.EVERLIT_DATA;
  const feature = journal[0];
  const rest = journal.slice(1);
  return (
    <div className="page-enter">
      <section style={{ paddingTop: 60 }}>
        <div className="container">
          <div style={{ textAlign: "center", paddingBottom: 48, borderBottom: "1px solid var(--rule)" }}>
            <div className="eyebrow">The Journal</div>
            <h1 className="section-title" style={{ fontSize: "clamp(56px, 8vw, 120px)", marginTop: 18 }}>Essays on the <span className="italic-accent">slow letter.</span></h1>
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <article style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64, alignItems: "center", marginBottom: 80 }}>
            <img src={feature.image} style={{ width: "100%", aspectRatio: "4/3", objectFit: "cover" }} />
            <div>
              <div className="fig-caption">{feature.kicker} · {feature.date} · {feature.read}</div>
              <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 64px)", margin: "16px 0 20px", lineHeight: 1.05 }}>{feature.title}</h2>
              <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--ink-soft)", fontStyle: "italic" }}>{feature.excerpt}</p>
              <button className="btn-link" style={{ marginTop: 24 }}>Continue reading →</button>
            </div>
          </article>
          <hr className="rule" />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 40, marginTop: 64 }}>
            {rest.map(j => (
              <article key={j.id}>
                <div style={{ aspectRatio: "4/5", overflow: "hidden" }}>
                  <img src={j.image} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                </div>
                <div className="fig-caption" style={{ marginTop: 20 }}>{j.kicker} · {j.date} · {j.read}</div>
                <h3 style={{ fontFamily: "var(--serif-display)", fontSize: 26, lineHeight: 1.15, margin: "12px 0 10px", fontWeight: 400 }}>{j.title}</h3>
                <p style={{ fontSize: 15, color: "var(--ink-soft)", lineHeight: 1.5, margin: 0 }}>{j.excerpt}</p>
              </article>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// CART DRAWER + CHECKOUT
// ============================================================
function CartDrawer({ open, onClose, cart, setCart, setRoute }) {
  const total = cart.reduce((s, i) => s + (i.price || 0) * (i.qty || 1), 0);
  return (
    <>
      <div onClick={onClose} style={{
        position: "fixed", inset: 0, background: "rgba(20,16,10,0.4)", zIndex: 100,
        opacity: open ? 1 : 0, pointerEvents: open ? "auto" : "none", transition: "opacity .3s"
      }} />
      <aside style={{
        position: "fixed", right: 0, top: 0, bottom: 0, width: "min(480px, 92vw)",
        background: "var(--bg)", color: "var(--ink)", zIndex: 101,
        transform: open ? "translateX(0)" : "translateX(100%)", transition: "transform .4s var(--ease)",
        display: "flex", flexDirection: "column"
      }}>
        <header style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "28px 32px", borderBottom: "1px solid var(--rule)" }}>
          <h3 className="display" style={{ fontSize: 28, margin: 0 }}>Your bag <span className="italic-accent" style={{ color: "var(--ink-muted)" }}>· {cart.length}</span></h3>
          <button onClick={onClose} style={{ fontSize: 24 }}>×</button>
        </header>
        <div style={{ flex: 1, overflowY: "auto", padding: "0 32px" }}>
          {cart.length === 0 ? (
            <div style={{ textAlign: "center", padding: "80px 0", fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 22, color: "var(--ink-muted)" }}>
              Your bag is empty.<br/>The atelier is open.
            </div>
          ) : cart.map((item, i) => (
            <div key={i} style={{ display: "flex", gap: 16, padding: "24px 0", borderBottom: "1px solid var(--rule-soft)" }}>
              <img src={item.image} style={{ width: 88, height: 88, objectFit: "cover", background: "var(--surface)" }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: "var(--serif-display)", fontSize: 18 }}>{item.name}</div>
                <div className="fig-caption" style={{ marginTop: 4 }}>{item.subtitle || item.collection} · ×{item.qty || 1}</div>
                {item.selectedWax && <div className="fig-caption" style={{ marginTop: 2 }}>Wax: {item.selectedWax.name}</div>}
              </div>
              <div style={{ textAlign: "right" }}>
                <div style={{ fontFamily: "var(--serif-display)", fontSize: 18 }}>${(item.price || 0) * (item.qty || 1)}</div>
                <button onClick={() => setCart(cart.filter((_, j) => j !== i))} className="fig-caption" style={{ marginTop: 6, textDecoration: "underline" }}>Remove</button>
              </div>
            </div>
          ))}
        </div>
        <footer style={{ padding: 32, borderTop: "1px solid var(--rule)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--serif-display)", fontSize: 24, marginBottom: 20 }}>
            <span>Subtotal</span><span>${total}</span>
          </div>
          <div className="fig-caption" style={{ marginBottom: 20 }}>Free international courier · Duties prepaid · 5–10 day delivery</div>
          <button className="btn" style={{ width: "100%" }} disabled={cart.length === 0} onClick={() => { onClose(); setRoute("checkout"); }}>
            Proceed to sealing →
          </button>
        </footer>
      </aside>
    </>
  );
}

function CheckoutPage({ cart, setRoute }) {
  const [step, setStep] = uS4(1);
  const [placed, setPlaced] = uS4(false);
  const total = cart.reduce((s, i) => s + (i.price || 0) * (i.qty || 1), 0);

  if (placed) {
    return (
      <div className="page-enter">
        <section style={{ padding: "120px 0", textAlign: "center" }}>
          <div className="container">
            <div style={{ fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 80, color: "var(--bronze)" }}>∴</div>
            <h1 className="display" style={{ fontSize: "clamp(48px, 7vw, 96px)", margin: "20px 0" }}>Sealed. <span className="italic-accent">Thank you.</span></h1>
            <p className="section-intro" style={{ margin: "0 auto" }}>
              Order № ELV-{Math.floor(Math.random()*90000 + 10000)} has entered the atelier queue. We'll press it, photograph it, and send it on its way within ten days.
            </p>
            <div style={{ marginTop: 40, display: "inline-flex", gap: 16 }}>
              <button className="btn" onClick={() => setRoute("home")}>Return to shop</button>
              <button className="btn btn-ghost" onClick={() => setRoute("atelier")}>Visit the atelier</button>
            </div>
          </div>
        </section>
      </div>
    );
  }

  return (
    <div className="page-enter">
      <section style={{ paddingTop: 40 }}>
        <div className="container">
          <h1 className="section-title" style={{ fontSize: "clamp(48px, 6vw, 80px)", marginBottom: 12 }}>Checkout.</h1>
          <div className="fig-caption" style={{ marginBottom: 40 }}>Step {step} of 3 · {["Address", "Courier", "Payment"][step-1]}</div>

          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64 }}>
            <div>
              {step === 1 && (
                <div style={{ display: "grid", gap: 24 }}>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
                    <div><label>First name</label><input type="text" defaultValue="Margaux" /></div>
                    <div><label>Last name</label><input type="text" defaultValue="Laurent" /></div>
                  </div>
                  <div><label>Email</label><input type="email" defaultValue="margaux@correspondence.com" /></div>
                  <div><label>Address</label><input type="text" defaultValue="47 Bond Street, Apt 3A" /></div>
                  <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gap: 24 }}>
                    <div><label>City</label><input defaultValue="New York" /></div>
                    <div><label>State</label><input defaultValue="NY" /></div>
                    <div><label>ZIP</label><input defaultValue="10012" /></div>
                  </div>
                  <div><label>Country</label><input defaultValue="United States" /></div>
                </div>
              )}
              {step === 2 && (
                <div style={{ display: "grid", gap: 12 }}>
                  {[
                    { id: "std", n: "Atelier Courier", sub: "5–10 days, duties prepaid, fully tracked", price: "Free" },
                    { id: "exp", n: "Pressing-Day Express", sub: "3–5 days, DHL, duties prepaid", price: "+$18" },
                    { id: "pick", n: "Pickup in Wilmington", sub: "Our LLC address, by appointment", price: "Free" },
                  ].map((o, i) => (
                    <label key={o.id} style={{ padding: "22px 24px", border: i===0 ? "1px solid var(--ink)" : "1px solid var(--rule)", display: "flex", justifyContent: "space-between", gap: 16, cursor: "pointer", background: i===0 ? "var(--surface)" : "transparent" }}>
                      <div>
                        <div style={{ fontFamily: "var(--serif-display)", fontSize: 20 }}>{o.n}</div>
                        <div className="fig-caption" style={{ marginTop: 4, textTransform: "none", letterSpacing: 0, fontSize: 14 }}>{o.sub}</div>
                      </div>
                      <div style={{ fontFamily: "var(--serif-display)", fontSize: 22 }}>{o.price}</div>
                    </label>
                  ))}
                </div>
              )}
              {step === 3 && (
                <div style={{ display: "grid", gap: 20 }}>
                  <div><label>Card number</label><input defaultValue="4242 4242 4242 4242" /></div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
                    <div><label>Expiry</label><input defaultValue="07 / 28" /></div>
                    <div><label>CVC</label><input defaultValue="123" /></div>
                  </div>
                  <div><label>Name on card</label><input defaultValue="Margaux Laurent" /></div>
                  <label style={{ display: "flex", gap: 10, alignItems: "center", marginTop: 12, textTransform: "none", letterSpacing: 0, fontFamily: "var(--serif-display)", fontSize: 16, color: "var(--ink)", cursor: "pointer" }}>
                    <input type="checkbox" defaultChecked />
                    Seal my order with the EVERLIT mark, in oxblood wax, on the invoice envelope.
                  </label>
                </div>
              )}

              <div style={{ display: "flex", justifyContent: "space-between", marginTop: 48 }}>
                {step > 1 ? <button className="btn-link" onClick={() => setStep(step-1)}>← Previous</button> : <span/>}
                {step < 3 ? (
                  <button className="btn" onClick={() => setStep(step+1)}>Continue →</button>
                ) : (
                  <button className="btn" onClick={() => setPlaced(true)}>Press the seal — ${total}</button>
                )}
              </div>
            </div>

            <aside style={{ background: "var(--surface)", padding: 32, position: "sticky", top: 140, alignSelf: "start" }}>
              <div className="eyebrow">Order summary</div>
              <div style={{ marginTop: 20, display: "grid", gap: 16 }}>
                {cart.length === 0 && <div className="fig-caption" style={{ textAlign: "center", padding: "32px 0" }}>Nothing in your bag</div>}
                {cart.map((i, k) => (
                  <div key={k} style={{ display: "flex", gap: 12 }}>
                    <img src={i.image} style={{ width: 64, height: 64, objectFit: "cover" }} />
                    <div style={{ flex: 1 }}>
                      <div style={{ fontFamily: "var(--serif-display)", fontSize: 16 }}>{i.name}</div>
                      <div className="fig-caption" style={{ marginTop: 4 }}>×{i.qty || 1} · ${(i.price || 0) * (i.qty || 1)}</div>
                    </div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 24, paddingTop: 20, borderTop: "1px solid var(--rule)", display: "grid", gap: 10, fontFamily: "var(--sans)", fontSize: 13 }}>
                <Line l="Subtotal" v={"$" + total} />
                <Line l="Courier" v="Free" />
                <Line l="Duties" v="Prepaid" />
                <div style={{ height: 1, background: "var(--rule)", margin: "8px 0" }} />
                <Line l={<strong style={{ fontFamily: "var(--serif-display)", fontSize: 22, letterSpacing: 0, textTransform: "none" }}>Total</strong>} v={<span style={{ fontFamily: "var(--serif-display)", fontSize: 22, letterSpacing: 0 }}>${total}</span>} />
              </div>
            </aside>
          </div>
        </div>
      </section>
    </div>
  );
}

function Line({ l, v }) {
  return <div style={{ display: "flex", justifyContent: "space-between", textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--ink-muted)" }}><span>{l}</span><span>{v}</span></div>;
}

window.WeddingPage = WeddingPage;
window.AtelierPage = AtelierPage;
window.ReviewsPage = ReviewsPage;
window.JournalPage = JournalPage;
window.CartDrawer = CartDrawer;
window.CheckoutPage = CheckoutPage;