// noir-pages.jsx — All Noir SPA pages
// Uses classes defined in noir.css: .page-head, .shop-grid, .coll-row, .pdp, .custom, .wed-*, .atelier-*, .reviews-grid, .journal-*, .checkout

const { useState: uN1, useEffect: uN2, useMemo: uN3 } = React;

// ============================================================
// SHOP
// ============================================================
function NoirShop({ setRoute, addToCart }) {
  const { products } = window.EVERLIT_DATA;
  const [filter, setFilter] = uN1("all");

  const tabs = [
    { id: "all", label: "All" },
    { id: "Signature", label: "Signature" },
    { id: "Wedding", label: "Wedding" },
    { id: "Archive", label: "Archive" },
    { id: "Commissioned", label: "Commissioned" },
    { id: "Monogram", label: "Monogram" },
    { id: "Occasion", label: "Occasion" },
  ];

  const shown = filter === "all" ? products : products.filter(p => p.collection === filter);

  return (
    <React.Fragment>
      <section className="page-head" data-screen-label="Shop">
        <div className="page-head-bg" style={{ backgroundImage: "url('assets/editorial/raw-3.jpg')" }}/>
        <div className="page-head-inner">
          <div className="section-kicker" style={{color: "var(--gold)"}}>The Catalogue · 017 Designs</div>
          <h1>The <em>Atelier</em><br/>Catalogue.</h1>
          <p>Every standing signature, every limited commission. Filter by collection — each seal is pressed on cream cotton before it leaves the bench.</p>
        </div>
      </section>

      <div className="shop-bar">
        <div className="shop-filters">
          {tabs.map(t => (
            <button key={t.id} className={filter===t.id?"on":""} onClick={() => setFilter(t.id)} data-hover>{t.label}</button>
          ))}
        </div>
        <div>{shown.length} in currency</div>
      </div>

      <div className="shop-grid">
        {shown.map((p, i) => (
          <div key={p.id} className="shop-tile" data-hover onClick={() => setRoute({ name:"product", id:p.id })}>
            <div className="shop-tile-img"><img src={p.image} alt={p.name}/></div>
            <div className="shop-tile-meta">
              <span>N° {String(i+1).padStart(2,"0")}</span>
              <span>{p.collection}</span>
            </div>
            <h3 className="shop-tile-name">{p.name}</h3>
            <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline", marginTop:8}}>
              <div className="shop-tile-sub">{p.subtitle}</div>
              <div className="shop-tile-price">${p.price}</div>
            </div>
          </div>
        ))}
      </div>
    </React.Fragment>
  );
}

// ============================================================
// COLLECTIONS
// ============================================================
function NoirCollections({ setRoute }) {
  const { collections } = window.EVERLIT_DATA;
  return (
    <React.Fragment>
      <section className="page-head" data-screen-label="Collections">
        <div className="page-head-bg" style={{ backgroundImage: "url('assets/huoqi/b463.jpg')" }}/>
        <div className="page-head-inner">
          <div className="section-kicker" style={{color: "var(--gold)"}}>Four Collections</div>
          <h1>An archive, <em>arranged.</em></h1>
          <p>Four small theses on paper, ceremony, and the year of one's life.</p>
        </div>
      </section>

      <div className="coll-list">
        {collections.map((c, i) => (
          <div key={c.id} className="coll-row">
            <div className="coll-image"><img src={c.image} alt={c.name}/></div>
            <div>
              <div className="coll-meta-num">N° {String(i+1).padStart(2,"0")} · {c.count} pieces</div>
              <h2 className="coll-meta-title">{c.name.replace(/^The /,"")}<em>.</em></h2>
              <p className="coll-meta-desc">{c.description}</p>
              <button className="noir-btn" onClick={() => setRoute("shop")} data-hover>
                <span>Enter the collection</span>
                <span>→</span>
              </button>
            </div>
          </div>
        ))}
      </div>
    </React.Fragment>
  );
}

// ============================================================
// PRODUCT DETAIL
// ============================================================
function NoirProduct({ productId, setRoute, addToCart }) {
  const { products, waxColors } = window.EVERLIT_DATA;
  const product = products.find(p => p.id === productId) || products[0];
  const [imgIdx, setImgIdx] = uN1(0);
  const [wax, setWax] = uN1(waxColors[0].id);
  const [shape, setShape] = uN1(product.shape);

  uN2(() => { setImgIdx(0); setShape(product.shape); }, [productId]);

  const related = products.filter(p => p.collection === product.collection && p.id !== product.id).slice(0, 3);

  return (
    <React.Fragment>
      <div className="pdp" data-screen-label={`Product · ${product.name}`}>
        <div className="pdp-gallery">
          <div className="pdp-main"><img src={product.gallery[imgIdx]} alt={product.name}/></div>
          <div className="pdp-thumbs">
            {product.gallery.map((g, i) => (
              <div key={i} className={"pdp-thumb" + (i===imgIdx?" on":"")} onClick={() => setImgIdx(i)} data-hover>
                <img src={g} alt=""/>
              </div>
            ))}
          </div>
        </div>

        <div className="pdp-info">
          <div className="pdp-kicker">{product.collection} · {product.subtitle}</div>
          <h1 className="pdp-name">{product.name}</h1>
          <div className="pdp-sub">{product.shape} · {product.material}</div>
          <div className="pdp-price">
            <span>${product.price}</span>
            <span className="usd">USD · Free worldwide shipping over $120</span>
          </div>
          <p className="pdp-desc">{product.description}</p>

          <div className="pdp-opt-group">
            <div className="pdp-opt-label">Wax · pour color</div>
            <div className="pdp-chips">
              {waxColors.map(w => (
                <div key={w.id} className={"pdp-wax-chip" + (wax===w.id?" on":"")} onClick={() => setWax(w.id)} data-hover>
                  <div className="pdp-wax-swatch" style={{background: w.hex}}/>
                  <span>{w.name}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="pdp-opt-group">
            <div className="pdp-opt-label">Shape · head geometry</div>
            <div className="pdp-chips">
              {["Round · 25mm","Round · 28mm","Round · 30mm","Round · 32mm","Shield · 32mm"].map(s => (
                <div key={s} className={"pdp-chip" + (shape===s?" on":"")} onClick={() => setShape(s)} data-hover>{s}</div>
              ))}
            </div>
          </div>

          <div className="pdp-actions">
            <button className="pdp-add" onClick={() => { addToCart({ id: product.id, name: product.name, price: product.price, image: product.image, wax, shape }); }} data-hover>
              Add to the bag · ${product.price}
            </button>
          </div>

          <ul className="pdp-details">
            {product.detail.map((d,i) => {
              const parts = d.split(":");
              return (
                <li key={i}>
                  <span>{parts[0]}</span>
                  <span>{parts.slice(1).join(":").trim() || "—"}</span>
                </li>
              );
            })}
            <li><span>Reviews</span><span>{product.reviews} · {product.rating.toFixed(1)}★</span></li>
          </ul>
        </div>
      </div>

      {related.length > 0 && (
        <section style={{padding:"60px 48px 120px", borderTop:"1px solid var(--rule)"}}>
          <div className="section-kicker" style={{color:"var(--gold)", marginBottom: 24}}>Also in {product.collection}</div>
          <div className="shop-grid" style={{gridTemplateColumns:"repeat(3, 1fr)"}}>
            {related.map(p => (
              <div key={p.id} className="shop-tile" onClick={() => setRoute({name:"product", id:p.id})} data-hover>
                <div className="shop-tile-img"><img src={p.image} alt={p.name}/></div>
                <h3 className="shop-tile-name">{p.name}</h3>
                <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline", marginTop:8}}>
                  <div className="shop-tile-sub">{p.subtitle}</div>
                  <div className="shop-tile-price">${p.price}</div>
                </div>
              </div>
            ))}
          </div>
        </section>
      )}
    </React.Fragment>
  );
}

// ============================================================
// CUSTOM
// ============================================================
function NoirCustom({ setRoute }) {
  const { shapes, scripts } = window.EVERLIT_DATA;
  const [form, setForm] = uN1({ name:"", email:"", concept:"", shape: shapes[0].name, script: scripts[0].name, budget:"" });
  const [sent, setSent] = uN1(false);
  const update = (k, v) => setForm({ ...form, [k]: v });

  return (
    <React.Fragment>
      <section className="page-head" data-screen-label="Custom">
        <div className="page-head-bg" style={{ backgroundImage: "url('assets/editorial/raw-4.jpg')" }}/>
        <div className="page-head-inner">
          <div className="section-kicker" style={{color:"var(--gold)"}}>Commission · Bench to Post</div>
          <h1>A seal, <em>one of one.</em></h1>
          <p>Six weeks from first sketch to first impression. Two rounds of proofs. One die, drawn only for you.</p>
        </div>
      </section>

      <div className="custom">
        <div className="custom-grid">
          <div className="custom-left">
            <h2>The commission <em>process.</em></h2>
            <p>Send the concept — a crest, a creature, a pair of initials, a line from a poem. We reply within forty-eight hours with a pencil sketch and a proposal.</p>
            <p>Once approved, your drawing is engraved into cold-rolled brass on a five-axis mill, finished by hand, and pressed onto cream cotton before it's packed.</p>
            <div className="custom-steps">
              {[
                ["01","Concept","A sketch, a reference, a description — one page of ideas is enough."],
                ["02","Proofs","Pencil first, then refined line-art at actual size. Two rounds included."],
                ["03","Engraving","Brass cut on the Sheldon lathe. Hand-finished at the bench."],
                ["04","Proof impression","Pressed on cream cotton at 60°C before it ships."],
              ].map(s => (
                <div key={s[0]} className="custom-step-pill">
                  <div className="custom-step-pill-num">{s[0]}</div>
                  <div style={{flex:1}}>
                    <div style={{color:"var(--bone)", marginBottom: 6}}>{s[1]}</div>
                    <div style={{textTransform:"none", letterSpacing:0, fontFamily:"var(--f-serif)", fontStyle:"italic", fontSize:16, color:"var(--bone-dim)"}}>{s[2]}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div>
            {sent ? (
              <div style={{padding:"80px 0", textAlign:"center"}}>
                <div className="section-kicker" style={{color:"var(--gold)"}}>Received · MMXXVI</div>
                <h2 style={{fontFamily:"var(--f-display)", fontSize:"clamp(40px, 5vw, 72px)", margin:"24px 0", lineHeight:0.95}}>
                  Your <em style={{fontFamily:"var(--f-serif)", fontWeight:300, color:"var(--gold)"}}>brief</em><br/>is on the bench.
                </h2>
                <p style={{fontFamily:"var(--f-serif)", fontSize:19, color:"var(--bone-dim)", maxWidth:"42ch", margin:"0 auto"}}>
                  We reply within forty-eight hours with a sketch and a schedule. — The Atelier
                </p>
              </div>
            ) : (
              <form className="custom-form" onSubmit={e => { e.preventDefault(); setSent(true); }}>
                <div className="custom-field">
                  <label>Your name</label>
                  <input type="text" required value={form.name} onChange={e => update("name", e.target.value)} data-hover/>
                </div>
                <div className="custom-field">
                  <label>Correspondence address</label>
                  <input type="email" required value={form.email} onChange={e => update("email", e.target.value)} data-hover/>
                </div>
                <div className="custom-field">
                  <label>The concept · in your own words</label>
                  <textarea required value={form.concept} onChange={e => update("concept", e.target.value)} placeholder="A heron in profile over a marsh, carrying a scroll in its beak…" data-hover/>
                </div>
                <div className="custom-field">
                  <label>Head · geometry</label>
                  <select value={form.shape} onChange={e => update("shape", e.target.value)} data-hover>
                    {shapes.map(s => <option key={s.id}>{s.name}{s.note ? ` — ${s.note}` : ""}</option>)}
                  </select>
                </div>
                <div className="custom-field">
                  <label>Script · for lettering</label>
                  <select value={form.script} onChange={e => update("script", e.target.value)} data-hover>
                    {scripts.map(s => <option key={s.id}>{s.name}</option>)}
                  </select>
                </div>
                <div className="custom-field">
                  <label>Budget · optional</label>
                  <input type="text" value={form.budget} onChange={e => update("budget", e.target.value)} placeholder="From $120 · bespoke" data-hover/>
                </div>
                <button type="submit" className="custom-submit" data-hover>Send the brief →</button>
              </form>
            )}
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

// ============================================================
// WEDDING
// ============================================================
function NoirWedding({ setRoute }) {
  const items = [
    { num:"01", label:"Save-the-Date", img:"assets/products/flower-heart.jpg" },
    { num:"02", label:"Invitation", img:"assets/products/bow-heart.jpg" },
    { num:"03", label:"Menu Card", img:"assets/products/rose-b.jpg" },
    { num:"04", label:"Thank-You", img:"assets/products/flower-heart-2.jpg" },
    { num:"05", label:"Vow Book", img:"assets/huoqi/cf9a.jpg" },
    { num:"06", label:"Place Setting", img:"assets/products/blossom.jpg" },
    { num:"07", label:"Program", img:"assets/huoqi/4278.jpg" },
    { num:"08", label:"Housewarming", img:"assets/products/home-heart.jpg" },
  ];
  return (
    <React.Fragment>
      <section className="wed-hero" data-screen-label="Wedding">
        <div className="wed-hero-inner">
          <div className="section-kicker" style={{color:"var(--gold)"}}>The Wedding Atelier</div>
          <h1 style={{fontFamily:"var(--f-display)", fontSize:"clamp(72px, 11vw, 180px)", lineHeight:0.9, letterSpacing:"-0.03em", margin:"20px 0 28px"}}>
            Seal the <em style={{fontFamily:"var(--f-serif)", fontWeight:300, color:"var(--gold)"}}>whole</em> suite.
          </h1>
          <p style={{fontFamily:"var(--f-serif)", fontStyle:"italic", fontSize:22, color:"var(--bone-dim)", maxWidth:"44ch", margin:"0 auto"}}>
            Eight paper courses — from the save-the-date to the housewarming that follows. One die, one wax, one impression the ink cannot replicate.
          </p>
        </div>
      </section>

      <div className="wed-suite">
        {items.map(it => (
          <div key={it.num} className="wed-suite-item" data-hover>
            <img src={it.img} alt={it.label}/>
            <div className="wed-suite-label" data-num={`N° ${it.num}`}>{it.label}</div>
          </div>
        ))}
      </div>

      <section style={{padding:"140px 48px", textAlign:"center", maxWidth:900, margin:"0 auto"}}>
        <div className="section-kicker" style={{color:"var(--gold)"}}>Included · Every Wedding Order</div>
        <h2 className="section-title" style={{marginTop:20, marginBottom:40}}>One die. <em>Five impressions.</em></h2>
        <div style={{display:"grid", gridTemplateColumns:"repeat(2, 1fr)", gap:32, textAlign:"left", fontFamily:"var(--f-serif)", fontSize:17, color:"var(--bone-dim)", lineHeight:1.6}}>
          {[
            ["Brass die · engraved","Five-axis CNC, hand-finished, blackened to your specification."],
            ["Two sticks of wax","Poured in-house, color of your choosing. Enough for 80 envelopes."],
            ["Cream cotton proof","Pressed on 240gsm cotton and mailed before production."],
            ["Wooden presentation box","European beech, silk-lined, engraved with the couple's cipher."],
          ].map((r,i) => (
            <div key={i} style={{borderTop:"1px solid var(--rule)", paddingTop:24}}>
              <div style={{fontFamily:"var(--f-mono)", fontSize:10, letterSpacing:3, color:"var(--gold)", textTransform:"uppercase", marginBottom:12}}>N° {String(i+1).padStart(2,"0")}</div>
              <div style={{color:"var(--bone)", fontFamily:"var(--f-display)", fontSize:28, marginBottom:10}}>{r[0]}</div>
              <div>{r[1]}</div>
            </div>
          ))}
        </div>
        <div style={{marginTop:60}}>
          <button className="noir-btn" onClick={() => setRoute("custom")} data-hover><span>Commission a wedding suite</span><span>→</span></button>
        </div>
      </section>
    </React.Fragment>
  );
}

// ============================================================
// ATELIER
// ============================================================
function NoirAtelier({ setRoute }) {
  return (
    <React.Fragment>
      <section className="page-head" data-screen-label="Atelier">
        <div className="page-head-bg" style={{backgroundImage:"url('assets/editorial/raw-7.jpg')"}}/>
        <div className="page-head-inner">
          <div className="section-kicker" style={{color:"var(--gold)"}}>The Atelier · Brooklyn, NY</div>
          <h1>Forty-seven <em>Wythe.</em></h1>
          <p>A two-room workshop above a bookbinder, shared with a 1952 Sheldon lathe and a cat named Carbon.</p>
        </div>
      </section>

      <div className="atelier-stats">
        {[
          ["V","Years at the bench"],
          ["017","Standing designs"],
          ["5,200","Seals dispatched"],
          ["31","Countries reached"],
        ].map((s,i) => (
          <div key={i} className="atelier-stat">
            <div className="atelier-stat-num">{s[0]}</div>
            <div className="atelier-stat-label">{s[1]}</div>
          </div>
        ))}
      </div>

      <div className="atelier-body">
        <h2>A letter is slower <em>on purpose.</em></h2>
        <p>Everlit Art was founded in 2020 at a kitchen table in Greenpoint with a twenty-dollar engraving burr and a block of bronze wax. The first die was cut for a friend's wedding — a pair of initials inside a heart — and shipped in a jewelry box borrowed from another friend. Five years later, we occupy two rooms above a bookbinder on Wythe Avenue, share floor space with a 1952 Sheldon lathe, and have pressed seventeen thousand impressions across thirty-one countries.</p>
        <p>We still cut the first pencil drawing of every commission by hand. We still break each stick of wax from the mold after it sets. We still test-press every die onto cream cotton at sixty degrees before it leaves the bench. A seal is a small object, but it is the last thing that touches the page before it leaves your hand — and we would like, for your sake and the recipient's, for it to be the best small object we can make.</p>
        <p>The work is slow. That is the point.</p>
        <div style={{marginTop:60, display:"flex", gap:16, flexWrap:"wrap"}}>
          <button className="noir-btn" onClick={() => setRoute("custom")} data-hover><span>Commission a seal</span><span>→</span></button>
          <button className="noir-btn" onClick={() => setRoute("journal")} data-hover><span>Read the journal</span><span>→</span></button>
        </div>
      </div>
    </React.Fragment>
  );
}

// ============================================================
// REVIEWS
// ============================================================
function NoirReviews() {
  const { reviews } = window.EVERLIT_DATA;
  // Expand to 18 cards by cycling (kept as faux archive — 5-year record)
  const all = [...reviews, ...reviews, ...reviews].slice(0, 18).map((r, i) => ({ ...r, _k: i }));

  return (
    <React.Fragment>
      <section className="page-head" data-screen-label="Reviews">
        <div className="page-head-bg" style={{backgroundImage:"url('assets/huoqi/cf9a.jpg')"}}/>
        <div className="page-head-inner">
          <div className="section-kicker" style={{color:"var(--gold)"}}>Testimony · Five Years on Record</div>
          <h1>The <em>record.</em></h1>
          <p>Five-point-oh across 5,200 dispatches. Thirty-one countries. One returned die in five years.</p>
        </div>
      </section>

      <div className="atelier-stats">
        {[["5.0","Average rating"],["5,200","Impressions shipped"],["31","Countries"],["0","Returns, 2026"]].map((s,i) => (
          <div key={i} className="atelier-stat">
            <div className="atelier-stat-num">{s[0]}</div>
            <div className="atelier-stat-label">{s[1]}</div>
          </div>
        ))}
      </div>

      <div className="reviews-grid">
        {all.map(r => (
          <div key={r._k} className="review-card">
            <div className="review-stars">{"★".repeat(r.rating)}{"☆".repeat(5-r.rating)}</div>
            <div className="review-text">"{r.text}"</div>
            <div className="review-product">— {r.product}</div>
            <div className="review-meta">
              <span className="name">{r.name}</span>
              <span>{r.date}</span>
            </div>
          </div>
        ))}
      </div>
    </React.Fragment>
  );
}

// ============================================================
// JOURNAL
// ============================================================
function NoirJournal() {
  const { journal } = window.EVERLIT_DATA;
  const feature = journal[0];
  const rest = journal.slice(1);
  return (
    <React.Fragment>
      <section className="page-head" data-screen-label="Journal">
        <div className="page-head-bg" style={{backgroundImage:"url('assets/editorial/raw-5.jpg')"}}/>
        <div className="page-head-inner">
          <div className="section-kicker" style={{color:"var(--gold)"}}>The Journal · Vol. I</div>
          <h1>Field <em>notes.</em></h1>
          <p>Essays from the bench — on wax, on paper, on the strange persistence of the hand-sealed envelope.</p>
        </div>
      </section>

      <div className="journal-feature">
        <div className="journal-feature-image"><img src={feature.image} alt={feature.title}/></div>
        <div>
          <div className="section-kicker" style={{color:"var(--gold)"}}>{feature.kicker} · {feature.date} · {feature.read}</div>
          <h2>{feature.title}</h2>
          <p>{feature.excerpt}</p>
          <button className="noir-btn" data-hover><span>Read the essay</span><span>→</span></button>
        </div>
      </div>

      <div className="journal-list">
        {rest.map(j => (
          <div key={j.id} className="journal-card" data-hover>
            <div className="journal-card-img"><img src={j.image} alt={j.title}/></div>
            <div className="journal-card-kicker">{j.kicker}</div>
            <h3 className="journal-card-title">{j.title}</h3>
            <p className="journal-card-excerpt">{j.excerpt}</p>
            <div className="journal-card-meta">
              <span>{j.date}</span>
              <span>{j.read}</span>
            </div>
          </div>
        ))}
      </div>
    </React.Fragment>
  );
}

// ============================================================
// CHECKOUT
// ============================================================
function NoirCheckout({ cart, setCart, setRoute }) {
  const [step, setStep] = uN1(1);
  const [placed, setPlaced] = uN1(false);

  const subtotal = cart.reduce((s, i) => s + i.price * (i.qty || 1), 0);
  const shipping = cart.length ? (subtotal >= 120 ? 0 : 12) : 0;
  const total = subtotal + shipping;

  if (placed) {
    return (
      <div className="checkout-success" data-screen-label="Checkout · Done">
        <div className="section-kicker" style={{color:"var(--gold)"}}>Order · Dispatched MMXXVI</div>
        <h1>Thank <em>you.</em></h1>
        <p style={{fontFamily:"var(--f-serif)", fontSize:20, color:"var(--bone-dim)", lineHeight:1.6, fontWeight:300}}>
          Your order is at the bench. A test impression will be mailed before production. Expect the courier in five to ten days.
        </p>
        <div style={{marginTop:40}}>
          <button className="noir-btn" onClick={() => { setCart([]); setRoute("shop"); }} data-hover>
            <span>Back to the shop</span><span>→</span>
          </button>
        </div>
      </div>
    );
  }

  if (cart.length === 0) {
    return (
      <div className="checkout-success" data-screen-label="Checkout · Empty">
        <div className="section-kicker" style={{color:"var(--gold)"}}>The Bag</div>
        <h1>Empty, <em>for now.</em></h1>
        <p style={{fontFamily:"var(--f-serif)", fontSize:20, color:"var(--bone-dim)", lineHeight:1.6, fontWeight:300}}>
          Begin in the shop — seventeen standing seals, and the commission book is open.
        </p>
        <div style={{marginTop:40, display:"flex", gap:16, justifyContent:"center"}}>
          <button className="noir-btn" onClick={() => setRoute("shop")} data-hover><span>Enter the shop</span><span>→</span></button>
          <button className="noir-btn" onClick={() => setRoute("custom")} data-hover><span>Commission a seal</span><span>→</span></button>
        </div>
      </div>
    );
  }

  return (
    <div className="checkout" data-screen-label="Checkout">
      <div>
        <div className="checkout-steps">
          {[["01","The Bag"],["02","Correspondence"],["03","Payment"]].map(([n,l], i) => (
            <div key={n} className={"checkout-step" + (step===i+1?" on":"")} onClick={() => setStep(i+1)} data-hover>
              <span className="num">{n}</span>
              {l}
            </div>
          ))}
        </div>

        {step === 1 && (
          <div>
            {cart.map((it, i) => (
              <div key={i} className="checkout-item">
                <div className="checkout-item-img" style={{backgroundImage:`url('${it.image}')`}}/>
                <div className="checkout-item-info">
                  <div className="checkout-item-name">{it.name}</div>
                  <div className="checkout-item-sub">{it.shape || "Round · 30mm"} · {it.wax || "Bronze"} · Qty {it.qty || 1}</div>
                </div>
                <div className="checkout-item-price">${it.price}</div>
              </div>
            ))}
            <div style={{marginTop:40}}>
              <button className="noir-btn" onClick={() => setStep(2)} data-hover><span>Continue to address</span><span>→</span></button>
            </div>
          </div>
        )}

        {step === 2 && (
          <div className="custom-form" style={{gap:24}}>
            {[
              ["Name","text"],
              ["Correspondence address","email"],
              ["Street","text"],
              ["City · Postcode","text"],
              ["Country","text"],
            ].map(([l,t]) => (
              <div key={l} className="custom-field">
                <label>{l}</label>
                <input type={t} data-hover/>
              </div>
            ))}
            <div style={{marginTop:20}}>
              <button className="noir-btn" onClick={() => setStep(3)} data-hover><span>Continue to payment</span><span>→</span></button>
            </div>
          </div>
        )}

        {step === 3 && (
          <div className="custom-form" style={{gap:24}}>
            <div className="custom-field">
              <label>Card number</label>
              <input type="text" placeholder="4242 4242 4242 4242" data-hover/>
            </div>
            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:24}}>
              <div className="custom-field"><label>Expiry</label><input type="text" placeholder="MM / YY" data-hover/></div>
              <div className="custom-field"><label>CVC</label><input type="text" placeholder="•••" data-hover/></div>
            </div>
            <button className="custom-submit" onClick={() => setPlaced(true)} data-hover>
              Place the order · ${total}
            </button>
          </div>
        )}
      </div>

      <aside className="checkout-summary">
        <h3>Summary · {cart.length} item{cart.length!==1?"s":""}</h3>
        {cart.map((it, i) => (
          <div key={i} className="checkout-item" style={{padding:"14px 0"}}>
            <div className="checkout-item-img" style={{width:60, height:60, backgroundImage:`url('${it.image}')`}}/>
            <div className="checkout-item-info">
              <div className="checkout-item-name" style={{fontSize:16}}>{it.name}</div>
              <div className="checkout-item-sub">{it.wax || "Bronze"}</div>
            </div>
            <div className="checkout-item-price" style={{fontSize:15}}>${it.price}</div>
          </div>
        ))}
        <div className="checkout-totals">
          <div className="checkout-totals-row"><span>Subtotal</span><span>${subtotal}</span></div>
          <div className="checkout-totals-row"><span>Shipping</span><span>{shipping===0?"Free":`$${shipping}`}</span></div>
          <div className="checkout-totals-row grand"><span>Total</span><span>${total}</span></div>
        </div>
      </aside>
    </div>
  );
}

Object.assign(window, { NoirShop, NoirCollections, NoirProduct, NoirCustom, NoirWedding, NoirAtelier, NoirReviews, NoirJournal, NoirCheckout });