// Agora Product — 3 treatments switchable inline.

const Product = ({ route, setRoute, watchlist, toggleWatch }) => {
  const data = window.AG_DATA;
  const item = data.byId[route.id] || data.items[0];
  const seller = data.sellers[item.seller];
  const [treatment, setTreatment] = useState('editorial'); // editorial | utility | cinematic

  return (
    <div>
      {/* Treatment switcher — non-final UI surface, scoped to this prototype */}
      <div style={{
        position:'sticky', top:'calc(var(--ag-nav-h) + var(--ag-nav-sub-h))', zIndex: 20,
        background:'#fff', borderBottom:'1px solid var(--ap-border)',
      }}>
        <div className="ag-shell ag-shell--wide ag-between" style={{ padding:'10px 32px' }}>
          <div className="ag-flex ag-gap-2" style={{ alignItems:'center', color:'var(--ap-fg-muted)', fontSize: 11 }}>
            <span style={{ cursor:'pointer' }} onClick={()=>setRoute({ name:'home' })}>Agora</span>
            <Icon name="chevron-right" size={11}/>
            <span style={{ cursor:'pointer' }} onClick={()=>setRoute({ name:'browse', cat: item.cat })}>{data.categories.find(c=>c.id===item.cat)?.label}</span>
            <Icon name="chevron-right" size={11}/>
            <span style={{ cursor:'pointer' }} onClick={()=>setRoute({ name:'browse', cat:'all', brand: item.brand })}>{item.brand}</span>
            <Icon name="chevron-right" size={11}/>
            <span style={{ color:'var(--ap-fg)' }}>{item.title.split('·')[0].trim()}</span>
          </div>
          <div className="ag-flex ag-gap-2" style={{ alignItems:'center' }}>
            <span className="ag-eyebrow">View · </span>
            {[
              { id:'editorial', label:'A · Editorial' },
              { id:'utility',   label:'B · Utility' },
              { id:'cinematic', label:'C · Cinematic' },
            ].map(t => (
              <span key={t.id} onClick={()=>setTreatment(t.id)} className="ag-label"
                style={{ cursor:'pointer', padding:'6px 10px', borderRadius: 2,
                  background: treatment===t.id ? 'var(--ag-ink)' : 'transparent',
                  color:    treatment===t.id ? '#fff' : 'var(--ap-fg-muted)',
                  fontSize: 10,
                }}>{t.label}</span>
            ))}
          </div>
        </div>
      </div>

      {treatment === 'editorial' && <TreatmentEditorial item={item} seller={seller} setRoute={setRoute} watched={watchlist.has(item.id)} onToggleWatch={()=>toggleWatch(item.id)}/>}
      {treatment === 'utility'   && <TreatmentUtility   item={item} seller={seller} setRoute={setRoute} watched={watchlist.has(item.id)} onToggleWatch={()=>toggleWatch(item.id)}/>}
      {treatment === 'cinematic' && <TreatmentCinematic item={item} seller={seller} setRoute={setRoute} watched={watchlist.has(item.id)} onToggleWatch={()=>toggleWatch(item.id)}/>}
    </div>
  );
};

/* =========================================================================
   TREATMENT A — EDITORIAL
   Huge image left, slim spec column right. Serif display.
   ========================================================================= */
const TreatmentEditorial = ({ item, seller, setRoute, watched, onToggleWatch }) => {
  return (
    <div className="ag-fade-in">
      <div className="ag-shell ag-shell--wide" style={{ padding:'48px 32px 0' }}>
        <div style={{ display:'grid', gridTemplateColumns:'1.45fr 1fr', gap: 72 }}>
          {/* LEFT — image stack */}
          <div>
            <div style={{ position:'sticky', top: 180 }}>
              <ProductTile item={item} square style={{ aspectRatio:'4/5' }}>
                <div className="ag-tile__top">
                  {item.new && <span className="ag-tag ag-tag--red">New listing</span>}
                  <div className={`ag-heart${watched?' ag-heart--active':''}`} onClick={onToggleWatch}>
                    <Icon name={watched?'heart-fill':'heart'} size={14}/>
                  </div>
                </div>
              </ProductTile>
              <div style={{ marginTop: 8, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 8 }}>
                {[item.palette, item.palette, item.palette, item.palette].map((_, i) => (
                  <div key={i} style={{ aspectRatio:'1/1', cursor:'pointer', border: i===0 ? '1px solid var(--ag-ink)':'1px solid var(--ap-border)' }}>
                    <ProductTile item={item} square showWatermark={false}/>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* RIGHT — editorial spec sheet */}
          <div>
            <div className="ag-eyebrow">{item.brand} · {item.year} · Stamp Z</div>
            <h1 style={{
              fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontWeight: 400,
              fontSize: 64, lineHeight: 0.98, letterSpacing:'-0.01em', marginTop: 18,
            }}>
              {item.title.split('·')[0].trim()}
            </h1>
            <div className="ag-h3" style={{ marginTop: 14, color:'var(--ap-fg-muted)' }}>
              {item.title.split('·').slice(1).join(' · ').trim()}
            </div>

            <div className="ag-flex" style={{ marginTop: 36, alignItems:'baseline', gap: 16 }}>
              <div className="ag-num" style={{ fontSize: 40, fontWeight: 500, letterSpacing:'-0.01em' }}>€{item.eur.toLocaleString()}</div>
              <div className="ag-mono" style={{ fontSize: 13, color:'var(--ap-fg-muted)' }}>¥{item.jpy.toLocaleString()} listed</div>
            </div>
            <div className="ag-eyebrow" style={{ marginTop: 6 }}>Duties & DDP shipping included to Berlin</div>

            <div className="ag-flex ag-gap-2" style={{ marginTop: 28 }}>
              <button className="ag-btn ag-btn--red ag-btn--lg ag-btn--block" style={{ flex: 2 }} onClick={()=>setRoute({ name:'checkout', id: item.id })}>
                Buy now · €{item.eur.toLocaleString()}
              </button>
              {item.acceptOffers && (
                <button className="ag-btn ag-btn--lg ag-btn--ghost" style={{ flex: 1 }}>Make an offer</button>
              )}
            </div>
            <div className="ag-flex ag-gap-3" style={{ marginTop: 14, justifyContent:'center', alignItems:'center', color:'var(--ap-fg-muted)', fontSize: 12 }}>
              <Icon name="shield" size={14}/> <span>Authenticated 21 Apr · Berlin hub</span>
              <span style={{ color:'var(--ap-fg-faint)' }}>·</span>
              <Icon name="truck" size={14}/> <span>{item.deliverDays} business days</span>
            </div>

            {/* Numbered sections — editorial rhythm */}
            <Sec n="01" title="The piece">
              <p style={{ fontSize: 15, lineHeight: 1.65, color:'var(--ag-ink-2)' }}>{item.notes}</p>
              <p style={{ fontSize: 15, lineHeight: 1.65, color:'var(--ag-ink-2)', marginTop: 12 }}>{item.materials}. Carried lightly by a single owner from {seller.city} who acquired it new from the {item.brand} {seller.city === 'Tokyo' ? 'Ginza' : 'flagship'} boutique.</p>
            </Sec>

            {item.dim && (
              <Sec n="02" title="Specification">
                <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 16 }}>
                  {[
                    { l:'Width',  v:`${item.dim.w} cm` },
                    { l:'Height', v:`${item.dim.h} cm` },
                    { l:'Depth',  v:`${item.dim.d} cm` },
                    { l:'Weight', v:`${item.dim.wt} kg` },
                  ].map(s => (
                    <div key={s.l}>
                      <div className="ag-eyebrow">{s.l}</div>
                      <div className="ag-num" style={{ fontSize: 18, fontWeight: 500, marginTop: 4 }}>{s.v}</div>
                    </div>
                  ))}
                </div>
              </Sec>
            )}

            <Sec n={item.dim ? '03' : '02'} title="Authentication">
              <p style={{ fontSize: 15, lineHeight: 1.65, color:'var(--ag-ink-2)' }}>Inspected by our Berlin hub on 21 April 2026. Seven physical checks passed; digital provenance verified against the seller's original purchase record.</p>
              <div className="ag-flex" style={{ gap: 8, marginTop: 16, flexWrap:'wrap' }}>
                {['Stitching','Hardware','Stamp','Grain','Weight','Provenance','Receipt'].map(c => (
                  <span key={c} className="ag-flex ag-gap-1" style={{ alignItems:'center', fontSize: 11, padding:'6px 10px', border:'1px solid var(--ap-border)', borderRadius: 9999 }}>
                    <Icon name="check" size={10} stroke={3} style={{ color:'var(--ap-success)' }}/> {c}
                  </span>
                ))}
              </div>
            </Sec>

            <Sec n={item.dim ? '04' : '03'} title="From the seller">
              <div className="ag-flex ag-gap-4" onClick={()=>setRoute({ name:'seller', id: seller.id })} style={{ cursor:'pointer', padding:'18px', border:'1px solid var(--ap-border)', borderRadius: 4 }}>
                <div style={{ width: 48, height: 48, borderRadius:'9999px', background:'var(--ag-ink)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 22, flexShrink:0 }}>{seller.name[0].toLowerCase()}</div>
                <div style={{ flex: 1 }}>
                  <div className="ag-between">
                    <div>
                      <div className="ag-eyebrow-ink" style={{ fontSize: 11 }}>{seller.name}</div>
                      <div style={{ fontSize: 12, color:'var(--ap-fg-muted)' }}>{seller.city} · since {seller.since} · {seller.sales.toLocaleString()} sales</div>
                    </div>
                    <div className="ag-flex ag-gap-1" style={{ alignItems:'center' }}>
                      <Icon name="star-fill" size={11}/>
                      <span className="ag-mono" style={{ fontSize: 12, fontWeight: 600 }}>{seller.rating}</span>
                    </div>
                  </div>
                  <p style={{ fontSize: 13, color:'var(--ag-ink-2)', marginTop: 10, lineHeight: 1.55 }}>{seller.blurb}</p>
                </div>
              </div>
            </Sec>

            <Sec n={item.dim ? '05' : '04'} title="Shipping & return">
              <div className="ag-flex" style={{ gap: 24 }}>
                <div style={{ flex: 1 }}>
                  <div className="ag-eyebrow">Ships from</div>
                  <div style={{ fontSize: 14, marginTop: 4 }}>{item.shipFrom}</div>
                </div>
                <div style={{ flex: 1 }}>
                  <div className="ag-eyebrow">Arrives in</div>
                  <div style={{ fontSize: 14, marginTop: 4 }}>{item.deliverDays} business days</div>
                </div>
                <div style={{ flex: 1 }}>
                  <div className="ag-eyebrow">Returns</div>
                  <div style={{ fontSize: 14, marginTop: 4 }}>14-day window</div>
                </div>
              </div>
            </Sec>
          </div>
        </div>
      </div>

      {/* Related */}
      <section style={{ padding:'120px 0 24px' }}>
        <div className="ag-shell ag-shell--wide">
          <div className="ag-eyebrow">More from {item.brand}</div>
          <h2 className="ag-h2" style={{ marginTop: 10, marginBottom: 28 }}>You might also long for</h2>
          <RelatedRow item={item} setRoute={setRoute}/>
        </div>
      </section>
    </div>
  );
};

const Sec = ({ n, title, children }) => (
  <div style={{ marginTop: 56, paddingTop: 32, borderTop:'1px solid var(--ap-border)' }}>
    <div className="ag-flex ag-gap-3" style={{ alignItems:'baseline' }}>
      <span className="ag-mono" style={{ fontSize: 11, color:'var(--ap-fg-faint)' }}>{n}</span>
      <span className="ag-eyebrow-ink" style={{ fontSize: 11 }}>{title}</span>
    </div>
    <div style={{ marginTop: 18 }}>{children}</div>
  </div>
);

const RelatedRow = ({ item, setRoute }) => {
  const data = window.AG_DATA;
  const related = data.items.filter(i => i.brand === item.brand && i.id !== item.id).slice(0, 4);
  const filler  = data.items.filter(i => i.id !== item.id).slice(0, 4);
  const list = (related.length >= 4 ? related : [...related, ...filler]).slice(0, 4);
  return (
    <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 1, background:'var(--ap-border)' }}>
      {list.map(it => (
        <div key={it.id} style={{ background:'#fff', cursor:'pointer' }} onClick={()=>setRoute({ name:'product', id: it.id })}>
          <ProductTile item={it}>
            <div className="ag-tile__top">
              {it.new && <span className="ag-tag ag-tag--red">New</span>}
              <span/>
            </div>
          </ProductTile>
          <div style={{ padding:'14px 16px 16px' }}>
            <div className="ag-between" style={{ alignItems:'baseline' }}>
              <div className="ag-eyebrow-ink">{it.brand}</div>
              <div className="ag-num" style={{ fontSize: 13, fontWeight: 600 }}>€{it.eur.toLocaleString()}</div>
            </div>
            <div style={{ color:'var(--ap-fg-muted)', fontSize: 12, marginTop: 4, lineHeight: 1.35, height: 32, overflow:'hidden' }}>{it.title}</div>
          </div>
        </div>
      ))}
    </div>
  );
};

/* =========================================================================
   TREATMENT B — UTILITY (Vestiaire / Grailed energy)
   Gallery + thumbnails on left, dense info stack with sticky buy panel on right.
   ========================================================================= */
const TreatmentUtility = ({ item, seller, setRoute, watched, onToggleWatch }) => {
  const [activeImg, setActiveImg] = useState(0);
  const [tab, setTab] = useState('details');
  return (
    <div className="ag-shell ag-shell--wide ag-fade-in" style={{ padding:'24px 32px 0' }}>
      <div style={{ display:'grid', gridTemplateColumns:'80px 1fr 380px', gap: 24 }}>
        {/* Thumbs */}
        <div className="ag-col ag-gap-2">
          {[0,1,2,3,4].map(i => (
            <div key={i} onClick={()=>setActiveImg(i)} style={{ aspectRatio:'1/1', cursor:'pointer', border: activeImg===i ? '1px solid var(--ag-ink)':'1px solid var(--ap-border)', borderRadius: 2 }}>
              <ProductTile item={item} square showWatermark={false}/>
            </div>
          ))}
        </div>
        {/* Main image */}
        <div>
          <div style={{ position:'relative' }}>
            <ProductTile item={item} square style={{ aspectRatio:'4/5', border:'1px solid var(--ap-border)' }}>
              <div className="ag-tile__top">
                <div className="ag-flex ag-gap-1">
                  {item.new && <span className="ag-tag ag-tag--red">New listing · {item.listedAgo} ago</span>}
                  <span className="ag-tag ag-tag--auth"><Icon name="shield" size={9} stroke={2}/>&nbsp;Authenticated · 21 Apr</span>
                </div>
                <div className="ag-flex ag-gap-2">
                  <div className={`ag-heart${watched?' ag-heart--active':''}`} onClick={onToggleWatch}>
                    <Icon name={watched?'heart-fill':'heart'} size={14}/>
                  </div>
                </div>
              </div>
              <div className="ag-tile__bot">
                <div className="ag-flex ag-gap-2">
                  <span className="ag-mono" style={{ color:'#fff', background:'rgba(0,0,0,0.55)', padding:'4px 10px', borderRadius: 9999, fontSize: 10 }}>
                    <Icon name="eye" size={10} style={{ verticalAlign:'middle', marginRight: 4 }}/>{item.watchers} watching
                  </span>
                </div>
                <span className="ag-mono" style={{ color:'#fff', fontSize: 10 }}>1 / 5</span>
              </div>
            </ProductTile>
          </div>
          {/* Tabs */}
          <div className="ag-flex" style={{ borderBottom:'1px solid var(--ap-border)', marginTop: 32, gap: 32 }}>
            {[
              { id:'details', l:'Details' },
              { id:'cond', l:'Condition' },
              { id:'auth', l:'Authentication' },
              { id:'ship', l:'Shipping' },
              { id:'returns', l:'Returns' },
              { id:'seller', l:'Seller' },
            ].map(t => (
              <span key={t.id} onClick={()=>setTab(t.id)} className="ag-label" style={{ cursor:'pointer', padding:'14px 0', color: tab===t.id ? 'var(--ag-ink)':'var(--ap-fg-muted)', borderBottom: tab===t.id ? '2px solid var(--ag-ink)':'2px solid transparent', marginBottom: -1 }}>
                {t.l}
              </span>
            ))}
          </div>
          <div style={{ padding:'28px 0 40px' }}>
            {tab === 'details' && (
              <div>
                <p style={{ fontSize: 14, lineHeight: 1.6 }}>{item.notes}</p>
                <div style={{ display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap: 0, marginTop: 24 }}>
                  {[
                    ['Brand', item.brand],
                    ['Model', item.title.split('·')[0].trim()],
                    ['Materials', item.materials],
                    ['Color', item.palette.label],
                    ['Year', item.year],
                    ['Condition', item.cond],
                    item.dim && ['Dimensions', `${item.dim.w} × ${item.dim.h} × ${item.dim.d} cm`],
                    item.dim && ['Weight', `${item.dim.wt} kg`],
                  ].filter(Boolean).map(([l, v]) => (
                    <div key={l} className="ag-flex" style={{ padding:'12px 0', borderTop:'1px solid var(--ap-border)' }}>
                      <span style={{ flex:'0 0 140px', fontSize: 12, color:'var(--ap-fg-muted)', textTransform:'uppercase', letterSpacing:'0.08em', fontWeight: 600 }}>{l}</span>
                      <span style={{ fontSize: 14 }}>{v}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}
            {tab === 'cond' && (
              <div>
                <div className="ag-flex ag-gap-2" style={{ alignItems:'center' }}>
                  <span className="ag-tag" style={{ background:'var(--ap-success)' }}>{item.cond}</span>
                  <span style={{ fontSize: 13, color:'var(--ap-fg-muted)' }}>Inspected at Berlin hub · 21 April 2026</span>
                </div>
                <div style={{ marginTop: 18, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 24 }}>
                  {[
                    { l:'Corners', s:'Pristine, no scuffs' },
                    { l:'Hardware', s:'Original protective film intact' },
                    { l:'Interior', s:'Clean, no staining' },
                    { l:'Stitching', s:'All stitching tight; no breaks' },
                    { l:'Strap', s:'Even patina, no cracking' },
                    { l:'Glazing', s:'Original, intact at all seams' },
                  ].map(p => (
                    <div key={p.l} style={{ paddingBottom: 12, borderBottom:'1px solid var(--ap-border)' }}>
                      <div className="ag-eyebrow-ink" style={{ fontSize: 11 }}>{p.l}</div>
                      <div style={{ fontSize: 13, color:'var(--ag-ink-2)', marginTop: 4 }}>{p.s}</div>
                    </div>
                  ))}
                </div>
              </div>
            )}
            {tab === 'auth' && (
              <div>
                <p style={{ fontSize: 14, lineHeight: 1.6 }}>This piece passed all seven physical checks at our Berlin authentication hub. Documentation is preserved in your order record and viewable post-purchase.</p>
                <div className="ag-flex" style={{ flexWrap:'wrap', gap: 8, marginTop: 18 }}>
                  {['Stitching','Hardware','Stamp','Grain','Weight','Provenance','Receipt'].map((c, i) => (
                    <div key={c} style={{ width: 132, padding:'12px 14px', border:'1px solid var(--ap-border)', borderRadius: 2 }}>
                      <div className="ag-mono" style={{ fontSize: 10, color:'var(--ap-fg-faint)' }}>0{i+1}</div>
                      <div className="ag-flex ag-gap-2" style={{ alignItems:'center', marginTop: 6 }}>
                        <Icon name="circle-check" size={12} stroke={2} style={{ color:'var(--ap-success)' }}/>
                        <span className="ag-eyebrow-ink" style={{ fontSize: 10 }}>{c}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
            {tab === 'ship' && (
              <div className="ag-flex" style={{ gap: 32 }}>
                <div style={{ flex: 1 }}>
                  <div className="ag-eyebrow">Ships from</div>
                  <div style={{ fontSize: 16, marginTop: 6 }}>{item.shipFrom}</div>
                </div>
                <div style={{ flex: 1 }}>
                  <div className="ag-eyebrow">Arrives</div>
                  <div style={{ fontSize: 16, marginTop: 6 }}>{item.deliverDays} business days</div>
                </div>
                <div style={{ flex: 1 }}>
                  <div className="ag-eyebrow">Customs</div>
                  <div style={{ fontSize: 16, marginTop: 6 }}>Included · DDP</div>
                </div>
              </div>
            )}
            {tab === 'returns' && (
              <p style={{ fontSize: 14, lineHeight: 1.6, maxWidth: 620 }}>14-day window from delivery. Item must arrive at our Berlin hub in unworn condition with all original packaging. Authentication tag must remain attached. Return shipping is on the buyer; full refund issued on inspection.</p>
            )}
            {tab === 'seller' && (
              <div className="ag-flex ag-gap-4">
                <div style={{ width: 56, height: 56, borderRadius:'9999px', background:'var(--ag-ink)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 26 }}>{seller.name[0].toLowerCase()}</div>
                <div style={{ flex: 1 }}>
                  <div className="ag-between">
                    <div>
                      <div className="ag-eyebrow-ink">{seller.name}</div>
                      <div style={{ fontSize: 12, color:'var(--ap-fg-muted)', marginTop: 4 }}>{seller.handle} · {seller.city} · since {seller.since}</div>
                    </div>
                    <button className="ag-btn ag-btn--sm ag-btn--ghost" onClick={()=>setRoute({ name:'seller', id: seller.id })}>Visit storefront</button>
                  </div>
                  <p style={{ fontSize: 14, color:'var(--ag-ink-2)', marginTop: 12, lineHeight: 1.55 }}>{seller.blurb}</p>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* STICKY BUY PANEL */}
        <aside>
          <div style={{ position:'sticky', top: 200 }}>
            <div className="ag-eyebrow-ink" style={{ fontSize: 11 }}>{item.brand}</div>
            <div style={{ fontSize: 18, lineHeight: 1.35, marginTop: 6, color:'var(--ap-fg)', fontWeight: 500 }}>{item.title}</div>
            <div className="ag-flex ag-gap-2" style={{ marginTop: 14, alignItems:'center' }}>
              <span className="ag-tag" style={{ background:'var(--ap-success)' }}>{item.cond}</span>
              <span className="ag-tag ag-tag--auth"><Icon name="shield" size={9} stroke={2}/>&nbsp;Authenticated</span>
              {item.new && <span className="ag-tag ag-tag--red">New</span>}
            </div>
            <div style={{ borderTop:'1px solid var(--ap-border)', marginTop: 22, paddingTop: 22 }}>
              <div className="ag-num" style={{ fontSize: 36, fontWeight: 500, letterSpacing:'-0.01em' }}>€{item.eur.toLocaleString()}</div>
              <div className="ag-mono" style={{ fontSize: 12, color:'var(--ap-fg-muted)', marginTop: 4 }}>¥{item.jpy.toLocaleString()} listed price</div>
              <div style={{ marginTop: 16, padding:'12px 14px', background:'var(--ap-bg-2)', borderRadius: 2 }}>
                <div className="ag-between" style={{ fontSize: 12 }}>
                  <span style={{ color:'var(--ap-fg-muted)' }}>Item</span>
                  <span className="ag-num">€{item.eur.toLocaleString()}</span>
                </div>
                <div className="ag-between" style={{ fontSize: 12, marginTop: 6 }}>
                  <span style={{ color:'var(--ap-fg-muted)' }}>Authentication</span>
                  <span className="ag-num">Included</span>
                </div>
                <div className="ag-between" style={{ fontSize: 12, marginTop: 6 }}>
                  <span style={{ color:'var(--ap-fg-muted)' }}>Shipping &amp; duties (DDP)</span>
                  <span className="ag-num">Included</span>
                </div>
                <div className="ag-between" style={{ fontSize: 13, marginTop: 10, paddingTop: 10, borderTop:'1px solid var(--ap-border)', fontWeight: 600 }}>
                  <span>Total at checkout</span>
                  <span className="ag-num">€{item.eur.toLocaleString()}</span>
                </div>
              </div>
              <button className="ag-btn ag-btn--red ag-btn--lg ag-btn--block" style={{ marginTop: 18 }} onClick={()=>setRoute({ name:'checkout', id: item.id })}>Buy now</button>
              {item.acceptOffers && (
                <button className="ag-btn ag-btn--lg ag-btn--ghost ag-btn--block" style={{ marginTop: 8 }}>Make an offer</button>
              )}
              <button className="ag-btn ag-btn--sm ag-btn--ghost ag-btn--block" style={{ marginTop: 8 }} onClick={onToggleWatch}>
                <Icon name={watched?'heart-fill':'heart'} size={12}/> {watched ? 'In your watchlist' : 'Save to watchlist'}
              </button>
              <div className="ag-flex ag-gap-2" style={{ marginTop: 18, alignItems:'center', justifyContent:'center', color:'var(--ap-fg-muted)', fontSize: 12 }}>
                <Icon name="truck" size={14}/> <span>{item.shipFrom} → Berlin → You · {item.deliverDays} biz days</span>
              </div>
            </div>
          </div>
        </aside>
      </div>

      {/* Related */}
      <section style={{ padding:'96px 0 24px' }}>
        <div className="ag-eyebrow">More from {item.brand}</div>
        <h2 className="ag-h2" style={{ marginTop: 10, marginBottom: 28, fontSize: 24 }}>Related pieces</h2>
        <RelatedRow item={item} setRoute={setRoute}/>
      </section>
    </div>
  );
};

/* =========================================================================
   TREATMENT C — CINEMATIC / PROVENANCE
   Dark hero, route map, auth filmstrip prominent, timeline.
   ========================================================================= */
const TreatmentCinematic = ({ item, seller, setRoute, watched, onToggleWatch }) => {
  return (
    <div className="ag-fade-in" style={{ background:'var(--ag-ink)', color:'var(--ag-bone)' }}>
      {/* Hero */}
      <section style={{ padding:'56px 0 80px', position:'relative', overflow:'hidden' }}>
        <div className="ag-shell ag-shell--wide" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 56, alignItems:'center' }}>
          <div>
            <div className="ag-eyebrow" style={{ color:'rgba(255,255,255,0.5)' }}>Verified piece · {item.id.toUpperCase()} · Authenticated 21 Apr 26</div>
            <h1 style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontWeight: 400, fontSize: 88, lineHeight: 0.95, letterSpacing:'-0.015em', marginTop: 24, color:'#fff' }}>
              {item.title.split('·')[0].trim()}
            </h1>
            <div className="ag-eyebrow" style={{ color:'rgba(255,255,255,0.7)', marginTop: 18, fontSize: 12 }}>
              {item.brand} · {item.year} · {item.cond}
            </div>

            <div style={{ marginTop: 40, fontSize: 17, lineHeight: 1.6, color:'rgba(255,255,255,0.75)', maxWidth: 460 }}>{item.notes}</div>

            <div className="ag-flex ag-gap-4" style={{ marginTop: 48, alignItems:'baseline' }}>
              <div className="ag-num" style={{ fontSize: 44, fontWeight: 400, color:'#fff' }}>€{item.eur.toLocaleString()}</div>
              <div className="ag-mono" style={{ fontSize: 13, color:'rgba(255,255,255,0.5)' }}>DDP · all duties included</div>
            </div>
            <div className="ag-flex ag-gap-2" style={{ marginTop: 24 }}>
              <button className="ag-btn ag-btn--red ag-btn--lg" onClick={()=>setRoute({ name:'checkout', id: item.id })}>Buy now</button>
              {item.acceptOffers && <button className="ag-btn ag-btn--lg" style={{ background:'transparent', color:'#fff', borderColor:'rgba(255,255,255,0.4)' }}>Make an offer</button>}
              <button className="ag-btn ag-btn--lg" onClick={onToggleWatch} style={{ background:'transparent', color:'#fff', borderColor:'rgba(255,255,255,0.4)' }}>
                <Icon name={watched?'heart-fill':'heart'} size={14}/>
              </button>
            </div>
          </div>
          <div>
            <ProductTile item={item} square style={{ aspectRatio:'1/1.15' }}>
              <div className="ag-tile__top">
                <span className="ag-tag" style={{ background:'rgba(255,255,255,0.92)', color:'var(--ag-ink)' }}><Icon name="shield" size={9} stroke={2}/>&nbsp;Auth · 21 Apr</span>
                <span/>
              </div>
            </ProductTile>
          </div>
        </div>
      </section>

      {/* Route map narrative */}
      <section style={{ padding:'80px 0', borderTop:'1px solid rgba(255,255,255,0.1)' }}>
        <div className="ag-shell ag-shell--wide" style={{ display:'grid', gridTemplateColumns:'1fr 1.4fr', gap: 64, alignItems:'center' }}>
          <div>
            <div className="ag-mono" style={{ fontSize: 11, color:'rgba(255,255,255,0.5)' }}>01 / The route</div>
            <h2 style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 56, lineHeight: 1, marginTop: 18, color:'#fff' }}>
              {item.city} → Berlin → You.
            </h2>
            <p style={{ marginTop: 24, fontSize: 15, lineHeight: 1.65, color:'rgba(255,255,255,0.65)' }}>
              Picked up from {seller.name} on 18 April, authenticated at our Berlin hub on the 21st, ready to dispatch. Customs and duties are pre-cleared — you sign once, at your door.
            </p>
            <div className="ag-flex ag-gap-4" style={{ marginTop: 28 }}>
              <Step n="01" l="Picked up" v="18 Apr · Paris"/>
              <Step n="02" l="At hub" v="21 Apr · Berlin"/>
              <Step n="03" l="In transit" v="~24 Apr · DHL Express"/>
              <Step n="04" l="Arrives" v="29 Apr · Your door"/>
            </div>
          </div>
          <div>
            <CinematicRoute from={item.city}/>
          </div>
        </div>
      </section>

      {/* Auth filmstrip */}
      <section style={{ padding:'80px 0', borderTop:'1px solid rgba(255,255,255,0.1)' }}>
        <div className="ag-shell ag-shell--wide">
          <div className="ag-between" style={{ alignItems:'flex-end', marginBottom: 36 }}>
            <div>
              <div className="ag-mono" style={{ fontSize: 11, color:'rgba(255,255,255,0.5)' }}>02 / Authentication</div>
              <h2 style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 48, marginTop: 14, color:'#fff' }}>The seven checks.</h2>
            </div>
            <div className="ag-flex ag-gap-2" style={{ alignItems:'center', color:'rgba(255,255,255,0.6)', fontSize: 12 }}>
              <span className="ag-dot ag-dot--ok"/> Inspected · Maya A. · Berlin · 21 Apr 26
            </div>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(7, 1fr)', gap: 8 }}>
            {[
              { l:'Stitching', det:'Twelve stitches per inch. Tight, even.' },
              { l:'Hardware',  det:'Palladium plating, original screws.' },
              { l:'Stamp',     det:'Z stamp · 2022 production year.' },
              { l:'Grain',     det:'Togo leather, natural pebble.' },
              { l:'Weight',    det:'1.05 kg ± 0.02. Matches spec.' },
              { l:'Provenance',det:'Original boutique receipt logged.' },
              { l:'Smell',     det:'Leather. No solvents, no smoke.' },
            ].map((c, i) => (
              <div key={c.l} style={{ background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.12)', padding: 16, display:'flex', flexDirection:'column', gap: 14 }}>
                <div style={{ aspectRatio:'1/1', position:'relative', overflow:'hidden' }}>
                  <ProductTile item={item} square showWatermark={false} style={{ position:'absolute', inset: 0, aspectRatio:'auto' }}/>
                  <div style={{ position:'absolute', inset:0, background:'rgba(14,13,12,0.3)' }}/>
                  <div className="ag-mono" style={{ position:'absolute', top: 8, left: 8, fontSize: 10, color:'rgba(255,255,255,0.85)' }}>0{i+1}</div>
                  <Icon name="circle-check" size={20} stroke={1.5} style={{ position:'absolute', bottom: 8, right: 8, color:'#fff' }}/>
                </div>
                <div>
                  <div className="ag-eyebrow-ink" style={{ fontSize: 10, color:'#fff' }}>{c.l}</div>
                  <div style={{ fontSize: 11, color:'rgba(255,255,255,0.55)', marginTop: 6, lineHeight: 1.4 }}>{c.det}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Provenance timeline */}
      <section style={{ padding:'80px 0 96px', borderTop:'1px solid rgba(255,255,255,0.1)' }}>
        <div className="ag-shell ag-shell--wide">
          <div className="ag-mono" style={{ fontSize: 11, color:'rgba(255,255,255,0.5)' }}>03 / Provenance</div>
          <h2 style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 48, marginTop: 14, color:'#fff' }}>Where it has been.</h2>
          <div style={{ marginTop: 36, paddingLeft: 16, borderLeft:'1px solid rgba(255,255,255,0.2)' }}>
            {[
              { d:'2022', l:`Sold new at ${item.brand} Faubourg, Paris.`, det:'Original receipt retained.' },
              { d:'2022–25', l:'Worn lightly by single owner.', det:'Stored in dust bag between uses.' },
              { d:'Apr 26', l:`Consigned to ${seller.name}, ${seller.city}.`, det:'Verified ownership documents.' },
              { d:'21 Apr 26', l:'Authenticated at Berlin hub.', det:'Seven physical checks · all passed.' },
              { d:'Today', l:'Awaiting next chapter.', det:'You.' },
            ].map((e, i, arr) => (
              <div key={i} style={{ position:'relative', paddingLeft: 32, paddingBottom: i < arr.length-1 ? 32 : 0 }}>
                <div style={{ position:'absolute', left:-21, top: 8, width: 10, height: 10, background: i === arr.length-1 ? 'var(--ag-red)':'#fff', borderRadius:'9999px' }}/>
                <div className="ag-mono" style={{ fontSize: 11, color:'rgba(255,255,255,0.5)' }}>{e.d}</div>
                <div style={{ fontSize: 17, color:'#fff', marginTop: 4 }}>{e.l}</div>
                <div style={{ fontSize: 13, color:'rgba(255,255,255,0.6)', marginTop: 4 }}>{e.det}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

const Step = ({ n, l, v }) => (
  <div style={{ flex: 1 }}>
    <div className="ag-mono" style={{ fontSize: 10, color:'rgba(255,255,255,0.5)' }}>{n}</div>
    <div className="ag-eyebrow-ink" style={{ fontSize: 10, color:'#fff', marginTop: 6 }}>{l}</div>
    <div className="ag-mono" style={{ fontSize: 11, color:'rgba(255,255,255,0.7)', marginTop: 4 }}>{v}</div>
  </div>
);

const CinematicRoute = ({ from }) => (
  <div style={{ background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.12)', padding: 24, borderRadius: 2 }}>
    <svg viewBox="0 0 100 36" style={{ width:'100%', height:'auto', display:'block' }}>
      <g stroke="rgba(255,255,255,0.08)" strokeWidth="0.1">
        {[10,18,26].map(y=> <line key={y} x1="0" y1={y} x2="100" y2={y}/>)}
        {[10,20,30,40,50,60,70,80,90].map(x=> <line key={x} x1={x} y1="0" x2={x} y2="36"/>)}
      </g>
      {/* From → Berlin → You arcs */}
      <path d="M 85 22 Q 70 5 50 14" stroke="#fff" strokeWidth="0.2" fill="none" strokeDasharray="0.6 0.8"/>
      <path d="M 50 14 Q 35 8 18 22" stroke="var(--ag-red)" strokeWidth="0.3" fill="none"/>
      {/* Nodes */}
      <circle cx="85" cy="22" r="0.9" fill="#fff"/>
      <circle cx="50" cy="14" r="1.1" fill="var(--ag-red)"/>
      <circle cx="50" cy="14" r="2.4" fill="none" stroke="var(--ag-red)" strokeWidth="0.15" opacity="0.5"/>
      <circle cx="18" cy="22" r="0.9" fill="#fff"/>
      <text x="86.5" y="22.6" fontSize="1.6" fill="rgba(255,255,255,0.85)" fontFamily="var(--ag-font-mono)">{from}</text>
      <text x="51.5" y="14.6" fontSize="1.6" fill="#fff" fontFamily="var(--ag-font-mono)">BERLIN · HUB</text>
      <text x="14" y="26.5" fontSize="1.6" fill="rgba(255,255,255,0.85)" fontFamily="var(--ag-font-mono)">YOU</text>
    </svg>
    <div className="ag-between" style={{ marginTop: 18, paddingTop: 18, borderTop:'1px solid rgba(255,255,255,0.1)' }}>
      <div>
        <div className="ag-eyebrow" style={{ fontSize: 10, color:'rgba(255,255,255,0.5)' }}>Total distance</div>
        <div className="ag-num" style={{ fontSize: 22, marginTop: 4, color:'#fff' }}>9,387 km</div>
      </div>
      <div>
        <div className="ag-eyebrow" style={{ fontSize: 10, color:'rgba(255,255,255,0.5)' }}>Lanes</div>
        <div className="ag-num" style={{ fontSize: 22, marginTop: 4, color:'#fff' }}>2</div>
      </div>
      <div>
        <div className="ag-eyebrow" style={{ fontSize: 10, color:'rgba(255,255,255,0.5)' }}>Hands</div>
        <div className="ag-num" style={{ fontSize: 22, marginTop: 4, color:'#fff' }}>4</div>
      </div>
      <div>
        <div className="ag-eyebrow" style={{ fontSize: 10, color:'rgba(255,255,255,0.5)' }}>Customs</div>
        <div className="ag-num" style={{ fontSize: 22, marginTop: 4, color:'#fff' }}>Done</div>
      </div>
    </div>
  </div>
);

window.Product = Product;