// EUMORPH — PDP, listing, cart, account

const { useState: useS3, useEffect: useE3, useMemo: useM3 } = React;

// Deterministic per-product values so provenance doesn't change on refresh.
function stableLot(id) {
  const s = String(id || "");
  let h = 0;
  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) % 9000;
  return String((h % 89) + 11); // 11..99
}
function inspectedDate(id) {
  const s = String(id || "");
  let h = 0;
  for (let i = 0; i < s.length; i++) h = (h * 17 + s.charCodeAt(i)) % 1000;
  // pick a day in the last ~6 weeks, deterministically
  const months = ["Jan","Feb","Mar"];
  const day = (h % 28) + 1;
  const m = months[h % months.length];
  return `${day} ${m} 2026`;
}

// ---------- LISTING (her shelf) ----------
function HerShelf({ go }) {
  const [filter, setFilter] = useS3("all");
  const products = (window.MC_DATA && window.MC_DATA.PRODUCTS) || [];
  const cats = [
    { k: "all", label: "Everything" },
    { k: "skin", label: "Skin" },
    { k: "scent", label: "Scent" },
    { k: "hair", label: "Hair" },
    { k: "body", label: "Body" },
  ];
  const matches = products.filter(p => {
    if (filter === "all") return true;
    const l = (p.line || "").toLowerCase();
    if (filter === "skin") return l.includes("skin");
    if (filter === "scent") return l.includes("fragrance");
    if (filter === "hair") return l.includes("hair");
    if (filter === "body") return l.includes("body");
    return true;
  });
  return (
    <section style={{ padding: "var(--s-10) 0" }}>
      <div className="container">
        <div className="eyebrow" style={{ marginBottom: 16 }}>The shelf · {matches.length} on the shelf</div>
        <h1 style={{ fontSize: "var(--t-72)", fontWeight: 300, lineHeight: 0.95, letterSpacing: "-0.025em", margin: "0 0 32px", fontVariationSettings: '"opsz" 144', maxWidth: "16ch" }}>
          Her <em style={{ color: "var(--accent)" }}>shelf</em>.<br/>
          What we keep, in <em style={{ color: "var(--accent)" }}>full</em>.
        </h1>
        <div style={{ display: "flex", gap: 28, paddingBottom: 24, borderBottom: "1px solid var(--rule)", marginBottom: 48, fontFamily: "JetBrains Mono, monospace", fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase" }}>
          {cats.map(c => (
            <span key={c.k}
              onClick={() => setFilter(c.k)}
              style={{ cursor: "pointer", color: filter === c.k ? "var(--accent)" : "var(--muted)", borderBottom: filter === c.k ? "1px solid var(--accent)" : "1px solid transparent", paddingBottom: 6 }}>
              {c.label}
            </span>
          ))}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "1px", background: "var(--rule)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
          {matches.map(p => {
            const b = bottleFor(p);
            return (
              <div key={p.id} className="week-cell" style={{ minHeight: 440 }} onClick={() => go("pdp", { id: p.id })}>
                <div className="day">{p.line.split("—").pop().trim()}</div>
                <div className="bottle-area"><Bottle kind={b.kind} color={b.color} height={200} /></div>
                <div className="brand-line"><Redact>{p.house}</Redact></div>
                <div className="descriptor" style={{ marginBottom: 12 }}><em>{p.name}</em></div>
                <div className="price">${p.price} · {p.size}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ---------- PDP ----------
function PDP({ id, go, addToBag }) {
  const products = (window.MC_DATA && window.MC_DATA.PRODUCTS) || [];
  const p = products.find(x => x.id === id) || products[0];
  if (!p) return null;
  const b = bottleFor(p);
  return (
    <div>
      <section className="pdp-v2">
        <div className="container">
          <div className="pdp-crumb">
            <a href="#" onClick={(e) => { e.preventDefault(); go("home"); }}>Eumorph</a>
            {" / "}
            <a href="#" onClick={(e) => { e.preventDefault(); go("her-shelf"); }}>{p.line.split("—")[0].trim()}</a>
            {" / "}
            <span style={{ color: "var(--ink)" }}>{p.name}</span>
          </div>
          <div className="pdp-grid">
            <div className="pdp-frame fade-in">
              <Bottle kind={b.kind} color={b.color} height={420} />
            </div>
            <div className="pdp-body fade-in">
              <div className="eyebrow" style={{ color: "var(--accent)" }}>{p.line}</div>
              <h1>
                <Redact>{p.house}</Redact><br/>
                <em>{p.name}</em>
              </h1>
              <div className="perfumer-line">
                {p.founder} · {p.founderRole || "—"} · <span style={{ textTransform: "none", letterSpacing: 0, fontStyle: "italic", fontFamily: "Fraunces, serif" }}>{p.origin}, est. {p.formedAt}</span>
              </div>
              <p className="lede">{p.blurb}</p>
              <div className="price-row">
                <span className="price">${p.price}</span>
                <span className="price-meta">{p.size}</span>
                {p.msrp && p.msrp > p.price && (
                  <span className="price-meta" style={{ color: "var(--accent)" }}>list ${p.msrp}</span>
                )}
              </div>
              <div className="add-row">
                <button className="btn-v2" onClick={() => { addToBag(p); go("cart"); }}>Add to bag</button>
                <button className="btn-v2 ghost" onClick={() => addToBag(p)}>Save for the file</button>
              </div>
              <div style={{ marginTop: 32, padding: 20, border: "1px solid var(--rule)", background: "var(--paper-soft)" }}>
                <div className="eyebrow" style={{ marginBottom: 8 }}>From Cécile, on this</div>
                <p style={{ margin: 0, fontStyle: "italic", fontSize: "var(--t-lead)", color: "var(--ink-soft)", lineHeight: 1.5 }}>
                  {pdpCecileNote(p)}
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="dossier-section">
        <div className="container">
          <div className="label">The story</div>
          <h2>How it <em>arrived</em> here.</h2>
          <div className="body">
            <p>{p.story}</p>
          </div>
        </div>
      </section>

      <section className="dossier-section">
        <div className="container" style={{ display: "grid", gridTemplateColumns: "5fr 7fr", gap: "var(--s-9)" }}>
          <div>
            <div className="label">The composition</div>
            <h2>What's <em>actually</em> in it.</h2>
          </div>
          <div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, background: "var(--rule)", border: "1px solid var(--rule)" }}>
              {(p.notes || []).map((n, i) => (
                <div key={i} style={{ background: "var(--paper)", padding: 20 }}>
                  <div className="eyebrow" style={{ marginBottom: 6 }}>Note {String(i + 1).padStart(2, "0")}</div>
                  <div style={{ fontSize: "var(--t-22)", fontStyle: "italic", fontWeight: 300 }}>{n}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
              {p.pH && <Spec k="pH" v={p.pH} />}
              {p.timeOfDay && <Spec k="When" v={p.timeOfDay} />}
              {p.family && <Spec k="Family" v={p.family} />}
              {p.sillage && <Spec k="Sillage" v={p.sillage} />}
              {p.longevity && <Spec k="Longevity" v={p.longevity} />}
              {p.size && <Spec k="Size" v={p.size} />}
            </div>
          </div>
        </div>
      </section>

      <section className="dossier-section">
        <div className="container" style={{ display: "grid", gridTemplateColumns: "5fr 7fr", gap: "var(--s-9)" }}>
          <div>
            <div className="label">The provenance</div>
            <h2>Where it <em>comes from</em>.</h2>
          </div>
          <div className="body">
            <p>
              {p.origin
                ? `Sourced from international distribution channels out of ${p.origin}, and inspected on arrival at our Brooklyn vault.`
                : "Acquired through the global distribution market and inspected on arrival at our Brooklyn vault."}
              {" "}Every unit is photographed, weighed,
              and assigned a lot number before it goes on the shelf. We refuse
              anything that arrives with a broken seal, missing batch code, or
              suspect packaging — every quarter, a few units do, and they're
              destroyed rather than discounted.
            </p>
            <div style={{ marginTop: 24, padding: 20, border: "1px solid var(--rule)", background: "var(--paper-soft)", display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 16 }}>
              <Spec k="Lot" v={`#${(p.id || "").slice(0, 4).toUpperCase()}-26-${stableLot(p.id)}`} />
              <Spec k="Origin" v={p.origin || "—"} />
              <Spec k="Inspected" v={inspectedDate(p.id)} />
              <Spec k="Manifest" v="On request" />
            </div>
            <p style={{ marginTop: 20, fontSize: 12, color: "var(--muted)", fontStyle: "italic", lineHeight: 1.5, fontFamily: "Fraunces, serif" }}>
              — Eumorph is an independent retailer. We are not affiliated with,
              sponsored by, or an authorized dealer of any of the brands we
              carry. All trademarks remain the property of their respective owners.
            </p>
          </div>
        </div>
      </section>

      <section className="dossier-section" style={{ background: "var(--paper-soft)" }}>
        <div className="container">
          <div className="label">Worn with</div>
          <h2>Quietly, alongside.</h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 32 }}>
            {products.filter(x => x.id !== p.id).slice(0, 3).map(x => {
              const xb = bottleFor(x);
              return (
                <div key={x.id} className="week-cell" style={{ minHeight: 360, border: "1px solid var(--rule)", background: "var(--paper)" }} onClick={() => go("pdp", { id: x.id })}>
                  <div className="day">{x.line.split("—").pop().trim()}</div>
                  <div className="bottle-area"><Bottle kind={xb.kind} color={xb.color} height={180} /></div>
                  <div className="brand-line"><Redact>{x.house}</Redact></div>
                  <div className="descriptor"><em>{x.name}</em></div>
                  <div className="price">${x.price}</div>
                </div>
              );
            })}
          </div>
        </div>
      </section>
    </div>
  );
}

function Spec({ k, v }) {
  return (
    <div>
      <div className="eyebrow" style={{ marginBottom: 6 }}>{k}</div>
      <div style={{ fontSize: 15, fontStyle: "italic" }}>{v}</div>
    </div>
  );
}

function pdpCecileNote(p) {
  const notes = {
    "biologique-p50": "Three nights only, on cotton — and stop if it stings. It is not for everyone, and it isn't trying to be.",
    "ab-rich-cream": "The one I keep for cold weeks, on the plane, after the dermabrasion. Generous layers; it absorbs faster than you'd think.",
    "mfk-baccarat": "A cathedral fragrance. Wear it for an evening you're not the host of.",
    "byredo-mojave": "For the office, the second meeting, and the hour after lunch. Quiet enough to be a signature.",
    "diptyque-philosykos": "I wear this in August when nothing else feels right. It is the entire fig tree, not the fruit.",
    "tomford-tobacco": "A library scent. Best on a wool coat, in the evening, when you intend to read.",
  };
  return notes[p.id] || "Wear this on a wrist for an afternoon before you commit. It will tell you what it is.";
}

// ---------- CART ----------
function Cart({ bag, setBag, go }) {
  const products = (window.MC_DATA && window.MC_DATA.PRODUCTS) || [];
  const lines = bag.map(b => ({ ...b, p: products.find(x => x.id === b.id) })).filter(l => l.p);
  const subtotal = lines.reduce((s, l) => s + l.p.price * l.qty, 0);
  const remove = (id) => setBag(b => b.filter(x => x.id !== id));

  // Cécile's cart note — chosen from real catalog, based on what's NOT
  // already in the bag, so she never recommends something we don't sell.
  const cecileCartNote = useM3(() => {
    if (lines.length === 0) return null;
    const have = new Set(lines.map(l => l.id));
    const linesText = lines.map(l => (l.p.line || "")).join(" ").toLowerCase();
    const hasSkin = /skin|treatment|cream|toner|serum|mask/.test(linesText);
    const hasScent = /eau|parfum|fragrance|extrait/.test(linesText);
    // Pair logic — if all skin, suggest a scent; if all scent, suggest skin
    let pickId = null;
    if (hasSkin && !hasScent) pickId = "diptyque-philosykos";
    else if (hasScent && !hasSkin) pickId = "ab-rich-cream";
    else pickId = "biologique-p50";
    if (have.has(pickId)) {
      // pick anything else
      const alt = products.find(x => !have.has(x.id));
      pickId = alt ? alt.id : null;
    }
    if (!pickId) return null;
    const pick = products.find(x => x.id === pickId);
    if (!pick) return null;
    const phrasings = {
      "diptyque-philosykos": "If you've nothing on the wrist yet, I'd add ",
      "ab-rich-cream": "Good list. The pairing I'd suggest \u2014 ",
      "biologique-p50": "And, if it isn't already on your shelf, ",
    };
    const lead = phrasings[pickId] || "Worth considering with this list \u2014 ";
    return { lead, pick };
  }, [lines, products]);

  const placeOrder = () => {
    if (lines.length === 0) return;
    // Persist a small confirmation slip; route to checkout-confirm.
    const orderNum = String(Math.floor(Date.now() / 60000) % 9999).padStart(4, "0");
    window.__lastOrder = {
      num: orderNum,
      lines: lines.map(l => ({ id: l.id, name: l.p.name, house: l.p.house, qty: l.qty, price: l.p.price })),
      total: subtotal,
      at: new Date().toISOString(),
    };
    setBag([]);
    go("order-confirmed", { num: orderNum, total: subtotal });
  };

  return (
    <section className="cart-section">
      <div className="container">
        <h1>Your <em>bag</em>.</h1>
        {lines.length === 0 ? (
          <div style={{ padding: "60px 0", borderTop: "1px solid var(--rule)" }}>
            <p style={{ fontSize: "var(--t-22)", fontStyle: "italic", color: "var(--muted)", maxWidth: "40ch" }}>
              Nothing yet. <a href="#" onClick={(e) => { e.preventDefault(); go("this-week"); }} style={{ color: "var(--accent)", borderBottom: "1px solid var(--accent)" }}>Start with this week's seven</a>, or <a href="#" onClick={(e) => { e.preventDefault(); window.__openCecile && window.__openCecile(); }} style={{ color: "var(--accent)", borderBottom: "1px solid var(--accent)" }}>ask Cécile</a>.
            </p>
          </div>
        ) : (
          <div className="cart-grid">
            <div>
              {lines.map(l => {
                const b = bottleFor(l.p);
                return (
                  <div key={l.id} className="cart-line">
                    <div className="thumb"><Bottle kind={b.kind} color={b.color} height={100} /></div>
                    <div>
                      <div className="eyebrow" style={{ marginBottom: 4 }}>{l.p.line}</div>
                      <div style={{ fontSize: 18, marginBottom: 4 }}>
                        <Redact>{l.p.house}</Redact>
                      </div>
                      <div style={{ fontStyle: "italic", fontSize: 16, marginBottom: 8 }}>{l.p.name}</div>
                      <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "var(--muted)", letterSpacing: "0.05em" }}>
                        {l.p.size} · qty {l.qty}
                      </div>
                      <div style={{ marginTop: 12 }}>
                        <span onClick={() => remove(l.id)} style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--muted)", cursor: "pointer", borderBottom: "1px solid var(--rule)", paddingBottom: 2 }}>Remove</span>
                      </div>
                    </div>
                    <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 14, alignSelf: "start" }}>${l.p.price * l.qty}</div>
                  </div>
                );
              })}
              {cecileCartNote && (
                <div style={{ marginTop: 32, padding: 20, background: "var(--paper-soft)", border: "1px solid var(--rule)" }}>
                  <div className="eyebrow" style={{ marginBottom: 8, color: "var(--accent)" }}>From Cécile</div>
                  <p style={{ margin: 0, fontStyle: "italic", fontSize: 15, color: "var(--ink-soft)" }}>
                    {cecileCartNote.lead}
                    <a
                      href="#"
                      onClick={(e) => { e.preventDefault(); go("pdp", { id: cecileCartNote.pick.id }); }}
                      style={{ color: "var(--accent)", borderBottom: "1px solid var(--accent)", fontStyle: "italic" }}
                    >
                      <Redact>{cecileCartNote.pick.house}</Redact> {cecileCartNote.pick.name}
                    </a>
                    .
                  </p>
                </div>
              )}
            </div>
            <div className="cart-summary">
              <div className="eyebrow" style={{ marginBottom: 16 }}>Summary</div>
              <div className="row"><span>Subtotal</span><span>${subtotal}</span></div>
              <div className="row"><span>Shipping</span><span style={{ fontStyle: "italic" }}>complimentary</span></div>
              <div className="row"><span>Hand-wrapped</span><span style={{ fontStyle: "italic" }}>included</span></div>
              <div className="row total"><span>Due</span><span>${subtotal}</span></div>
              <button className="btn-v2" style={{ width: "100%", marginTop: 24 }} onClick={placeOrder}>Place the order</button>
              <p style={{ marginTop: 16, fontSize: 12, color: "var(--muted)", fontStyle: "italic", lineHeight: 1.5 }}>
                Dispatched within two working days. Tracked, signed, sealed. If anything arrives less than perfect, write to Cécile.
              </p>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

// ---------- ORDER CONFIRMED ----------
function OrderConfirmed({ num, total, go }) {
  return (
    <section className="cart-section">
      <div className="container" style={{ maxWidth: 720, paddingTop: 80, paddingBottom: 120 }}>
        <div className="eyebrow" style={{ marginBottom: 16, color: "var(--accent)" }}>Order #{num} · placed</div>
        <h1 style={{ fontSize: "var(--t-72)", fontWeight: 300, lineHeight: 0.95, letterSpacing: "-0.025em", margin: "0 0 32px", fontVariationSettings: '"opsz" 144' }}>
          On its <em style={{ color: "var(--accent)" }}>way</em>.
        </h1>
        <p style={{ fontSize: 22, fontFamily: "Fraunces, serif", fontStyle: "italic", color: "var(--ink-soft)", maxWidth: "44ch", lineHeight: 1.5, marginBottom: 32 }}>
          Cécile has the order in front of her. Inspected, hand-wrapped, dispatched within two working days from Brooklyn. You'll have a tracking number by Wednesday morning.
        </p>
        <div style={{ padding: 20, border: "1px solid var(--rule)", background: "var(--paper-soft)", display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16, marginBottom: 32 }}>
          <Spec k="Order" v={`#${num}`} />
          <Spec k="Total" v={`$${total}`} />
          <Spec k="Ships from" v="Brooklyn, NY" />
        </div>
        <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
          <button className="btn-v2" onClick={() => go("home")}>Back to the issue</button>
          <button className="btn-v2 ghost" onClick={() => go("the-file")}>See it in The File</button>
        </div>
        <p style={{ marginTop: 48, fontSize: 13, color: "var(--muted)", fontStyle: "italic", lineHeight: 1.6, fontFamily: "Fraunces, serif" }}>
          — A small note will arrive with the box. If anything is less than perfect, write to <a href="mailto:cecile@eumorph.co" style={{ color: "var(--accent)" }}>cecile@eumorph.co</a>; she replies before 23h CET, same day.
        </p>
      </div>
    </section>
  );
}

// ---------- ACCOUNT (THE FILE) ----------
function TheFile({ go }) {
  const [signOutOpen, setSignOutOpen] = useS3(false);
  const lastOrder = (typeof window !== "undefined" && window.__lastOrder) || null;
  const scrollTo = (sel) => {
    const el = document.querySelector(sel);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };
  return (
    <section className="file-section">
      <div className="container">
        <div className="eyebrow" style={{ marginBottom: 16 }}>The file · M.</div>
        <h1 style={{ fontSize: "var(--t-72)", fontWeight: 300, lineHeight: 0.95, letterSpacing: "-0.025em", margin: "0 0 48px", fontVariationSettings: '"opsz" 144' }}>
          Cécile <em style={{ color: "var(--accent)" }}>remembers</em>.
        </h1>
        <div className="file-grid">
          <div className="file-side">
            <div className="nav-col">
              <a className="active" href="#" onClick={(e) => { e.preventDefault(); scrollTo("[data-file='note']"); }}>The file</a>
              <a href="#" onClick={(e) => { e.preventDefault(); scrollTo("[data-file='journal']"); }}>Skin journal</a>
              <a href="#" onClick={(e) => { e.preventDefault(); scrollTo("[data-file='dossiers']"); }}>Past dossiers</a>
              <a href="#" onClick={(e) => { e.preventDefault(); scrollTo("[data-file='standing']"); }}>Standing orders</a>
              <a href="#" onClick={(e) => { e.preventDefault(); scrollTo("[data-file='addresses']"); }}>Addresses &amp; cards</a>
              <a href="#" onClick={(e) => { e.preventDefault(); go("the-circle"); }}>Membership</a>
              <a href="#" onClick={(e) => { e.preventDefault(); setSignOutOpen(true); }}>Sign out</a>
            </div>
          </div>
          <div>
            {lastOrder && (
              <div className="file-card" data-file="last-order" style={{ borderColor: "var(--accent)" }}>
                <div className="label" style={{ color: "var(--accent)" }}>Order #{lastOrder.num} · placed</div>
                <p style={{ fontStyle: "italic", fontSize: "var(--t-lead)", lineHeight: 1.5, color: "var(--ink-soft)", margin: "0 0 12px" }}>
                  {lastOrder.lines.length === 1 ? "One item" : `${lastOrder.lines.length} items`} · ${lastOrder.total} · ships from Brooklyn within two working days.
                </p>
                {lastOrder.lines.map((l, i) => (
                  <div key={i} className="file-row"><span className="k">{l.qty}×</span><span className="v"><Redact>{l.house}</Redact> — <em>{l.name}</em></span></div>
                ))}
              </div>
            )}
            <div className="file-card" data-file="note">
              <div className="label">Cécile's last note</div>
              <p style={{ fontStyle: "italic", fontSize: "var(--t-lead)", lineHeight: 1.5, color: "var(--ink-soft)", margin: 0 }}>
                "M., the dryness you mentioned in October — I'd switch to the
                Rich Cream this week, and pause the P50 for a fortnight. Save
                the Baccarat for the December dinner. Reply if you'd like the
                full December list."
              </p>
              <div style={{ marginTop: 16, fontFamily: "JetBrains Mono, monospace", fontSize: 10, letterSpacing: "0.22em", color: "var(--muted)", textTransform: "uppercase" }}>
                Filed last Thursday · <a href="#" onClick={(e) => { e.preventDefault(); window.__openCecile && window.__openCecile(); }} style={{ color: "var(--accent)" }}>Reply</a>
              </div>
            </div>
            <div className="file-card" data-file="journal">
              <div className="label">What I know</div>
              <div className="file-row"><span className="k">Skin</span><span className="v">dry, reactive in winter, calmed by occlusives</span></div>
              <div className="file-row"><span className="k">Climate</span><span className="v">New York · 38°F · 42% humidity (today)</span></div>
              <div className="file-row"><span className="k">You wear</span><span className="v">Mojave Ghost on weekdays, Baccarat for evenings</span></div>
              <div className="file-row"><span className="k">You avoid</span><span className="v">heavy florals, tuberose, anything aldehydic</span></div>
              <div className="file-row"><span className="k">Standing</span><span className="v">P50, every six weeks · Rich Cream, every twelve</span></div>
              <div className="file-row"><span className="k">Allergies</span><span className="v">none recorded</span></div>
            </div>
            <div className="file-card" data-file="dossiers">
              <div className="label">Past dossiers</div>
              <div className="file-row"><span className="k">November</span><span className="v">Dry season — eight pages, two tablets</span></div>
              <div className="file-row"><span className="k">September</span><span className="v">The shoulder season — six pages</span></div>
              <div className="file-row"><span className="k">June</span><span className="v">A summer in the Peloponnese — four pages</span></div>
            </div>
            <div className="file-card" data-file="standing">
              <div className="label">Standing orders</div>
              <div className="file-row"><span className="k">P50 1970</span><span className="v">every six weeks · next ships 14 Mar</span></div>
              <div className="file-row"><span className="k">Rich Cream</span><span className="v">every twelve weeks · next ships 02 Apr</span></div>
              <p style={{ marginTop: 12, fontSize: 12, color: "var(--muted)", fontStyle: "italic", lineHeight: 1.5, fontFamily: "Fraunces, serif" }}>
                — To pause, skip, or change cadence, write to Cécile.
              </p>
            </div>
            <div className="file-card" data-file="addresses">
              <div className="label">Addresses &amp; cards</div>
              <div className="file-row"><span className="k">Ships to</span><span className="v">M. — apartment 4F, 87 Gansevoort, NY 10014</span></div>
              <div className="file-row"><span className="k">On file</span><span className="v">Visa ending 4421 · expires 09/27</span></div>
              <p style={{ marginTop: 12, fontSize: 12, color: "var(--muted)", fontStyle: "italic", lineHeight: 1.5, fontFamily: "Fraunces, serif" }}>
                — Updates handled by Cécile, not by form. Write to her.
              </p>
            </div>
          </div>
        </div>
        {signOutOpen && (
          <div onClick={() => setSignOutOpen(false)} style={{ position: "fixed", inset: 0, background: "rgba(28,26,23,0.5)", display: "grid", placeItems: "center", zIndex: 9999 }}>
            <div onClick={(e) => e.stopPropagation()} style={{ background: "var(--paper)", border: "1px solid var(--rule)", padding: 32, maxWidth: 420 }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Sign out</div>
              <p style={{ fontFamily: "Fraunces, serif", fontStyle: "italic", fontSize: 18, color: "var(--ink-soft)", marginBottom: 24, lineHeight: 1.5 }}>
                Cécile keeps the file regardless. You can come back any time.
              </p>
              <div style={{ display: "flex", gap: 12 }}>
                <button className="btn-v2" onClick={() => { setSignOutOpen(false); go("home"); }}>Sign out</button>
                <button className="btn-v2 ghost" onClick={() => setSignOutOpen(false)}>Stay</button>
              </div>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { HerShelf, PDP, Cart, OrderConfirmed, TheFile });