// ── Collection (shop all) page — gender + category + sort ────────────

const CATEGORIES = ['All', 'Biker', 'Bomber', 'Café Racer', 'Aviator', 'Coat', 'Blazer', 'Vest', 'Hooded', 'Countryside', 'Pants', 'Sets', 'Skirts'];
const GENDERS    = ['All', 'Men', 'Women'];
const SORTS      = [
  { id: 'featured', label: 'Featured' },
  { id: 'new',      label: 'Newest' },
  { id: 'asc',      label: 'Price · low–high' },
  { id: 'desc',     label: 'Price · high–low' },
];

// ── Product card — used by Collection grid and Related Products ───────
function ProductCard({ product, goTo, className = '' }) {
  const loPrice = useCurrency();
  const img = product.images && product.images[0];
  return (
    <div
      className={`card${className ? ' ' + className : ''}`}
      onClick={() => goTo('product', { product })}
    >
      {img ? (
        <div style={{
          aspectRatio: '3/4', overflow: 'hidden',
          position: 'relative', background: 'var(--surface)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <img
            src={img}
            alt={product.name}
            loading="lazy"
            style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }}
          />
        </div>
      ) : (
        <Editorial product={product} ratio="3/4" />
      )}
      {(() => {
        const sale = window.getSaleInfo && window.getSaleInfo(product);
        return (
          <>
            <div className="meta" style={sale ? { alignItems: 'flex-start' } : {}}>
              <span className="name">{product.frenchName || product.name}</span>
              {sale ? (
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 3 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                    <span style={{
                      fontSize: 11, color: 'var(--fg-3)', textDecoration: 'line-through',
                      fontFamily: 'var(--font-mono)',
                    }}>
                      {loPrice(sale.original)}
                    </span>
                    <span style={{
                      fontSize: 9, fontWeight: 700, letterSpacing: '.07em',
                      background: '#c0392b', color: '#fff',
                      padding: '2px 5px', borderRadius: 2,
                    }}>
                      -{sale.percent}% OFF
                    </span>
                  </div>
                  <span className="price" style={{ color: '#c0392b', fontWeight: 700 }}>
                    {loPrice(sale.sale)}
                  </span>
                </div>
              ) : (
                <span className="price">{loPrice(product.price)}</span>
              )}
            </div>
            <div className="status">{product.category} · {product.finish}</div>
          </>
        );
      })()}
    </div>
  );
}

// ── Shared filter-pill (desktop bar) ─────────────────────────────────
function FilterPill({ label, active, onClick }) {
  return (
    <button onClick={onClick} className="mono" style={{
      color: active ? 'var(--fg)' : 'var(--fg-2)',
      padding: '6px 0', position: 'relative', whiteSpace: 'nowrap',
    }}>
      {label}
      {active && <span style={{
        position: 'absolute', left: 0, right: 0, bottom: -2,
        height: 1, background: 'var(--fg)',
      }} />}
    </button>
  );
}

// ── Mobile filter bottom-sheet ────────────────────────────────────────
function FilterSheet({ open, onClose, gender, cat, sort, onApply }) {
  const [pg, setPg] = React.useState(gender);
  const [pc, setPc] = React.useState(cat);
  const [ps, setPs] = React.useState(sort);

  // Sync every time sheet opens
  React.useEffect(() => {
    if (open) { setPg(gender); setPc(cat); setPs(sort); }
  }, [open, gender, cat, sort]);

  // Prevent body scroll while sheet is visible
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const apply = () => { onApply(pg, pc, ps); onClose(); };
  const reset = () => { setPg('All'); setPc('All'); setPs('featured'); };

  const resultCount = React.useMemo(() => PRODUCTS.filter((p) => {
    if (pg !== 'All' && p.gender !== pg) return false;
    if (pc !== 'All' && p.category !== pc) return false;
    return true;
  }).length, [pg, pc]);

  const sheetCats = React.useMemo(() => {
    const pool = pg === 'All' ? PRODUCTS : PRODUCTS.filter((p) => p.gender === pg);
    const available = new Set(pool.map((p) => p.category));
    return ['All', ...CATEGORIES.filter((c) => c !== 'All' && available.has(c))];
  }, [pg]);

  const Chip = ({ label, active, onClick: oc }) => (
    <button onClick={oc} className="mono" style={{
      padding: '9px 14px',
      border: active ? '.5px solid var(--fg)' : '.5px solid var(--line-2)',
      background: active ? 'color-mix(in srgb, var(--fg) 8%, transparent)' : 'transparent',
      color: active ? 'var(--fg)' : 'var(--fg-2)',
      fontSize: 10, letterSpacing: '.14em', textTransform: 'uppercase',
      transition: 'border-color .15s, background .15s, color .15s',
    }}>{label}</button>
  );

  if (!open) return null;
  return ReactDOM.createPortal(
    <>
      {/* Scrim */}
      <div onClick={onClose} style={{
        position: 'fixed', inset: 0, zIndex: 398,
        background: 'rgba(0,0,0,.52)',
        animation: 'fadeIn .22s ease',
      }} />
      {/* Sheet */}
      <div style={{
        position: 'fixed', left: 0, right: 0, bottom: 0, zIndex: 399,
        background: 'var(--bg)',
        borderTop: '.5px solid var(--line-2)',
        borderRadius: '16px 16px 0 0',
        animation: 'sheetUp .28s cubic-bezier(.4,0,.2,1)',
        maxHeight: '88vh',
        display: 'flex', flexDirection: 'column',
      }}>
        {/* Drag handle */}
        <div style={{ display: 'flex', justifyContent: 'center', padding: '14px 0 0' }}>
          <div style={{ width: 40, height: 4, borderRadius: 2, background: 'var(--line-2)' }} />
        </div>
        {/* Sheet header */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '14px 24px 14px',
          borderBottom: '.5px solid var(--line)',
        }}>
          <span style={{
            fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 400,
          }}>Filter &amp; Sort</span>
          <button onClick={onClose} style={{
            width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--fg-2)',
          }}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3">
              <line x1="2" y1="2" x2="12" y2="12" /><line x1="12" y1="2" x2="2" y2="12" />
            </svg>
          </button>
        </div>
        {/* Body */}
        <div style={{ flex: 1, overflowY: 'auto', padding: '24px 24px 0' }}>
          {/* Gender */}
          <div style={{ marginBottom: 28 }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>For</div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {GENDERS.map((g) => (
                <Chip key={g} label={g} active={pg === g} onClick={() => setPg(g)} />
              ))}
            </div>
          </div>
          {/* Category */}
          <div style={{ marginBottom: 28 }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Type</div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {sheetCats.map((c) => (
                <Chip key={c} label={c} active={pc === c} onClick={() => setPc(c)} />
              ))}
            </div>
          </div>
          {/* Sort */}
          <div style={{ marginBottom: 28 }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Sort by</div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {SORTS.map((s) => (
                <Chip key={s.id} label={s.label} active={ps === s.id} onClick={() => setPs(s.id)} />
              ))}
            </div>
          </div>
        </div>
        {/* Footer */}
        <div style={{
          padding: '16px 24px',
          paddingBottom: 'max(20px, env(safe-area-inset-bottom))',
          borderTop: '.5px solid var(--line)',
          display: 'flex', gap: 12,
        }}>
          <button className="btn ghost sm" style={{ flex: 1 }} onClick={reset}>
            Reset
          </button>
          <button className="btn sm" style={{ flex: 2 }} onClick={apply}>
            Show {resultCount} pieces <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </>,
    document.body
  );
}

// ── Main Collection component ─────────────────────────────────────────
function Collection({ goTo, density = 'regular', initialGender, initialCategory, initialSeason }) {
  useFadeUp();
  const mobile = useMobile();
  const [gender, setGender]       = React.useState(initialGender   || 'All');
  const [cat,    setCat]          = React.useState(initialCategory || 'All');
  const [sort,   setSort]         = React.useState('featured');
  const [filterOpen, setFilterOpen] = React.useState(false);
  const [productsEpoch, setProductsEpoch] = React.useState(0);
  const isBespoke = (initialSeason === 'Bespoke');
  const isLuxury  = (initialSeason === 'Luxury');

  // Re-render cards when admin price/stock/luxury overrides arrive
  React.useEffect(() => {
    const h = () => setProductsEpoch(e => e + 1);
    window.addEventListener('products-updated', h);
    return () => window.removeEventListener('products-updated', h);
  }, []);

  // Re-sync when route params change (e.g. clicking Men in nav)
  React.useEffect(() => {
    setGender(initialGender   || 'All');
    setCat(initialCategory || 'All');
  }, [initialGender, initialCategory]);

  // Reset category filter if it's not available in the new gender
  React.useEffect(() => {
    if (cat === 'All') return;
    const pool = gender === 'All' ? PRODUCTS : PRODUCTS.filter((p) => p.gender === gender);
    const available = new Set(pool.map((p) => p.category));
    if (!available.has(cat)) setCat('All');
  }, [gender]);

  const list = React.useMemo(() => {
    let l = isLuxury ? PRODUCTS.filter((p) => p.season === 'Luxury') : PRODUCTS.slice();
    if (!isLuxury && gender !== 'All') l = l.filter((p) => p.gender === gender);
    if (cat !== 'All')   l = l.filter((p) => p.category === cat);
    if (sort === 'asc')  l.sort((a, b) => a.price - b.price);
    if (sort === 'desc') l.sort((a, b) => b.price - a.price);
    if (sort === 'new')  l.sort((a, b) => (b.tag === 'New' ? 1 : 0) - (a.tag === 'New' ? 1 : 0));
    return l;
  }, [gender, cat, sort, isLuxury, productsEpoch]);

  // Only show categories that have products for the selected gender
  const visibleCats = React.useMemo(() => {
    const pool = gender === 'All' ? PRODUCTS : PRODUCTS.filter((p) => p.gender === gender);
    const available = new Set(pool.map((p) => p.category));
    return ['All', ...CATEGORIES.filter((c) => c !== 'All' && available.has(c))];
  }, [gender]);

  const gridCols = mobile ? 2 : ({ compact: 4, regular: 3, comfy: 2 }[density] || 3);
  const gridGap  = mobile ? 12 : ({ compact: 16, regular: 32, comfy: 56 }[density] || 32);
  const activeFilterCount =
    (gender !== 'All' ? 1 : 0) + (cat !== 'All' ? 1 : 0) + (sort !== 'featured' ? 1 : 0);

  if (isBespoke) return <BespokePage goTo={goTo} />;

  return (
    <div data-screen-label="collection" className="marble-catalog">
      {/* ── Page header ─────────────────────────────────────────────── */}
      <section className="container" style={{ paddingTop: 80, paddingBottom: 40 }}>
        <div className="eyebrow" style={{ marginBottom: 14 }}>
          ◇ &nbsp; {isLuxury
            ? 'Premium Collection'
            : `Shop · ${gender === 'All' ? 'Everything' : gender}${cat !== 'All' ? ` / ${cat}` : ''}`}
        </div>
        <h1 className="display" style={{ fontSize: 'clamp(48px, 10vw, 180px)', margin: 0 }}>
          {isLuxury
            ? <><em>Luxury</em> Edit.</>
            : gender === 'All' && cat === 'All'
              ? <>The <em>collection.</em></>
              : <em>{cat !== 'All' ? cat : gender}.</em>}
        </h1>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          marginTop: 32, gap: 20, flexWrap: 'wrap',
        }}>
          <p style={{
            fontSize: 14, lineHeight: 1.65, maxWidth: 520,
            color: 'var(--fg-2)', margin: 0,
          }}>
            {list.length} pieces · made-to-order · free worldwide shipping · 14-day guarantee.
          </p>
          <div className="mono" style={{ color: 'var(--fg-2)' }}>
            {String(list.length).padStart(2, '0')} / {String(PRODUCTS.length).padStart(2, '0')}
          </div>
        </div>
      </section>

      {/* ── Desktop filter bar ──────────────────────────────────────── */}
      {!mobile && (
        <div style={{
          position: 'sticky', top: 64, zIndex: 40,
          background: 'var(--cream-bar, color-mix(in srgb, var(--bg) 90%, transparent))',
          backdropFilter: 'blur(20px)',
          borderTop: '.5px solid var(--cream-line, var(--line))',
          borderBottom: '.5px solid var(--cream-line, var(--line))',
          marginTop: 20,
        }}>
          <div className="container" style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            flexWrap: 'wrap', gap: '10px 24px', padding: '14px 0',
          }}>
            <div style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap', flex: 1 }}>
              <span className="mono" style={{ color: 'var(--fg-3)', flexShrink: 0 }}>For</span>
              {GENDERS.map((g) => (
                <FilterPill key={g} label={g} active={gender === g} onClick={() => setGender(g)} />
              ))}
              <span style={{ width: 1, height: 16, background: 'var(--line-2)', margin: '0 4px', flexShrink: 0 }} />
              <span className="mono" style={{ color: 'var(--fg-3)', flexShrink: 0 }}>Type</span>
              {visibleCats.map((c) => (
                <FilterPill key={c} label={c} active={cat === c} onClick={() => setCat(c)} />
              ))}
            </div>
            <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexShrink: 0 }}>
              <span className="mono" style={{ color: 'var(--fg-3)' }}>Sort</span>
              <select className="mono" value={sort} onChange={(e) => setSort(e.target.value)}
                style={{
                  background: 'var(--bg)', color: 'var(--fg)', border: 'none',
                  fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.18em',
                  textTransform: 'uppercase', cursor: 'pointer', outline: 'none',
                  colorScheme: 'inherit',
                }}>
                {SORTS.map((s) => (
                  <option key={s.id} value={s.id} style={{ background: 'var(--bg)', color: 'var(--fg)' }}>{s.label}</option>
                ))}
              </select>
            </div>
          </div>
        </div>
      )}

      {/* ── Mobile filter bar ───────────────────────────────────────── */}
      {mobile && (
        <div style={{
          position: 'sticky', top: 64, zIndex: 40,
          background: 'color-mix(in srgb, var(--bg) 92%, transparent)',
          backdropFilter: 'blur(20px)',
          borderTop: '.5px solid var(--line)',
          borderBottom: '.5px solid var(--line)',
          marginTop: 20,
        }}>
          <div style={{
            display: 'flex', alignItems: 'center',
            height: 52, padding: '0 20px', gap: 10,
          }}>
            {/* Active filter chips (tappable to remove) */}
            <div style={{ display: 'flex', gap: 8, alignItems: 'center', flex: 1, overflow: 'hidden' }}>
              {gender !== 'All' && (
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  padding: '4px 10px',
                  border: '.5px solid var(--fg)',
                  fontFamily: 'var(--font-mono)', fontSize: 10,
                  letterSpacing: '.12em', textTransform: 'uppercase',
                  flexShrink: 0,
                }}>
                  {gender}
                  <button onClick={() => setGender('All')}
                    style={{ color: 'var(--fg-2)', fontSize: 14, lineHeight: 1 }}>×</button>
                </span>
              )}
              {cat !== 'All' && (
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  padding: '4px 10px',
                  border: '.5px solid var(--fg)',
                  fontFamily: 'var(--font-mono)', fontSize: 10,
                  letterSpacing: '.12em', textTransform: 'uppercase',
                  flexShrink: 0,
                }}>
                  {cat}
                  <button onClick={() => setCat('All')}
                    style={{ color: 'var(--fg-2)', fontSize: 14, lineHeight: 1 }}>×</button>
                </span>
              )}
              {activeFilterCount === 0 && (
                <span className="mono" style={{ color: 'var(--fg-3)', fontSize: 10 }}>
                  {list.length} pieces
                </span>
              )}
            </div>
            {/* Filter button */}
            <button onClick={() => setFilterOpen(true)} className="mono" style={{
              display: 'flex', alignItems: 'center', gap: 7,
              padding: '7px 14px', flexShrink: 0,
              border: activeFilterCount > 0 ? '.5px solid var(--fg)' : '.5px solid var(--line-2)',
              color: activeFilterCount > 0 ? 'var(--fg)' : 'var(--fg-2)',
              fontSize: 10,
            }}>
              <svg width="13" height="12" viewBox="0 0 13 12" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round">
                <line x1="1.5" y1="3" x2="11.5" y2="3" />
                <line x1="3" y1="6" x2="10" y2="6" />
                <line x1="4.5" y1="9" x2="8.5" y2="9" />
              </svg>
              Filter{activeFilterCount > 0 ? ` · ${activeFilterCount}` : ''}
            </button>
          </div>
        </div>
      )}

      {/* ── Mobile filter bottom sheet ──────────────────────────────── */}
      <FilterSheet
        open={filterOpen}
        onClose={() => setFilterOpen(false)}
        gender={gender}
        cat={cat}
        sort={sort}
        onApply={(g, c, s) => { setGender(g); setCat(c); setSort(s); }}
      />

      {/* ── Product grid ─────────────────────────────────────────────── */}
      <section className="container" style={{ paddingTop: mobile ? 20 : 60, paddingBottom: 80 }}>
        {list.length === 0 ? (
          <div style={{ padding: '80px 0', textAlign: 'center', color: 'var(--fg-2)' }}>
            <div className="display" style={{ fontSize: 48 }}><em>Nothing here.</em></div>
            <p style={{ marginTop: 18, fontSize: 13 }}>Try a different filter.</p>
            <button className="btn ghost sm" style={{ marginTop: 24 }}
              onClick={() => { setCat('All'); setGender('All'); setSort('featured'); }}>
              Reset filters
            </button>
          </div>
        ) : (
          <div style={{
            display: 'grid',
            gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
            gap: mobile ? '24px 12px' : `${gridGap + 20}px ${gridGap}px`,
          }}>
            {list.map((p) => (
              <ProductCard key={p.id} product={p} goTo={goTo} className="fade-up" />
            ))}
          </div>
        )}
      </section>
    </div>
  );
}

// ── Bespoke / made-to-measure landing ─────────────────────────────────
function BespokePage({ goTo }) {
  useFadeUp();
  const mobile = useMobile();
  const STEPS = [
    { n: '01', t: 'Pick the silhouette', d: 'Biker, bomber, café racer, aviator, coat, blazer or vest. Start from a catalogue piece or describe a custom cut.' },
    { n: '02', t: 'Choose your leather', d: 'Full-grain cowhide, top-grain lamb, real shearling. Onyx, espresso, oxblood, cognac, sand or custom dye.' },
    { n: '03', t: 'Hardware & lining',   d: 'Brushed gunmetal, antique brass, polished nickel. Satin, twill, or printed silk lining.' },
    { n: '04', t: 'Personal details',    d: 'Monogram, custom labels, patches, contrast stitching. We send back digital proofs for approval.' },
    { n: '05', t: 'Your measurements',   d: 'Submit by tape or by sending us a well-fitting jacket. Optional video fitting on Mon–Sat.' },
    { n: '06', t: 'Production & ship',   d: 'We hand-finish in 2–4 weeks and ship worldwide free of charge. 14-day money-back guarantee.' },
  ];
  return (
    <div data-screen-label="bespoke">
      <section className="container" style={{ paddingTop: 80, paddingBottom: 60 }}>
        <div className="eyebrow" style={{ marginBottom: 14 }}>◇ &nbsp; Bespoke programme</div>
        <h1 className="display" style={{ fontSize: 'clamp(48px, 10vw, 180px)', margin: 0 }}>
          <em>Made to your</em>
          <span className="gradient-text" style={{ display: 'block', fontStyle: 'italic' }}>measurements.</span>
        </h1>
        <div style={{
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          gap: 40, marginTop: 40, flexWrap: 'wrap',
        }}>
          <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--fg-2)', maxWidth: 540, margin: 0 }}>
            Every piece in the catalogue can be made-to-measure — and we'll
            build pieces from your own reference, too. Custom leather, lining,
            hardware, monogram and patches. No middleman.
          </p>
          <button className="btn" onClick={() => window.openCommission && window.openCommission()}>
            Begin a commission <span className="arrow">→</span>
          </button>
        </div>
      </section>

      <section className="container fade-up" style={{ paddingTop: 60 }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr 1fr' : 'repeat(3, 1fr)',
          gap: 12,
        }}>
          {['cafe-racer-distressed-leather-jacket-brown', 'adan-blue-leather-blazer-leather-blazer-for-men-blue-copy', 'albert-leather-black-long-coat-men-long-coat-black']
            .map((id) => PRODUCTS.find((p) => p.id === id))
            .filter(Boolean)
            .slice(0, mobile ? 2 : 3)
            .map((p) => (
              <Editorial key={p.id} product={p} variant="front"
                label={`LO · ${p.style.split('·')[0].trim()}`}
                frame={`FR · ${(p.id.length * 7) % 900 + 100}`}
                style={{ aspectRatio: '4/5' }} />
            ))}
        </div>
      </section>

      <section className="container" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
          gap: mobile ? 28 : 60,
          marginBottom: 48,
        }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>◇ &nbsp; The process</div>
            <div className="display" style={{ fontSize: 'clamp(36px, 5vw, 72px)', margin: 0 }}>
              Six steps,<br /><em className="gradient-text">one jacket.</em>
            </div>
          </div>
          <p style={{
            fontSize: 14, lineHeight: 1.75, color: 'var(--fg-2)',
            margin: 0, alignSelf: 'end',
          }}>
            Most commissions take two to four weeks from approval to delivery. We
            handle revisions throughout — if it doesn't fit when it arrives,
            we re-cut at our cost or refund in full within fourteen days.
          </p>
        </div>
        <ol style={{
          listStyle: 'none', padding: 0, margin: 0, display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : 'repeat(2, 1fr)',
          gap: 0,
        }}>
          {STEPS.map((s, i) => (
            <li key={s.n} className="fade-up" style={{
              display: 'grid', gridTemplateColumns: '52px 1fr',
              gap: 20, padding: '28px 0',
              borderTop: '.5px solid var(--line)',
              borderBottom: (mobile ? i === STEPS.length - 1 : i >= STEPS.length - 2) ? '.5px solid var(--line)' : 'none',
              borderRight: (!mobile && i % 2 === 0) ? '.5px solid var(--line)' : 'none',
              paddingLeft: (!mobile && i % 2 === 1) ? 32 : 0,
              paddingRight: (!mobile && i % 2 === 0) ? 32 : 0,
            }}>
              <div className="mono" style={{ color: 'var(--fg-3)' }}>{s.n}</div>
              <div>
                <div className="display" style={{ fontSize: 22, marginBottom: 6 }}><em>{s.t}</em></div>
                <div style={{ fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.6 }}>{s.d}</div>
              </div>
            </li>
          ))}
        </ol>
      </section>

      <section className="container" style={{ paddingTop: 20, paddingBottom: 80, textAlign: 'center' }}>
        <div className="display" style={{ fontSize: 'clamp(36px, 6vw, 80px)' }}>
          <em>Ready when you are.</em>
        </div>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 32, flexWrap: 'wrap' }}>
          <button className="btn" onClick={() => window.openCommission && window.openCommission()}>
            Begin a commission <span className="arrow">→</span>
          </button>
          <button className="btn ghost" onClick={() => goTo('collection')}>Browse the catalogue</button>
        </div>
        <div className="mono" style={{ color: 'var(--fg-3)', marginTop: 28, fontSize: 10 }}>
          Or talk to us · {CONTACT.email} · {CONTACT.phone}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Collection, ProductCard });