// All page-level views for Unique Furniture.
// Exported to window so app.jsx can render them.

const { useState, useMemo, useEffect, useRef } = React;

// ─────────────────────────────────────────────────────────────────────────
// HOME
// ─────────────────────────────────────────────────────────────────────────
function HomePage({ t, navigate, financingMode, onAddToCart }) {
  const featured = window.PRODUCTS.filter((p) => p.badge === "Bestseller" || p.badge === "Crafted by us").slice(0, 4);

  return (
    <main>
      {/* HERO */}
      <section className="hero page">
        <div>
          <div className="eyebrow">{t.hero.eyebrow}</div>
          <h1 className="display hero-headline">
            {t.hero.h.a} <em className="display-italic">{t.hero.h.em}</em><br/>{t.hero.h.b}
          </h1>
          <p className="hero-sub">{t.hero.sub}</p>
          <div className="hero-actions">
            <button className="btn" onClick={() => navigate("shop")}>{t.hero.ctaPrimary}</button>
            <button className="btn btn-ghost" onClick={() => navigate("workshop")}>{t.hero.ctaSecondary} <Icon name="arrow-right" size={14}/></button>
          </div>
          <div className="hero-stats">
            {t.stats.map((s, i) => (
              <div key={i}>
                <div className="hero-stat-n">{s.n}</div>
                <div className="hero-stat-l">{s.l}</div>
              </div>
            ))}
          </div>
        </div>
        <div>
          <div className="hero-media">
            <Placeholder name="Beaumont Tufted Sofa · in oxblood velvet" tone={1} corner="Crafted by us"/>
          </div>
          <div className="hero-mini">
            <Placeholder name="Mirage Cocktail" tone={4}/>
          </div>
        </div>
      </section>

      {/* MARQUEE */}
      <Marquee items={window.COLLECTIONS}/>

      {/* CATEGORIES */}
      <section className="section page">
        <SectionHead
          eyebrow={t.catHead.eyebrow}
          headline={<h2 className="display">{t.catHead.h.a} <em className="display-italic">{t.catHead.h.em}</em></h2>}
        />
        <div className="cat-tiles">
          {window.CATEGORIES.map((c) => (
            <div className="cat-tile" key={c.slug} onClick={() => navigate("shop", c.name)}>
              <Placeholder name="" tone={c.tone} className="ph"/>
              <div className="cat-tile-name">
                <span>{c.name}</span>
                <span className="cat-tile-count">{c.count} pieces</span>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* FEATURED */}
      <section className="section page" style={{ paddingTop: 0 }}>
        <SectionHead
          eyebrow={t.featured.eyebrow}
          headline={<h2 className="display">{t.featured.h.a} <em className="display-italic">{t.featured.h.em}</em></h2>}
          cta="Shop all bestsellers"
          onCta={() => navigate("shop")}
        />
        <div className="cat-grid">
          {featured.map((p) => (
            <ProductCard key={p.id} p={p} t={t} financingMode={financingMode} onOpen={(id) => navigate("product", id)}/>
          ))}
        </div>
      </section>

      {/* WORKSHOP STRIP */}
      <section className="workshop">
        <div className="workshop-inner">
          <div>
            <div className="workshop-tag">{t.workshop.tag}</div>
            <h2 style={{ marginTop: 20 }}>{t.workshop.h}</h2>
            <p style={{ marginTop: 24, fontSize: 16, lineHeight: 1.7 }}>{t.workshop.p}</p>
            <div style={{ marginTop: 32 }}>
              <a className="link-arrow" href="#" style={{ color: "var(--brass)", borderColor: "var(--brass)" }} onClick={(e)=>{e.preventDefault();navigate("workshop");}}>
                {t.workshop.cta} <Icon name="arrow-right" size={14}/>
              </a>
            </div>
          </div>
          <div className="workshop-media">
            <Placeholder name="Inside the workshop · NE 2nd Ave" dark/>
          </div>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section className="section page">
        <SectionHead
          eyebrow={t.testiHead.eyebrow}
          headline={<h2 className="display">{t.testiHead.h.a} <em className="display-italic">{t.testiHead.h.em}</em></h2>}
        />
        <div className="testi-row">
          {window.TESTIMONIALS.map((tt, i) => (
            <article className="testi" key={i}>
              <div className="testi-stars">★★★★★</div>
              <p className="testi-q">"{tt.q}"</p>
              <div className="testi-meta">
                <span>{tt.name}</span>
                <span style={{ color: "var(--ink-3)" }}>·</span>
                <span>{tt.city}</span>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* FINANCING CARD (volume varies via tweak) */}
      {financingMode !== "off" && (
        <section className="section page" style={{ paddingTop: 0 }}>
          <div className="fin-card">
            <div className="fin-card-body">
              <div className="eyebrow" style={{ color: "var(--brass)" }}>{t.financing.eyebrow}</div>
              <h2>{t.financing.h.a} <em className="display-italic">{t.financing.h.em}</em></h2>
              <p>{t.financing.p}</p>
              <button className="btn" style={{ background: "var(--brass)", borderColor: "var(--brass)", color: "var(--ink)" }}>{t.financing.cta}</button>
            </div>
            <div className="fin-card-aside">
              {t.financing.steps.map((s, i) => (
                <div className="fin-step" key={i}>
                  <div className="fin-step-n">0{i+1}</div>
                  <div>
                    <h5>{s.h}</h5>
                    <p>{s.p}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}
    </main>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// SHOP
// ─────────────────────────────────────────────────────────────────────────
function ShopPage({ t, navigate, financingMode, layoutDensity, initialCategory }) {
  const [cat, setCat] = useState(initialCategory || "All");
  const [maker, setMaker] = useState("all"); // all | own | partner
  const [priceBand, setPriceBand] = useState(null);
  const [sort, setSort] = useState(0);

  const filtered = useMemo(() => {
    let list = window.PRODUCTS;
    if (cat !== "All") list = list.filter((p) => p.cat === cat);
    if (maker === "own") list = list.filter((p) => p.own);
    if (maker === "partner") list = list.filter((p) => !p.own);
    if (priceBand) {
      list = list.filter((p) => p.price >= priceBand[0] && p.price < priceBand[1]);
    }
    list = [...list];
    if (sort === 2) list.sort((a, b) => a.price - b.price);
    if (sort === 3) list.sort((a, b) => b.price - a.price);
    return list;
  }, [cat, maker, priceBand, sort]);

  const cats = ["All", ...new Set(window.PRODUCTS.map((p) => p.cat))];
  const priceBands = [
    ["Under $500", [0, 500]],
    ["$500 – $1,000", [500, 1000]],
    ["$1,000 – $2,000", [1000, 2000]],
    ["$2,000 – $3,000", [2000, 3000]],
    ["$3,000+", [3000, 99999]],
  ];

  return (
    <main className="page shop-layout">
      <aside className="filter">
        <h4>{t.shop.filters.cat}</h4>
        <ul>
          {cats.map((c) => (
            <li key={c} className={cat === c ? "active" : ""} onClick={() => setCat(c)}>
              <span>{c}</span>
              <small>{c === "All" ? window.PRODUCTS.length : window.PRODUCTS.filter((p) => p.cat === c).length}</small>
            </li>
          ))}
        </ul>
        <h4>{t.shop.filters.maker}</h4>
        <ul>
          <li className={maker === "all" ? "active" : ""} onClick={() => setMaker("all")}>{t.shop.maker.all}</li>
          <li className={maker === "own" ? "active" : ""} onClick={() => setMaker("own")}>{t.shop.maker.own}</li>
          <li className={maker === "partner" ? "active" : ""} onClick={() => setMaker("partner")}>{t.shop.maker.partner}</li>
        </ul>
        <h4>{t.shop.filters.price}</h4>
        <ul>
          <li className={!priceBand ? "active" : ""} onClick={() => setPriceBand(null)}>Any price</li>
          {priceBands.map(([label, range]) => (
            <li key={label} className={priceBand === range ? "active" : ""} onClick={() => setPriceBand(range)}>{label}</li>
          ))}
        </ul>
      </aside>
      <div>
        <div className="shop-tools">
          <div className="shop-tools-l">
            <h1>{cat === "All" ? t.shop.h : cat}</h1>
            <span>{t.shop.sub(filtered.length)}</span>
          </div>
          <div className="shop-tools-r">
            <label>{t.shop.sort}</label>
            <select value={sort} onChange={(e) => setSort(+e.target.value)}>
              {t.shop.sortOptions.map((o, i) => <option key={i} value={i}>{o}</option>)}
            </select>
          </div>
        </div>
        <div className={`cat-grid ${layoutDensity}`}>
          {filtered.map((p) => (
            <ProductCard key={p.id} p={p} t={t} financingMode={financingMode} onOpen={(id) => navigate("product", id)}/>
          ))}
        </div>
      </div>
    </main>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// PRODUCT DETAIL
// ─────────────────────────────────────────────────────────────────────────
function ProductPage({ t, navigate, financingMode, onAddToCart, id }) {
  const p = window.PRODUCTS.find((x) => x.id === id) || window.PRODUCTS[0];
  const [sw, setSw] = useState(0);
  const [size, setSize] = useState(0);
  const [qty, setQty] = useState(1);
  const [openTabs, setOpenTabs] = useState({ details: true });

  const related = window.PRODUCTS.filter((x) => x.cat === p.cat && x.id !== p.id).slice(0, 4);

  return (
    <main>
      <div className="page" style={{ paddingTop: 18, paddingBottom: 0 }}>
        <a className="link-arrow" href="#" style={{ borderColor: "transparent", paddingLeft: 0 }} onClick={(e)=>{e.preventDefault();navigate("shop");}}>
          <Icon name="arrow-left" size={14}/> {t.pdp.back}
        </a>
      </div>
      <div className="page pdp">
        <div className="pdp-gal">
          <div className="pdp-gal-main">
            <Placeholder name={p.name} tone={p.tone} corner={p.own ? "Crafted by us" : p.partner} className="ph"/>
          </div>
          <div className="pdp-gal-thumb">
            <Placeholder name="Detail · stitching" tone={(p.tone % 6) + 1} className="ph"/>
          </div>
          <div className="pdp-gal-thumb">
            <Placeholder name="Detail · arm" tone={((p.tone + 1) % 6) + 1} className="ph"/>
          </div>
          <div className="pdp-gal-thumb">
            <Placeholder name="In room" tone={((p.tone + 2) % 6) + 1} className="ph"/>
          </div>
          <div className="pdp-gal-thumb">
            <Placeholder name="Material swatch" tone={((p.tone + 3) % 6) + 1} className="ph"/>
          </div>
        </div>

        <div className="pdp-info">
          <div className="eyebrow">{p.cat} · {p.sub}</div>
          <h1>{p.name}</h1>
          <div className="pdp-price">
            ${p.price.toLocaleString()}
            {p.was && <span className="pdp-price-was">${p.was.toLocaleString()}</span>}
          </div>
          {p.finance > 0 && financingMode !== "off" && (
            financingMode === "loud" ? (
              <div className="pdp-fin">
                <strong>{t.pdp.financeLoud(p.finance)}</strong><br/>
                <span style={{ color: "var(--ink-3)" }}>Soft credit check · Decision in minutes</span>
              </div>
            ) : financingMode === "normal" ? (
              <div className="pdp-fin">{t.pdp.financeQuiet(p.finance)}</div>
            ) : (
              <div className="pdp-fin pdp-fin-quiet">{t.pdp.financeQuiet(p.finance)}</div>
            )
          )}

          <div className="pdp-opt-h">
            <span>{t.pdp.color}</span> <small>{["Oxblood","Caramel","Navy","Olive","Brass"][sw] || "Oxblood"}</small>
          </div>
          <div className="pdp-swatches">
            {p.swatches.map((c, i) => (
              <div key={i} className={`pdp-sw ${sw === i ? "selected" : ""}`} style={{ background: c }} onClick={() => setSw(i)}/>
            ))}
          </div>

          {p.sizes.length > 1 && (
            <>
              <div className="pdp-opt-h"><span>{t.pdp.size}</span></div>
              <div className="pdp-sz">
                {p.sizes.map((s, i) => (
                  <button key={i} className={size === i ? "selected" : ""} onClick={() => setSize(i)}>{s}</button>
                ))}
              </div>
            </>
          )}

          <div className="pdp-opt-h"><span>{t.pdp.qty}</span></div>
          <div className="qty">
            <button onClick={() => setQty(Math.max(1, qty - 1))}><Icon name="minus" size={14}/></button>
            <input value={qty} onChange={(e) => setQty(Math.max(1, +e.target.value || 1))}/>
            <button onClick={() => setQty(qty + 1)}><Icon name="plus" size={14}/></button>
          </div>

          <div className="pdp-cart-row">
            <button className="btn btn-lg" style={{ flex: 1 }} onClick={() => onAddToCart({ ...p, qty, color: sw, size })}>
              {t.pdp.addToCart} — ${(p.price * qty).toLocaleString()}
            </button>
            <button className="btn btn-outline btn-lg" title={t.pdp.addToWishlist}><Icon name="heart"/></button>
          </div>

          <div className="pdp-trust">
            <div><Icon name="truck" size={18}/><div><strong>{t.pdp.trust[0].h}</strong>{t.pdp.trust[0].p}</div></div>
            <div><Icon name="shield" size={18}/><div><strong>{t.pdp.trust[1].h}</strong>{t.pdp.trust[1].p}</div></div>
            <div><Icon name="return" size={18}/><div><strong>{t.pdp.trust[2].h}</strong>{t.pdp.trust[2].p}</div></div>
          </div>

          <div className="pdp-tabs">
            <details className="pdp-tab" open>
              <summary>{t.pdp.tabs.details}</summary>
              <p>{p.desc}</p>
            </details>
            <details className="pdp-tab">
              <summary>{t.pdp.tabs.specs}</summary>
              <dl>
                {Object.entries(p.specs).map(([k, v]) => <React.Fragment key={k}><dt>{k}</dt><dd>{v}</dd></React.Fragment>)}
              </dl>
            </details>
            <details className="pdp-tab">
              <summary>{t.pdp.tabs.delivery}</summary>
              <p>Free white-glove delivery within Miami-Dade for orders over $999. Standard delivery $149. Workshop pieces ship in 4-6 weeks. In-stock partner pieces ship in 1-2 weeks. Includes placement and packing-material removal.</p>
            </details>
            <details className="pdp-tab">
              <summary>{t.pdp.tabs.returns}</summary>
              <p>30-day comfort guarantee on every order. Custom workshop pieces carry a lifetime frame warranty. Partner pieces follow the maker's warranty (typically 5-10 years on frames, 1 year on upholstery).</p>
            </details>
          </div>
        </div>
      </div>

      {/* Related */}
      <section className="section page" style={{ paddingTop: 40 }}>
        <SectionHead
          eyebrow="You might also like"
          headline={<h2 className="display">More from <em className="display-italic">{p.cat}</em></h2>}
        />
        <div className="cat-grid">
          {related.map((rp) => (
            <ProductCard key={rp.id} p={rp} t={t} financingMode={financingMode} onOpen={(id) => navigate("product", id)}/>
          ))}
        </div>
      </section>
    </main>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// CART
// ─────────────────────────────────────────────────────────────────────────
function CartPage({ t, navigate, cart, setCart, financingMode }) {
  const lines = cart.map((c) => {
    const p = window.PRODUCTS.find((x) => x.id === c.id);
    return { ...p, qty: c.qty, color: c.color, size: c.size };
  });
  const subtotal = lines.reduce((s, l) => s + l.price * l.qty, 0);
  const delivery = subtotal >= 999 ? 0 : subtotal > 0 ? 149 : 0;
  const tax = Math.round(subtotal * 0.07);
  const total = subtotal + delivery + tax;
  const monthly = Math.round(total / 12);

  function setQty(i, q) {
    if (q <= 0) {
      const next = [...cart]; next.splice(i, 1); setCart(next);
    } else {
      const next = [...cart]; next[i] = { ...next[i], qty: q }; setCart(next);
    }
  }

  if (!cart.length) {
    return (
      <main className="page" style={{ paddingTop: 80, paddingBottom: 120, textAlign: "center" }}>
        <h1 className="display" style={{ fontSize: "clamp(40px,5vw,72px)", margin: 0 }}>{t.cart.h}</h1>
        <p className="dim" style={{ marginTop: 18 }}>{t.cart.empty}</p>
        <button className="btn" style={{ marginTop: 28 }} onClick={() => navigate("shop")}>{t.cart.keepShopping}</button>
      </main>
    );
  }

  return (
    <main className="page cart-layout">
      <div>
        <h1 className="display" style={{ fontSize: "clamp(34px,4vw,52px)", margin: "0 0 22px" }}>{t.cart.h}</h1>
        {lines.map((l, i) => (
          <div className="cart-line" key={i}>
            <div className="cart-line-media">
              <Placeholder name={l.name} tone={l.tone} className="ph"/>
            </div>
            <div>
              <small>{l.cat} · {l.sub}</small>
              <h4>{l.name}</h4>
              <div style={{ display: "flex", gap: 8, alignItems: "center", marginTop: 6 }}>
                <span style={{ width: 14, height: 14, borderRadius: 2, background: l.swatches[l.color], outline: "1px solid var(--line)" }}/>
                <small style={{ textTransform: "none", letterSpacing: 0, color: "var(--ink-2)" }}>{l.sizes[l.size]}</small>
              </div>
              <div className="cart-line-q">
                <div className="qty" style={{ height: 36 }}>
                  <button onClick={() => setQty(i, l.qty - 1)} style={{ height: 34, width: 34 }}><Icon name="minus" size={12}/></button>
                  <input value={l.qty} readOnly style={{ height: 34, width: 34 }}/>
                  <button onClick={() => setQty(i, l.qty + 1)} style={{ height: 34, width: 34 }}><Icon name="plus" size={12}/></button>
                </div>
                <a href="#" onClick={(e) => { e.preventDefault(); setQty(i, 0); }}>{t.cart.remove}</a>
              </div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>${(l.price * l.qty).toLocaleString()}</div>
              {l.was && <div className="pcard-price-was" style={{ marginTop: 4 }}>${(l.was * l.qty).toLocaleString()}</div>}
            </div>
          </div>
        ))}
      </div>
      <aside className="cart-summary">
        <h3>{t.cart.summary}</h3>
        <div className="cart-row"><span>{t.cart.subtotal}</span><span>${subtotal.toLocaleString()}</span></div>
        <div className="cart-row"><span>{t.cart.delivery}</span><span>{delivery === 0 ? t.cart.free : `$${delivery}`}</span></div>
        <div className="cart-row"><span>{t.cart.tax}</span><span>${tax.toLocaleString()}</span></div>
        <div className="cart-row total"><span>{t.cart.total}</span><span>${total.toLocaleString()}</span></div>
        {financingMode !== "off" && (
          <div className="cart-fin">{t.cart.financeLine(monthly)}</div>
        )}
        <button className="btn btn-lg" style={{ width: "100%", marginTop: 14 }} onClick={() => navigate("checkout")}>{t.cart.checkout}</button>
        <div className="cart-promo">
          <input placeholder={t.cart.promoPh}/>
          <button>{t.cart.apply}</button>
        </div>
      </aside>
    </main>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// CHECKOUT
// ─────────────────────────────────────────────────────────────────────────
function CheckoutPage({ t, navigate, cart, financingMode }) {
  const [pay, setPay] = useState("card");
  const lines = cart.map((c) => ({ ...window.PRODUCTS.find((x) => x.id === c.id), qty: c.qty, color: c.color, size: c.size }));
  const subtotal = lines.reduce((s, l) => s + l.price * l.qty, 0);
  const delivery = subtotal >= 999 ? 0 : subtotal > 0 ? 149 : 0;
  const tax = Math.round(subtotal * 0.07);
  const total = subtotal + delivery + tax;
  const monthly = Math.round(total / 12);

  return (
    <main className="page co">
      <div>
        <h1 className="display" style={{ fontSize: "clamp(34px,4vw,52px)", margin: "0 0 24px" }}>{t.co.h}</h1>

        <h2>{t.co.contact}</h2>
        <div className="co-grid">
          <div className="input-wrap full"><label>{t.co.email}</label><input className="input" defaultValue="marie.l@example.com"/></div>
          <div className="input-wrap full"><label>{t.co.phone}</label><input className="input" defaultValue="(305) 555-0188"/></div>
        </div>

        <h2>{t.co.ship}</h2>
        <div className="co-grid">
          <div className="input-wrap"><label>{t.co.first}</label><input className="input" defaultValue="Marie"/></div>
          <div className="input-wrap"><label>{t.co.last}</label><input className="input" defaultValue="Laurent"/></div>
          <div className="input-wrap full"><label>{t.co.addr}</label><input className="input" defaultValue="412 NE 79th St"/></div>
          <div className="input-wrap full"><label>{t.co.addr2}</label><input className="input"/></div>
          <div className="input-wrap"><label>{t.co.city}</label><input className="input" defaultValue="Miami"/></div>
          <div className="input-wrap" style={{ display:"grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
            <div><label>{t.co.state}</label><select className="input" defaultValue="FL"><option>FL</option><option>GA</option></select></div>
            <div><label>{t.co.zip}</label><input className="input" defaultValue="33138"/></div>
          </div>
        </div>

        <h2>{t.co.pay}</h2>
        <label className={`co-pay-opt ${pay === "card" ? "selected" : ""}`}>
          <input type="radio" name="pay" checked={pay === "card"} onChange={() => setPay("card")}/>
          <div style={{ flex: 1 }}>
            <h4>{t.co.payCard.h}</h4>
            <p>{t.co.payCard.p}</p>
          </div>
          <div style={{ display: "flex", gap: 4 }}>
            {["VISA","MC","AMEX","DISC"].map(b => <span key={b} style={{ fontSize: 9, fontWeight: 700, padding: "3px 6px", border: "1px solid var(--line)", borderRadius: 3, color: "var(--ink-3)" }}>{b}</span>)}
          </div>
        </label>
        <label className={`co-pay-opt ${pay === "fin" ? "selected" : ""}`}>
          <input type="radio" name="pay" checked={pay === "fin"} onChange={() => setPay("fin")}/>
          <div style={{ flex: 1 }}>
            <h4>{t.co.payFinance.h}</h4>
            <p>{t.co.payFinance.p.replace("$89", `$${monthly}`)}</p>
          </div>
          <span className="co-pay-opt-tag">{t.co.payFinance.tag}</span>
        </label>
        <label className={`co-pay-opt ${pay === "cash" ? "selected" : ""}`}>
          <input type="radio" name="pay" checked={pay === "cash"} onChange={() => setPay("cash")}/>
          <div style={{ flex: 1 }}>
            <h4>{t.co.payCash.h}</h4>
            <p>{t.co.payCash.p}</p>
          </div>
        </label>

        {pay === "card" && (
          <div className="co-grid" style={{ marginTop: 20 }}>
            <div className="input-wrap full"><label>Card number</label><input className="input" placeholder="1234 5678 9012 3456"/></div>
            <div className="input-wrap"><label>Expiration</label><input className="input" placeholder="MM / YY"/></div>
            <div className="input-wrap"><label>CVC</label><input className="input" placeholder="123"/></div>
          </div>
        )}

        <button className="btn btn-lg" style={{ width: "100%", marginTop: 32 }}>{t.co.place} — ${total.toLocaleString()}</button>
      </div>

      <aside className="cart-summary" style={{ position: "sticky", top: 100 }}>
        <h3>{t.co.summary}</h3>
        {lines.map((l, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "56px 1fr auto", gap: 12, padding: "10px 0", borderBottom: "1px solid var(--line)", alignItems: "center" }}>
            <div style={{ aspectRatio: 1, overflow: "hidden", borderRadius: 4 }}>
              <Placeholder name={l.name} tone={l.tone} className="ph"/>
            </div>
            <div>
              <div style={{ fontWeight: 600, fontSize: 13 }}>{l.name}</div>
              <small style={{ color: "var(--ink-3)", fontSize: 11 }}>Qty {l.qty} · {l.sizes[l.size]}</small>
            </div>
            <div style={{ fontVariantNumeric: "tabular-nums", fontSize: 13 }}>${(l.price * l.qty).toLocaleString()}</div>
          </div>
        ))}
        <div className="cart-row" style={{ marginTop: 12 }}><span>{t.cart.subtotal}</span><span>${subtotal.toLocaleString()}</span></div>
        <div className="cart-row"><span>{t.cart.delivery}</span><span>{delivery === 0 ? t.cart.free : `$${delivery}`}</span></div>
        <div className="cart-row"><span>{t.cart.tax}</span><span>${tax.toLocaleString()}</span></div>
        <div className="cart-row total"><span>{t.cart.total}</span><span>${total.toLocaleString()}</span></div>
      </aside>
    </main>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// ABOUT / WORKSHOP
// ─────────────────────────────────────────────────────────────────────────
function AboutPage({ t, navigate }) {
  return (
    <main>
      <section className="about-hero">
        <div>
          <div className="eyebrow">{t.about.eyebrow}</div>
          <h1>{t.about.h.a} <em>{t.about.h.em}</em></h1>
          <p>{t.about.p}</p>
          <div style={{ marginTop: 28 }}>
            <button className="btn btn-outline" onClick={() => navigate("contact")}>Visit the showroom <Icon name="arrow-right" size={14}/></button>
          </div>
        </div>
        <div style={{ aspectRatio: 1.05, overflow: "hidden", borderRadius: 4 }}>
          <Placeholder name="Tarek in the workshop · 2024" tone={3} className="ph"/>
        </div>
      </section>

      <div className="about-img-row">
        <div><Placeholder name="Hand-tying springs" tone={2} className="ph"/></div>
        <div><Placeholder name="Walnut detail" tone={5} className="ph"/></div>
        <div><Placeholder name="The showroom floor" tone={1} className="ph"/></div>
      </div>

      <section className="about-pillars">
        {t.about.pillars.map((pl, i) => (
          <div className="about-pillar" key={i}>
            <div className="eyebrow">0{i+1} · {["The build","The price","The pace"][i]}</div>
            <h3>{pl.h}</h3>
            <p>{pl.p}</p>
          </div>
        ))}
      </section>

      <Marquee items={window.COLLECTIONS}/>
    </main>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// CONTACT / SHOWROOM
// ─────────────────────────────────────────────────────────────────────────
function ContactPage({ t }) {
  return (
    <main className="page contact">
      <div>
        <div className="eyebrow">{t.nav.showroom}</div>
        <h1>{t.contact.h.a} <em style={{ fontStyle: "italic", fontWeight: 300, color: "var(--accent)" }}>{t.contact.h.em}</em></h1>
        <p>{t.contact.p}</p>

        <div className="contact-block">
          <h4>{t.contact.visit}</h4>
          <p>{t.contact.visitText}</p>
        </div>
        <div className="contact-block">
          <h4>{t.contact.hours}</h4>
          <p>{t.contact.hoursText}</p>
        </div>
        <div className="contact-block">
          <h4>{t.contact.call}</h4>
          <p>{t.contact.callText}</p>
        </div>
        <div className="contact-block">
          <h4>{t.contact.whatsapp}</h4>
          <p>{t.contact.whatsappText}</p>
        </div>
        <div className="contact-block">
          <h4>{t.contact.email}</h4>
          <p>{t.contact.emailText}</p>
        </div>

        <div style={{ display: "flex", gap: 12, marginTop: 32 }}>
          <button className="btn">Book a design appointment</button>
          <a className="link-arrow" href="https://maps.app.goo.gl/DRsMQL8FVsq5xdaZ8" target="_blank">Get directions <Icon name="arrow-right" size={14}/></a>
        </div>
      </div>
      <div className="contact-map">
        <div className="map-pulse"/>
        <div className="map-pin"/>
        <div style={{ position: "absolute", bottom: 20, left: 20, right: 20, background: "var(--bg)", padding: "14px 18px", borderRadius: 4, boxShadow: "0 8px 24px rgba(0,0,0,.12)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div>
            <div style={{ fontFamily: "var(--display)", fontSize: 20 }}>Unique · Little Haiti</div>
            <small style={{ color: "var(--ink-3)" }}>8421 NE 2nd Ave</small>
          </div>
          <a className="link-arrow" href="https://maps.app.goo.gl/DRsMQL8FVsq5xdaZ8" target="_blank" style={{ borderColor: "transparent" }}>Maps <Icon name="arrow-right" size={12}/></a>
        </div>
      </div>
    </main>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// COLLECTIONS landing (light page — themed groupings)
// ─────────────────────────────────────────────────────────────────────────
function CollectionsPage({ t, navigate, financingMode }) {
  return (
    <main>
      <section className="about-hero">
        <div>
          <div className="eyebrow">Collections</div>
          <h1>Five rooms, <em>one signature.</em></h1>
          <p>Each of our collections is a complete room: matching pieces, considered together. Mix or stay within a single line — both work.</p>
        </div>
        <div style={{ aspectRatio: 1.05, overflow: "hidden", borderRadius: 4 }}>
          <Placeholder name="Estancia · Walnut & Brass · the full room" tone={6} className="ph"/>
        </div>
      </section>

      {window.COLLECTIONS.map((c, idx) => {
        const tone = (idx % 6) + 1;
        const inCollection = window.PRODUCTS.slice(idx * 2, idx * 2 + 3);
        return (
          <section key={c} className="section page" style={{ paddingTop: 0 }}>
            <SectionHead
              eyebrow={`Collection 0${idx + 1}`}
              headline={<h2 className="display"><em className="display-italic">{c.split(" · ")[0]}</em><br/>{c.split(" · ")[1]}</h2>}
              cta="See full collection"
              onCta={() => navigate("shop")}
            />
            <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gap: 14 }}>
              <div style={{ aspectRatio: 1.4, overflow: "hidden", borderRadius: 4 }}>
                <Placeholder name={`${c.split(" · ")[0]} — full room`} tone={tone} className="ph"/>
              </div>
              {inCollection.map((p) => (
                <div key={p.id} style={{ aspectRatio: 0.85, overflow: "hidden", borderRadius: 4, cursor: "pointer" }} onClick={() => navigate("product", p.id)}>
                  <Placeholder name={p.name} tone={(tone % 6) + 1} className="ph"/>
                </div>
              ))}
            </div>
          </section>
        );
      })}
    </main>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// WORKSHOP page (story-driven)
// ─────────────────────────────────────────────────────────────────────────
function WorkshopPage({ t, navigate }) {
  return (
    <main>
      <section className="about-hero">
        <div>
          <div className="eyebrow">The Workshop</div>
          <h1>A four-person team, <em>twelve years together.</em></h1>
          <p>One block north of the showroom, on a quiet stretch of NE 2nd Avenue, is the room where about a third of our catalog is actually built. Hardwood comes in raw. Sofas leave finished. Everything in between happens here.</p>
        </div>
        <div style={{ aspectRatio: 1.05, overflow: "hidden", borderRadius: 4 }}>
          <Placeholder name="The frame room" dark className="ph"/>
        </div>
      </section>

      <section className="section page" style={{ paddingTop: 40 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14 }}>
          {[
            { name: "01 · Selecting the lumber", tone: 5 },
            { name: "02 · The frame", tone: 3 },
            { name: "03 · Eight-way hand-tied", tone: 2 },
            { name: "04 · Foam & wrap", tone: 4 },
            { name: "05 · Upholstery", tone: 1 },
            { name: "06 · The stamp", tone: 6 },
          ].map((s, i) => (
            <div key={i} style={{ aspectRatio: 1.15, overflow: "hidden", borderRadius: 4 }}>
              <Placeholder name={s.name} tone={s.tone} className="ph"/>
            </div>
          ))}
        </div>
      </section>

      <section className="workshop">
        <div className="workshop-inner">
          <div>
            <div className="workshop-tag">Look for the stamp</div>
            <h2 style={{ marginTop: 20 }}>Every piece we build carries the same mark.</h2>
            <p style={{ marginTop: 24, fontSize: 16, lineHeight: 1.7 }}>A small brass-stamped seal on the underside of every workshop piece. It's how you know — and how we know. On the site, look for the "Crafted by us" tag on a product card.</p>
            <div style={{ marginTop: 32 }}>
              <button className="btn" style={{ background: "var(--brass)", borderColor: "var(--brass)", color: "var(--ink)" }} onClick={() => navigate("shop")}>Shop the workshop catalog</button>
            </div>
          </div>
          <div className="workshop-media">
            <Placeholder name="The brass stamp · close-up" dark className="ph"/>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { HomePage, ShopPage, ProductPage, CartPage, CheckoutPage, AboutPage, ContactPage, CollectionsPage, WorkshopPage });