// Agora Home — Apple-store-grade dense grid with editorial moments.

const Home = ({ setRoute }) => {
  const data = window.AG_DATA;
  const items = data.items;
  const featured = items.slice(0, 4);
  const hermesPieces = items.filter(i => i.brand === 'Hermès');
  const tokyoPieces = items.filter(i => i.city === 'Tokyo');
  const newToday = items.filter(i => i.new);

  return (
    <div>
      {/* ============================================================
          HERO — editorial mosaic. Visuals lead, copy is restrained.
         ============================================================ */}
      <section style={{ background:'var(--ag-paper)', paddingTop: 28, paddingBottom: 0 }}>
        <div className="ag-shell ag-shell--wide">
          {/* Cover line — issue header */}
          <div style={{ paddingBottom: 24 }}>
            <div className="ag-flex ag-gap-3" style={{ alignItems:'baseline' }}>
              <span className="ag-eyebrow-ink" style={{ fontSize: 10 }}>The Agora</span>
              <span style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 22, color:'var(--ap-fg)' }}>Issue No. 14</span>
              <span className="ag-eyebrow" style={{ fontSize: 10 }}>· Spring / Summer 26</span>
            </div>
          </div>

          {/* Mosaic: three columns. Two large feature pieces · text + two smaller pieces. */}
          <div style={{ display:'grid', gridTemplateColumns:'1.05fr 1.05fr 0.9fr', gap: 12, alignItems:'stretch' }}>
            {/* COVER PIECE 01 — tall */}
            <CoverPiece
              n="01"
              item={data.byId.i05 /* Hermès Birkin 30 */}
              label="Cover piece"
              onClick={()=>setRoute({ name:'product', id:'i05' })}
              height={640}
            />

            {/* COVER PIECE 02 — tall */}
            <CoverPiece
              n="02"
              item={data.byId.i08 /* Chanel 19 Maxi Ivory */}
              label="From Tokyo, with care"
              onClick={()=>setRoute({ name:'product', id:'i08' })}
              height={640}
            />

            {/* RIGHT COLUMN — restrained editorial copy + two small pieces */}
            <div className="ag-col" style={{ gap: 12, height: 640 }}>
              <div style={{
                background:'var(--ag-bone)', padding:'28px 26px',
                display:'flex', flexDirection:'column', justifyContent:'space-between',
                flex:'1 1 0',
              }}>
                <div>
                  <div className="ag-eyebrow-ink" style={{ fontSize: 10 }}>What's inside this issue</div>
                  <div style={{ marginTop: 16, fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 36, lineHeight: 1.0, letterSpacing:'-0.01em', color:'var(--ap-fg)' }}>
                    Four hundred &amp; eleven<br/>new pieces this week.
                  </div>
                  <p style={{ marginTop: 14, fontSize: 13, lineHeight: 1.55, color:'var(--ag-ink-2)' }}>
                    Sourced from private collectors across Tokyo, Paris, Milan &amp; Seoul. Authenticated in Berlin. At your door, customs included.
                  </p>
                </div>
                <div className="ag-flex ag-gap-2" style={{ marginTop: 22 }}>
                  <button className="ag-btn" onClick={()=>setRoute({ name:'browse', cat:'all' })}>Shop everything <Icon name="arrow-right" size={12}/></button>
                  <button className="ag-btn ag-btn--ghost" onClick={()=>setRoute({ name:'dream' })}>Dream Finder</button>
                </div>
              </div>

              <CoverPieceSmall
                n="03"
                item={data.byId.i01 /* Hermès Kelly */}
                onClick={()=>setRoute({ name:'product', id:'i01' })}
              />
              <CoverPieceSmall
                n="04"
                item={data.byId.w01 /* Rolex Datejust */}
                onClick={()=>setRoute({ name:'product', id:'w01' })}
              />
            </div>
          </div>
        </div>

        {/* Stats strip — sits at bottom of hero, before next section */}
        <div className="ag-shell ag-shell--wide" style={{ marginTop: 48, paddingBottom: 32 }}>
          <div className="ag-rule" style={{ background:'var(--ag-line-soft)' }}/>
          <div className="ag-flex" style={{ paddingTop: 18 }}>
            {[
              { v:'12,840', l:'Active listings' },
              { v:'1,284',  l:'Sellers worldwide' },
              { v:'14',     l:'Source countries' },
              { v:'48 hrs', l:'Avg auth → ship' },
              { v:'4.96',   l:'Buyer rating · 26k reviews' },
            ].map((s, i, arr) => (
              <div key={s.l} style={{ flex:1, borderRight: i < arr.length-1 ? '1px solid var(--ag-line-soft)':'0', paddingLeft: i===0?0:24 }}>
                <div className="ag-num" style={{ fontSize: 26, fontWeight: 500, letterSpacing:'-0.01em' }}>{s.v}</div>
                <div className="ag-eyebrow" style={{ marginTop: 6 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============================================================
          CATEGORY GRID — Apple-store dense
         ============================================================ */}
      <section style={{ padding:'24px 0 72px' }}>
        <div className="ag-shell ag-shell--wide">
          <div className="ag-between" style={{ marginBottom: 28, alignItems:'flex-end' }}>
            <div>
              <div className="ag-eyebrow">01 · Shop the house</div>
              <h2 className="ag-h2" style={{ marginTop: 10 }}>Browse by category</h2>
            </div>
            <span className="ag-label" style={{ cursor:'pointer' }} onClick={()=>setRoute({ name:'browse', cat:'all' })}>View all 12,840 listings <Icon name="arrow-right" size={11}/></span>
          </div>

          {/* Bento-style category tiles */}
          <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1fr', gridTemplateRows:'320px 240px', gap: 12 }}>
            <CategoryTile featured row={2} item={data.byId.i05} label="Handbags" count="4,820 listings" eyebrow="The vault" onClick={()=>setRoute({ name:'browse', cat:'bags' })}/>
            <CategoryTile item={data.byId.c01} label="Women's clothing" count="2,140" onClick={()=>setRoute({ name:'browse', cat:'women-clothing' })}/>
            <CategoryTile item={data.byId.w01} label="Watches" count="612" onClick={()=>setRoute({ name:'browse', cat:'watches' })}/>
            <CategoryTile item={data.byId.j01} label="Jewelry" count="488" onClick={()=>setRoute({ name:'browse', cat:'jewelry' })}/>
            <CategoryTile item={data.byId.c04} label="Vintage & Archive" count="1,204" eyebrow="Archive only" onClick={()=>setRoute({ name:'browse', cat:'vintage' })}/>
          </div>
        </div>
      </section>

      {/* ============================================================
          NEW THIS WEEK — dense product grid (Apple-store rhythm)
         ============================================================ */}
      <section style={{ padding:'56px 0 72px', borderTop:'1px solid var(--ap-border)' }}>
        <div className="ag-shell ag-shell--wide">
          <div className="ag-between" style={{ marginBottom: 32, alignItems:'flex-end' }}>
            <div>
              <div className="ag-eyebrow">02 · New this week</div>
              <h2 className="ag-h2" style={{ marginTop: 10 }}>{newToday.length} pieces added · last 7 days</h2>
            </div>
            <div className="ag-flex ag-gap-2">
              <button className="ag-chip ag-chip--active">All categories</button>
              <button className="ag-chip">Handbags</button>
              <button className="ag-chip">Clothing</button>
              <button className="ag-chip">Watches</button>
              <button className="ag-chip">Under €1,000</button>
            </div>
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 1, background:'var(--ap-border)' }}>
            {items.slice(0, 8).map(it => (
              <div key={it.id} style={{ background:'var(--ag-surface)' }}>
                <div onClick={()=>setRoute({ name:'product', id: it.id })} style={{ cursor:'pointer' }}>
                  <SimpleCard item={it}/>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============================================================
          INTERCONTINENTAL — map / route storytelling
         ============================================================ */}
      <section className="ag-section--paper" style={{ padding:'96px 0 96px' }}>
        <div className="ag-shell ag-shell--wide">
          <div className="ag-flex" style={{ gap: 80, alignItems:'flex-start' }}>
            <div style={{ flex:'0 0 360px' }}>
              <div className="ag-eyebrow">03 · The intercontinental lane</div>
              <h2 style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 72, lineHeight: 0.95, letterSpacing:'-0.01em', marginTop: 18, marginBottom: 24 }}>
                Where it<br/>was. Where<br/>it's going.
              </h2>
              <p style={{ fontSize: 15, lineHeight: 1.6, color:'var(--ag-ink-2)', maxWidth: 320 }}>
                Every piece on Agora moves through one of three authentication hubs — Tokyo, Milan, or Berlin — before reaching your door. Customs is handled. Duties are paid. You wait once.
              </p>
              <button className="ag-btn" style={{ marginTop: 28, background:'transparent', color:'var(--ap-fg)' }} onClick={()=>setRoute({ name:'editorial' })}>How shipping works <Icon name="arrow-right" size={12}/></button>
            </div>

            <div style={{ flex: 1 }}>
              <RouteMap items={items}/>
            </div>
          </div>
        </div>
      </section>

      {/* ============================================================
          MAISON — featured seller storefronts
         ============================================================ */}
      <section style={{ padding:'80px 0 64px' }}>
        <div className="ag-shell ag-shell--wide">
          <div className="ag-between" style={{ marginBottom: 32, alignItems:'flex-end' }}>
            <div>
              <div className="ag-eyebrow">04 · Maison of the week</div>
              <h2 className="ag-h2" style={{ marginTop: 10 }}>Trusted private sellers</h2>
            </div>
            <span className="ag-label" style={{ cursor:'pointer' }} onClick={()=>setRoute({ name:'sellers' })}>All 1,284 sellers <Icon name="arrow-right" size={11}/></span>
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 1, background:'var(--ap-border)' }}>
            {['par','yoshi','mia','arc'].map(sid => {
              const s = data.sellers[sid];
              const sItems = items.filter(i => i.seller === sid).slice(0, 3);
              return (
                <div key={sid} onClick={()=>setRoute({ name:'seller', id: sid })} style={{ background:'var(--ag-surface)', padding: 24, cursor:'pointer' }}>
                  <div className="ag-between" style={{ alignItems:'flex-start' }}>
                    <div>
                      <div className="ag-eyebrow-ink" style={{ fontSize: 11 }}>{s.name}</div>
                      <div className="ag-mono" style={{ fontSize: 11, color:'var(--ap-fg-muted)', marginTop: 4 }}>{s.handle}</div>
                    </div>
                    <span className="ag-tag ag-tag--auth"><Icon name="shield" size={9} stroke={2}/>&nbsp;Verified</span>
                  </div>
                  <div style={{ marginTop: 14, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 6 }}>
                    {sItems.map(it => (
                      <div key={it.id} style={{ borderRadius: 4, overflow:'hidden' }}>
                        <ProductTile item={it} square showWatermark={false}/>
                      </div>
                    ))}
                  </div>
                  <div className="ag-between" style={{ marginTop: 16 }}>
                    <RouteLine from={s.city} to="Berlin" compact/>
                    <div className="ag-flex ag-gap-1" style={{ alignItems:'center' }}>
                      <Icon name="star-fill" size={10} stroke={0} style={{ color:'var(--ap-fg)' }}/>
                      <span className="ag-mono" style={{ fontSize: 11, fontWeight: 600 }}>{s.rating}</span>
                      <span style={{ fontSize: 10, color:'var(--ap-fg-faint)' }}>· {s.sales.toLocaleString()} sales</span>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* ============================================================
          AUTH THEATER — quietly loud
         ============================================================ */}
      <section className="ag-section--ink" style={{ padding:'96px 0' }}>
        <div className="ag-shell ag-shell--wide">
          <div className="ag-flex" style={{ gap: 80, alignItems:'center' }}>
            <div style={{ flex: 1 }}>
              <div className="ag-eyebrow" style={{ color:'rgba(255,255,255,0.5)' }}>05 · How we authenticate</div>
              <h2 style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontWeight: 400, fontSize: 88, lineHeight: 0.95, letterSpacing:'-0.01em', marginTop: 18 }}>
                Seven checks.<br/>One verdict.
              </h2>
              <p style={{ fontSize: 16, lineHeight: 1.55, color:'rgba(255,255,255,0.7)', maxWidth: 460, marginTop: 28 }}>
                Every piece is physically inspected at one of our three hubs. We document stitching, hardware, leather grain, date stamps, smell, weight, and provenance. You see the filmstrip before you commit.
              </p>
              <div className="ag-flex ag-gap-3" style={{ marginTop: 36 }}>
                <button className="ag-btn" style={{ background:'#fff', color:'var(--ag-ink)', borderColor:'#fff' }}>The authentication promise</button>
                <button className="ag-btn ag-btn--ghost" style={{ color:'#fff', borderColor:'rgba(255,255,255,0.3)' }}>Read 4,820 buyer notes</button>
              </div>
            </div>
            <div style={{ flex: 1, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 8 }}>
              {[
                { l:'Stitching', n:'01' },
                { l:'Hardware', n:'02' },
                { l:'Stamp', n:'03' },
                { l:'Grain', n:'04' },
                { l:'Weight', n:'05' },
                { l:'Provenance', n:'06' },
                { l:'Receipt', n:'07' },
              ].map((c, idx) => (
                <div key={c.l} style={{ aspectRatio:'1/1.1', background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.12)', padding: 16, display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
                  <span className="ag-mono" style={{ fontSize: 11, color:'rgba(255,255,255,0.4)' }}>{c.n}</span>
                  <div>
                    <Icon name={['eye','sparkles','tag','shield','box','globe','external'][idx]} size={28} stroke={1}/>
                    <div className="ag-label" style={{ fontSize: 11, marginTop: 12 }}>{c.l}</div>
                  </div>
                </div>
              ))}
              <div style={{ aspectRatio:'1/1.1', background:'var(--ag-red)', color:'#fff', padding: 16, display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
                <span className="ag-mono" style={{ fontSize: 11, opacity: 0.6 }}>RESULT</span>
                <div>
                  <Icon name="circle-check" size={28} stroke={1.5}/>
                  <div className="ag-label" style={{ fontSize: 11, marginTop: 12 }}>Authenticated</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============================================================
          EDITORIAL — magazine moment
         ============================================================ */}
      <section style={{ padding:'96px 0' }}>
        <div className="ag-shell ag-shell--wide">
          <div className="ag-between" style={{ marginBottom: 32, alignItems:'flex-end' }}>
            <div>
              <div className="ag-eyebrow">06 · Editorial</div>
              <h2 className="ag-h2" style={{ marginTop: 10 }}>Reading list</h2>
            </div>
            <span className="ag-label" style={{ cursor:'pointer' }} onClick={()=>setRoute({ name:'editorial' })}>All articles <Icon name="arrow-right" size={11}/></span>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr', gap: 24 }}>
            <EditorialCard
              eyebrow="The Hermès Index · Spring 26"
              title="What a Birkin actually costs in 2026."
              body="The €14,800 sticker price hides three other numbers: original retail, wait-list premium, and resale floor. We compared 1,204 sales across four cities."
              meta="14 min read · Maya Antinora"
              palette={window.AG_DATA.palettes.cocoa}
              large/>
            <EditorialCard
              eyebrow="Sourcing"
              title="A week in Aoyama."
              body="Three days, twenty-two appointments, four bags."
              meta="6 min · Yuki Tanabe"
              palette={window.AG_DATA.palettes.chalk}/>
            <EditorialCard
              eyebrow="Vintage"
              title="The Comme des Garçons archive boom."
              body="Why 1998 is suddenly worth four times what 1995 is."
              meta="9 min · M. Reuter"
              palette={window.AG_DATA.palettes.olive}/>
          </div>
        </div>
      </section>

      {/* ============================================================
          DREAM FINDER prompt
         ============================================================ */}
      <section style={{ padding:'72px 0 96px', borderTop:'1px solid var(--ap-border)' }}>
        <div className="ag-shell ag-shell--wide" style={{ textAlign:'center' }}>
          <div className="ag-eyebrow">07 · Dream Finder</div>
          <h2 style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 112, lineHeight: 1, letterSpacing:'-0.015em', marginTop: 18, marginBottom: 28 }}>Can't find it?</h2>
          <p style={{ fontSize: 17, color:'var(--ap-fg-muted)', maxWidth: 540, margin:'0 auto 36px', lineHeight: 1.5 }}>
            Tell us the piece. Year, color, condition, your number. We'll hunt it across our private network and message you when it surfaces — usually within 11 days.
          </p>
          <button className="ag-btn ag-btn--red ag-btn--lg" onClick={()=>setRoute({ name:'dream' })}>Open Dream Finder <Icon name="arrow-right" size={14}/></button>
        </div>
      </section>
    </div>
  );
};

// ---------- Editorial cover pieces (used in hero mosaic) ----------
const CoverPiece = ({ n, item, label, onClick, height = 640 }) => {
  const [hover, setHover] = useState(false);
  return (
    <div onClick={onClick} onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      style={{ position:'relative', height, cursor:'pointer', overflow:'hidden', background:'var(--ag-bone)' }}>
      <ProductTile item={item} square showWatermark={false} style={{ position:'absolute', inset: 0, aspectRatio:'auto' }}/>
      {/* gradient veil for legibility */}
      <div style={{ position:'absolute', inset:0, background:'linear-gradient(to bottom, rgba(14,13,12,0.32) 0%, rgba(14,13,12,0) 28%, rgba(14,13,12,0) 55%, rgba(14,13,12,0.65) 100%)' }}/>

      {/* Top — n. + folio label */}
      <div className="ag-between" style={{ position:'absolute', top: 22, left: 22, right: 22, color:'#fff' }}>
        <div className="ag-flex ag-gap-2" style={{ alignItems:'baseline' }}>
          <span className="ag-mono" style={{ fontSize: 11, opacity: 0.7 }}>No.</span>
          <span style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 26 }}>{n}</span>
        </div>
        <span className="ag-eyebrow" style={{ color:'rgba(255,255,255,0.8)', fontSize: 10 }}>{label}</span>
      </div>

      {/* Hardware hover hint */}
      {hover && (
        <div className="ag-fade-in" style={{ position:'absolute', top: 60, left: 22, right: 22 }}>
          <span className="ag-tag" style={{ background:'rgba(255,255,255,0.95)', color:'var(--ag-ink)' }}>
            <Icon name="shield" size={9} stroke={2}/>&nbsp;Authenticated · {item.city}
          </span>
        </div>
      )}

      {/* Bottom — caption */}
      <div style={{ position:'absolute', left: 22, right: 22, bottom: 22, color:'#fff' }}>
        <div className="ag-eyebrow-ink" style={{ fontSize: 11, color:'#fff' }}>{item.brand}</div>
        <div style={{
          fontFamily:'var(--ag-font-serif)', fontStyle:'italic',
          fontSize: 32, lineHeight: 1.05, letterSpacing:'-0.005em',
          marginTop: 8, maxWidth: '90%',
        }}>
          {item.title.split('·')[0].trim()}
        </div>
        <div className="ag-between" style={{ marginTop: 14, alignItems:'baseline' }}>
          <div className="ag-mono" style={{ fontSize: 11, color:'rgba(255,255,255,0.7)' }}>{item.cond} · {item.year}</div>
          <div className="ag-num" style={{ fontSize: 18, fontWeight: 500 }}>€{item.eur.toLocaleString()}</div>
        </div>
      </div>
    </div>
  );
};

const CoverPieceSmall = ({ n, item, onClick }) => {
  return (
    <div onClick={onClick} style={{ position:'relative', flex:'1 1 0', cursor:'pointer', overflow:'hidden', background:'var(--ag-bone)' }}>
      <ProductTile item={item} square showWatermark={false} style={{ position:'absolute', inset: 0, aspectRatio:'auto' }}/>
      <div style={{ position:'absolute', inset:0, background:'linear-gradient(to right, rgba(14,13,12,0.55) 0%, rgba(14,13,12,0.05) 60%, rgba(14,13,12,0) 100%)' }}/>
      <div style={{ position:'absolute', top: 0, left: 0, bottom: 0, padding:'18px 22px', display:'flex', flexDirection:'column', justifyContent:'space-between', color:'#fff', minWidth: '60%' }}>
        <div className="ag-flex ag-gap-2" style={{ alignItems:'baseline' }}>
          <span className="ag-mono" style={{ fontSize: 10, opacity: 0.7 }}>No.</span>
          <span style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 18 }}>{n}</span>
        </div>
        <div>
          <div className="ag-eyebrow-ink" style={{ fontSize: 10, color:'#fff' }}>{item.brand}</div>
          <div style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 18, lineHeight: 1.1, marginTop: 4, maxWidth: 220 }}>
            {item.title.split('·')[0].trim()}
          </div>
          <div className="ag-num" style={{ fontSize: 13, fontWeight: 500, marginTop: 8, color:'rgba(255,255,255,0.9)' }}>€{item.eur.toLocaleString()}</div>
        </div>
      </div>
    </div>
  );
};

// ---------- Category tile (large editorial) ----------
const CategoryTile = ({ item, label, count, eyebrow, featured = false, onClick, row = 1 }) => {
  return (
    <div onClick={onClick} style={{
      position:'relative', overflow:'hidden', background:'var(--ag-paper)',
      gridRow: featured ? `span ${row}` : 'auto', cursor:'pointer',
    }}>
      <ProductTile item={item} square={false} showWatermark={false} style={{ position:'absolute', inset: 0, aspectRatio:'auto' }}/>
      <div style={{ position:'absolute', inset: 0, background:'linear-gradient(to top, rgba(14,13,12,0.5) 0%, rgba(14,13,12,0) 60%)' }}/>
      <div style={{ position:'absolute', left: 20, right: 20, bottom: 20, color:'#fff' }}>
        {eyebrow && <div className="ag-eyebrow" style={{ color:'rgba(255,255,255,0.7)', marginBottom: 8 }}>{eyebrow}</div>}
        <div style={{
          fontFamily: featured ? 'var(--ag-font-serif)' : 'var(--ag-font-sans)',
          fontSize: featured ? 56 : 22,
          fontStyle: featured ? 'italic' : 'normal',
          fontWeight: featured ? 400 : 700,
          letterSpacing: featured ? '-0.01em' : '0.08em',
          textTransform: featured ? 'none' : 'uppercase',
          lineHeight: featured ? 0.95 : 1.2,
        }}>{label}</div>
        <div className="ag-eyebrow" style={{ color:'rgba(255,255,255,0.85)', marginTop: 6 }}>{count} <Icon name="arrow-right" size={11} style={{ verticalAlign:'middle', marginLeft: 4 }}/></div>
      </div>
    </div>
  );
};

// ---------- Simple card (used in dense row) ----------
const SimpleCard = ({ item }) => {
  const [hover, setHover] = useState(false);
  return (
    <div onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)} style={{ position:'relative' }}>
      <ProductTile item={item}>
        <div className="ag-tile__top">
          <div className="ag-flex ag-gap-1">
            {item.new && <span className="ag-tag ag-tag--red">New</span>}
          </div>
          <span className="ag-tag ag-tag--auth" style={{ background:'rgba(255,255,255,0.92)' }}><Icon name="shield" size={9} stroke={2}/>&nbsp;Auth</span>
        </div>
        {hover && (
          <div className="ag-fade-in" style={{ position:'absolute', inset:'auto 10px 10px 10px', background:'rgba(255,255,255,0.96)', padding:'10px 12px', borderRadius: 4 }}>
            <div className="ag-flex ag-gap-2">
              <button className="ag-btn ag-btn--sm" style={{ flex:1 }}>Buy now</button>
              {item.acceptOffers && <button className="ag-btn ag-btn--sm ag-btn--ghost" style={{ flex:1 }}>Offer</button>}
            </div>
          </div>
        )}
      </ProductTile>
      <div style={{ padding:'14px 16px 18px' }}>
        <div className="ag-between" style={{ alignItems:'baseline' }}>
          <div className="ag-eyebrow-ink">{item.brand}</div>
          <div className="ag-num" style={{ fontSize: 13, fontWeight: 600 }}>€{item.eur.toLocaleString()}</div>
        </div>
        <div style={{ color:'var(--ap-fg-muted)', fontSize: 12, marginTop: 4, lineHeight: 1.35, height: 32, overflow:'hidden' }}>{item.title}</div>
        <div className="ag-between" style={{ marginTop: 8 }}>
          <RouteLine from={item.city} to="Berlin" compact/>
          <span className="ag-mono" style={{ fontSize: 10, color:'var(--ap-fg-faint)' }}>{item.cond}</span>
        </div>
      </div>
    </div>
  );
};

// ---------- Editorial card ----------
const EditorialCard = ({ eyebrow, title, body, meta, palette, large = false }) => (
  <div style={{ cursor:'pointer' }}>
    <div style={{ aspectRatio: large ? '16/11' : '4/5', position:'relative', overflow:'hidden' }}>
      <ProductTile item={{ palette, brand:'' }} showWatermark={false} style={{ position:'absolute', inset:0, aspectRatio:'auto' }}/>
    </div>
    <div style={{ paddingTop: 18 }}>
      <div className="ag-eyebrow">{eyebrow}</div>
      <div style={{
        fontFamily:'var(--ag-font-serif)', fontStyle:'italic',
        fontSize: large ? 40 : 24, lineHeight: 1.1, letterSpacing:'-0.005em',
        marginTop: 10,
      }}>{title}</div>
      <p style={{ marginTop: 12, fontSize: large ? 15 : 13, color:'var(--ap-fg-muted)', lineHeight: 1.55, maxWidth: 500 }}>{body}</p>
      <div className="ag-mono" style={{ marginTop: 14, fontSize: 11, color:'var(--ap-fg-faint)' }}>{meta}</div>
    </div>
  </div>
);

// ---------- ROUTE MAP ----------
const RouteMap = ({ items }) => {
  // Simple SVG world (very abstract — labeled dots, arcing routes to Berlin)
  // Coordinate system: 0..100 longitude band, 0..50 latitude band
  const HUBS = [
    { id:'BER', name:'Berlin · Hub', x: 52, y: 19, hub:true },
    { id:'TYO', name:'Tokyo',  x: 86, y: 26 },
    { id:'OSA', name:'Osaka',  x: 84, y: 28 },
    { id:'SEL', name:'Seoul',  x: 82, y: 25 },
    { id:'HKG', name:'Hong Kong', x: 80, y: 32 },
    { id:'PAR', name:'Paris',  x: 49, y: 21 },
    { id:'MIL', name:'Milan',  x: 51, y: 24 },
    { id:'NYC', name:'New York', x: 24, y: 22 },
  ];
  const ber = HUBS[0];

  return (
    <div style={{ background:'var(--ag-surface)', border:'1px solid var(--ap-border)', borderRadius: 4, padding: 28, position:'relative' }}>
      {/* Map header */}
      <div className="ag-between" style={{ marginBottom: 16 }}>
        <div className="ag-eyebrow-ink" style={{ fontSize: 10 }}>Live · 12 listings in transit</div>
        <div className="ag-flex ag-gap-2">
          <span className="ag-dot ag-dot--ok"/>
          <span className="ag-mono" style={{ fontSize: 10, color:'var(--ap-fg-muted)' }}>Hub open</span>
        </div>
      </div>
      <svg viewBox="0 0 100 50" style={{ width:'100%', height:'auto', display:'block' }}>
        {/* faint world graticule */}
        <g stroke="var(--ap-border)" strokeWidth="0.15" fill="none">
          {[10,20,30,40].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="50"/>)}
        </g>
        {/* equator-ish */}
        <line x1="0" y1="36" x2="100" y2="36" stroke="var(--ap-border-strong)" strokeWidth="0.1" strokeDasharray="0.6 1.2" opacity="0.4"/>
        {/* Routes: arcs from each origin to Berlin */}
        {HUBS.filter(h=>!h.hub).map((h, i) => {
          const mx = (h.x + ber.x) / 2;
          const my = Math.min(h.y, ber.y) - 8 - i*0.3;
          return (
            <g key={h.id}>
              <path d={`M ${h.x} ${h.y} Q ${mx} ${my} ${ber.x} ${ber.y}`} stroke="var(--ap-fg)" strokeWidth="0.18" fill="none" strokeDasharray="0.4 0.6" opacity="0.55"/>
            </g>
          );
        })}
        {/* Hubs */}
        {HUBS.map(h => (
          <g key={h.id}>
            <circle cx={h.x} cy={h.y} r={h.hub ? 1.1 : 0.7} fill={h.hub ? 'var(--ag-red)' : 'var(--ap-fg)'}/>
            {h.hub && <circle cx={h.x} cy={h.y} r="2.4" fill="none" stroke="var(--ag-red)" strokeWidth="0.15" opacity="0.5"/>}
            <text x={h.x + 1.2} y={h.y + 0.5} fontSize="1.4" fill="var(--ap-fg)" fontFamily="var(--ag-font-mono)">{h.id}</text>
          </g>
        ))}
      </svg>
      {/* Legend rows */}
      <div style={{ marginTop: 24, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 12 }}>
        {items.slice(0, 6).map(it => (
          <div key={it.id} className="ag-flex ag-gap-3" style={{ alignItems:'center', padding:'10px 0', borderTop:'1px solid var(--ap-border)' }}>
            <div style={{ width: 28, height: 28, borderRadius: 4, overflow:'hidden', flexShrink:0 }}>
              <ProductTile item={it} square showWatermark={false}/>
            </div>
            <div style={{ flex:1, minWidth:0 }}>
              <div className="ag-eyebrow-ink" style={{ fontSize: 9 }}>{it.brand}</div>
              <RouteLine from={it.city} to="Berlin" compact/>
            </div>
            <span className="ag-num" style={{ fontSize: 11, fontWeight: 600 }}>€{it.eur.toLocaleString()}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

window.Home = Home;