// Agora shared components: nav, footer, product tile, route line, badges.

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

// ---------- ICONS (Lucide-style, inline SVG, 1.5 stroke) ----------
const Icon = ({ name, size = 18, stroke = 1.5, ...rest }) => {
  const props = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round', ...rest };
  switch (name) {
    case 'search': return <svg {...props}><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>;
    case 'heart': return <svg {...props}><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>;
    case 'heart-fill': return <svg {...props} fill="currentColor"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>;
    case 'bag': return <svg {...props}><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>;
    case 'user': return <svg {...props}><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>;
    case 'globe': return <svg {...props}><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>;
    case 'chevron-down': return <svg {...props}><path d="m6 9 6 6 6-6"/></svg>;
    case 'chevron-left': return <svg {...props}><path d="m15 18-6-6 6-6"/></svg>;
    case 'chevron-right': return <svg {...props}><path d="m9 18 6-6-6-6"/></svg>;
    case 'arrow-right': return <svg {...props}><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>;
    case 'plus': return <svg {...props}><path d="M5 12h14"/><path d="M12 5v14"/></svg>;
    case 'minus': return <svg {...props}><path d="M5 12h14"/></svg>;
    case 'x': return <svg {...props}><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>;
    case 'check': return <svg {...props}><path d="M20 6 9 17l-5-5"/></svg>;
    case 'filter': return <svg {...props}><path d="M3 6h18"/><path d="M7 12h10"/><path d="M10 18h4"/></svg>;
    case 'sliders': return <svg {...props}><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg>;
    case 'shield': return <svg {...props}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg>;
    case 'sparkles': return <svg {...props}><path d="m12 3-1.9 5.8L4 10l6.1 1.5L12 17l1.9-5.5L20 10l-6.1-1.2z"/></svg>;
    case 'plane': return <svg {...props}><path d="M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9 0-1.2.3l-.4.4c-.3.4-.3 1 .1 1.3l5.1 3.3-2.4 2.4-2.5-.7c-.3-.1-.5 0-.7.2l-.5.5c-.3.3-.2.8.1 1l3.1 1.8.1.1L8 18.6c.3.3.7.3 1 0l.5-.5c.2-.2.2-.5.2-.7l-.7-2.5 2.4-2.4 3.3 5.1c.3.4.9.5 1.3.1l.4-.4c.3-.3.4-.7.3-1.2z"/></svg>;
    case 'gavel': return <svg {...props}><path d="m14 13-7.5 7.5a2.1 2.1 0 0 1-3-3L11 10"/><path d="m16 16 6-6"/><path d="m8 8 6-6"/><path d="m9 7 8 8"/><path d="m21 11-8-8"/></svg>;
    case 'box': return <svg {...props}><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="m3.27 6.96 8.73 5.05 8.73-5.05"/><path d="M12 22.08V12"/></svg>;
    case 'tag': return <svg {...props}><path d="M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><circle cx="7" cy="7" r="1"/></svg>;
    case 'star': return <svg {...props}><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26"/></svg>;
    case 'star-fill': return <svg {...props} fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26"/></svg>;
    case 'eye': return <svg {...props}><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg>;
    case 'clock': return <svg {...props}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>;
    case 'map-pin': return <svg {...props}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/></svg>;
    case 'truck': return <svg {...props}><path d="M10 17h4V5H2v12h3"/><path d="M20 17h-2"/><path d="M14 17h2"/><path d="M22 17h-1V9h-7"/><circle cx="7.5" cy="17.5" r="2.5"/><circle cx="17.5" cy="17.5" r="2.5"/></svg>;
    case 'menu': return <svg {...props}><path d="M3 6h18"/><path d="M3 12h18"/><path d="M3 18h18"/></svg>;
    case 'grid': return <svg {...props}><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>;
    case 'list': return <svg {...props}><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><circle cx="3.5" cy="6" r="1"/><circle cx="3.5" cy="12" r="1"/><circle cx="3.5" cy="18" r="1"/></svg>;
    case 'external': return <svg {...props}><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><path d="M15 3h6v6"/><path d="m10 14 11-11"/></svg>;
    case 'send': return <svg {...props}><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>;
    case 'message': return <svg {...props}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>;
    case 'edit': return <svg {...props}><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4z"/></svg>;
    case 'trash': return <svg {...props}><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>;
    case 'cards': return <svg {...props}><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>;
    case 'spark': return <svg {...props}><path d="M9 3v2"/><path d="M9 19v2"/><path d="M3 9h2"/><path d="M13 9h2"/><path d="m5 5 1.4 1.4"/><path d="m11.6 11.6 1.4 1.4"/><path d="m5 13 1.4-1.4"/><path d="m11.6 6.4 1.4-1.4"/><path d="M19 14v8"/><path d="M15 18h8"/></svg>;
    case 'circle-check': return <svg {...props}><circle cx="12" cy="12" r="10"/><path d="m8 12 3 3 5-6"/></svg>;
    case 'pause': return <svg {...props}><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>;
    case 'arrow-up-right': return <svg {...props}><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>;
    default: return null;
  }
};

// ---------- LUXURY PRODUCT TILE (CSS placeholder w/ subtle gradient + hardware glint) ----------
const ProductTile = ({ item, square = false, showWatermark = true, children, style }) => {
  const p = item?.palette || { a: '#E8E4DD', b: '#BDB7AC', hw: '#9A9590', label: '—' };
  // Subtle vignette + radial highlight + hardware metallic dot
  const bg = {
    backgroundColor: p.b,
    backgroundImage: [
      `radial-gradient(ellipse at 30% 25%, ${p.a} 0%, ${p.a} 18%, transparent 55%)`,
      `radial-gradient(ellipse at 70% 80%, ${p.b} 10%, transparent 70%)`,
      `linear-gradient(135deg, ${p.a} 0%, ${p.b} 100%)`,
    ].join(', '),
  };
  return (
    <div className={`ag-tile${square ? ' ag-tile--sq' : ''}`} style={{ ...bg, ...style }}>
      {/* Hardware glint */}
      <div style={{
        position:'absolute', width:18, height:18, borderRadius:'9999px',
        background:`radial-gradient(circle at 30% 30%, ${p.hw}, ${p.hw}99 60%, ${p.hw}33 100%)`,
        top:'58%', left:'48%', boxShadow:`0 1px 2px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.3)`,
        opacity: 0.85,
      }}/>
      {/* Stitching arc — purely suggestive */}
      <div style={{
        position:'absolute', inset:'30% 18% 38% 18%', borderRadius:'40% 40% 28% 28%',
        border:`1px dashed ${p.hw}80`, opacity:0.35, pointerEvents:'none',
      }}/>
      {showWatermark && item?.brand && (
        <div className="ag-tile__wm">{item.brand.split(' ')[0].toLowerCase()}</div>
      )}
      {children}
    </div>
  );
};

// ---------- PRODUCT CARD (catalog grid) ----------
const ProductCard = ({ item, onClick, dense = false }) => {
  const [hover, setHover] = useState(false);
  const [liked, setLiked] = useState(false);
  return (
    <div
      className="ag-card"
      onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      onClick={onClick}
      style={{ cursor:'pointer', borderRadius: 0, border:0, borderTop:'1px solid var(--ap-border)' }}
    >
      <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>}
            {item.acceptOffers && <span className="ag-tag ag-tag--bone">Offers</span>}
          </div>
          <div
            className={`ag-heart${liked ? ' ag-heart--active' : ''}`}
            onClick={(e)=>{ e.stopPropagation(); setLiked(!liked); }}
            title={liked ? 'Saved' : 'Save'}
          >
            <Icon name={liked ? 'heart-fill' : 'heart'} size={14}/>
          </div>
        </div>
        <div className="ag-tile__bot">
          <span className="ag-tag ag-tag--auth"><Icon name="shield" size={9} stroke={2}/>&nbsp;Auth</span>
          <span style={{ fontSize:9, letterSpacing:'0.14em', color:'#fff', textTransform:'uppercase', fontWeight:600, opacity:0.9 }}>{item.city}</span>
        </div>
      </ProductTile>
      <div style={{ padding: dense ? '10px 0 14px' : '14px 0 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, minHeight: 32 }}>{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>
  );
};

// ---------- ROUTE LINE (Tokyo → Berlin) ----------
const RouteLine = ({ from, to = 'Berlin', compact = false }) => (
  <div className="ag-route" style={{ fontSize: compact ? 9 : 10, color: 'var(--ap-fg-faint)' }}>
    <span>{from}</span>
    <span className="ag-route__dash"/>
    <span style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: compact ? 12 : 13, color:'var(--ap-fg-muted)' }}>→</span>
    <span className="ag-route__dash"/>
    <span>{to}</span>
  </div>
);

// ---------- AGORA WORDMARK ----------
const Wordmark = ({ size = 22, compact = false }) => (
  <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
    {/* Brand mark — circle with serif "a" */}
    <div style={{
      width: size, height: size, borderRadius:'9999px',
      background:'var(--ag-ink)', color:'#fff',
      display:'flex', alignItems:'center', justifyContent:'center',
      fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontWeight:500,
      fontSize: size*0.62, lineHeight:1, paddingBottom: size*0.04,
    }}>a</div>
    {!compact && (
      <span className="ag-mark" style={{ fontSize: size*0.95 }}>agora</span>
    )}
  </div>
);

// ---------- TOP NAV ----------
const TopNav = ({ route, setRoute, onSearch, watchlistCount = 0, cartCount = 0 }) => {
  const [searchOpen, setSearchOpen] = useState(false);
  const isActive = (r) => route?.name === r;
  return (
    <>
    {/* Thin promo strip — quiet trust promises, Apple-style */}
    <PromoStrip/>
    <header style={{
      position:'sticky', top:0, zIndex:30,
      background:'var(--ag-header-bg)', backdropFilter:'blur(12px)',
      borderBottom:'1px solid var(--ap-border)',
    }}>
      <div className="ag-shell ag-shell--wide" style={{ height:'var(--ag-nav-h)', display:'grid', gridTemplateColumns:'1fr auto 1fr', alignItems:'center', gap: 24 }}>
        {/* LEFT: wordmark + search */}
        <div className="ag-flex ag-gap-4" style={{ alignItems:'center', justifySelf:'start' }}>
          <div onClick={()=>setRoute({ name:'home' })} style={{ cursor:'pointer' }}>
            <Wordmark size={22}/>
          </div>
          <button onClick={()=>setSearchOpen(true)} className="ag-flex ag-gap-2"
            style={{ alignItems:'center', height: 36, padding:'0 12px', border:'1px solid var(--ap-border)', background:'#fff', borderRadius: 2, cursor:'pointer', color:'var(--ap-fg-muted)' }}>
            <Icon name="search" size={14}/>
            <span style={{ fontSize: 12, letterSpacing:'0.04em' }}>Search 12,840 listings</span>
            <span className="ag-mono" style={{ fontSize: 10, padding:'2px 6px', border:'1px solid var(--ap-border)', borderRadius: 2, marginLeft: 24, color:'var(--ap-fg-faint)' }}>⌘ K</span>
          </button>
        </div>

        {/* CENTER: categories */}
        <div className="ag-flex ag-gap-8" style={{ alignItems:'center', justifySelf:'center' }}>
          <nav className="ag-flex ag-gap-6" style={{ alignItems:'center' }}>
            {[
              { id:'shop',     label:'Shop',     route:{ name:'browse', cat:'all' } },
              { id:'editorial',label:'Editorial',route:{ name:'editorial' } },
              { id:'sellers',  label:'Sellers',  route:{ name:'sellers' } },
              { id:'dream',    label:'Dream Finder', route:{ name:'dream' } },
              { id:'sell',     label:'Sell on Agora', route:{ name:'sellerdash' } },
            ].map(l => (
              <span key={l.id} onClick={()=>setRoute(l.route)} className="ag-label"
                style={{ cursor:'pointer', color: route?.name === l.route.name ? 'var(--ap-fg)':'var(--ap-fg-muted)', position:'relative', paddingBottom: 2 }}>
                {l.label}
                {route?.name === l.route.name && <span style={{ position:'absolute', left:0, right:0, bottom:-22, height:2, background:'var(--ag-red)' }}/>}
              </span>
            ))}
          </nav>
        </div>

        {/* RIGHT: utility icons */}
        <div className="ag-flex ag-gap-4" style={{ alignItems:'center', justifySelf:'end' }}>
          <div onClick={()=>setRoute({ name:'watchlist' })} style={{ cursor:'pointer', position:'relative' }}>
            <Icon name="heart" size={18}/>
            {watchlistCount > 0 && <span style={{ position:'absolute', top:-6, right:-8, background:'var(--ag-red)', color:'#fff', borderRadius:'9999px', fontSize:9, fontWeight:700, padding:'1px 5px', minWidth:14, textAlign:'center' }}>{watchlistCount}</span>}
          </div>
          <Icon name="bag" size={18}/>
          <div style={{ width: 28, height: 28, borderRadius:'9999px', background:'var(--ag-ink)', color:'var(--ag-on-ink)', display:'flex', alignItems:'center', justifyContent:'center', fontSize: 10, fontWeight:600, letterSpacing:'0.04em' }}>LK</div>
        </div>
      </div>
      {/* Sub-nav: categories — clean, centered, just categories */}
      <div className="ag-shell ag-shell--wide" style={{ height:'var(--ag-nav-sub-h)', display:'flex', alignItems:'center', justifyContent:'center', gap: 32, borderTop:'1px solid var(--ap-border)' }}>
        {window.AG_DATA.categories.map(c => (
          <span key={c.id} className="ag-label" onClick={()=>setRoute({ name:'browse', cat: c.id })}
            style={{ cursor:'pointer', fontSize: 10, color: route?.name==='browse' && route?.cat===c.id ? 'var(--ag-ink)':'var(--ap-fg-muted)' }}>
            {c.label}
          </span>
        ))}
      </div>
    </header>
    {searchOpen && <CommandPalette onClose={()=>setSearchOpen(false)} setRoute={(r)=>{ setRoute(r); setSearchOpen(false); }}/>}
    </>
  );
};

// ---------- PROMO STRIP (above main nav) ----------
const PROMO_MESSAGES = [
  { icon: 'shield',  text: 'Every piece authenticated at one of three hubs. Free, always.' },
  { icon: 'truck',   text: 'DDP shipping included — customs & duties pre-cleared to your door.' },
  { icon: 'box',     text: '14-day returns from delivery. Buyer protection on every transaction.' },
  { icon: 'globe',   text: '1,284 sellers across Tokyo, Paris, Milan, Seoul, New York &amp; more.' },
];
const PromoStrip = () => {
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % PROMO_MESSAGES.length), 5000);
    return () => clearInterval(t);
  }, []);
  return (
    <div style={{
      background: 'var(--ag-ink)', color: 'rgba(255,255,255,0.85)',
      borderBottom:'1px solid #000',
      height: 32, display:'flex', alignItems:'center', overflow:'hidden',
    }}>
      <div className="ag-shell ag-shell--wide ag-between" style={{ height:'100%' }}>
        <div style={{ width: 28 }}/>
        <div className="ag-flex ag-gap-3" style={{ alignItems:'center', position:'relative', height: 32, overflow:'hidden' }}>
          {PROMO_MESSAGES.map((m, i) => (
            <div key={i} className="ag-flex ag-gap-2" style={{
              alignItems:'center',
              position: i === idx ? 'relative' : 'absolute',
              opacity: i === idx ? 1 : 0,
              transform: i === idx ? 'translateY(0)' : 'translateY(8px)',
              transition: 'opacity 480ms var(--ap-ease), transform 480ms var(--ap-ease)',
              pointerEvents: i === idx ? 'auto' : 'none',
              whiteSpace:'nowrap',
            }}>
              <Icon name={m.icon} size={12} stroke={1.5}/>
              <span className="ag-label" style={{ fontSize: 10, color:'rgba(255,255,255,0.9)', fontWeight: 500 }} dangerouslySetInnerHTML={{ __html: m.text }}/>
            </div>
          ))}
        </div>
        <div className="ag-flex ag-gap-1" style={{ width: 28, justifyContent:'flex-end' }}>
          {PROMO_MESSAGES.map((_, i) => (
            <span key={i} style={{ width: 4, height: 4, borderRadius: '9999px', background: i === idx ? 'rgba(255,255,255,0.9)' : 'rgba(255,255,255,0.25)', transition:'background var(--ap-dur) var(--ap-ease)' }}/>
          ))}
        </div>
      </div>
    </div>
  );
};

// ---------- COMMAND PALETTE (Cmd+K search-led nav) ----------
const CommandPalette = ({ onClose, setRoute }) => {
  const [q, setQ] = useState('');
  const inputRef = useRef();
  useEffect(()=>{ inputRef.current?.focus(); const esc = (e)=>{ if (e.key==='Escape') onClose(); }; window.addEventListener('keydown', esc); return ()=>window.removeEventListener('keydown', esc); }, []);
  const data = window.AG_DATA;
  const ql = q.toLowerCase();
  const items = data.items.filter(it => !q || it.brand.toLowerCase().includes(ql) || it.title.toLowerCase().includes(ql)).slice(0, 8);
  const brands = data.brands.filter(b => !q || b.toLowerCase().includes(ql)).slice(0, 6);
  return (
    <div onClick={onClose} style={{ position:'fixed', inset:0, background:'rgba(20,20,20,0.4)', zIndex:60, display:'flex', justifyContent:'center', alignItems:'flex-start', paddingTop: 90 }}>
      <div onClick={(e)=>e.stopPropagation()} style={{ width: 720, background:'#fff', borderRadius: 4, boxShadow:'var(--ap-shadow-modal)', overflow:'hidden' }} className="ag-fade-in">
        <div className="ag-flex ag-gap-3" style={{ alignItems:'center', padding:'18px 22px', borderBottom:'1px solid var(--ap-border)' }}>
          <Icon name="search" size={16}/>
          <input ref={inputRef} value={q} onChange={e=>setQ(e.target.value)} placeholder="Search brands, items, sellers…" style={{ flex:1, border:0, outline:'none', fontSize: 16, fontFamily:'var(--ag-font-sans)' }}/>
          <span className="ag-mono" style={{ fontSize: 10, padding:'2px 6px', border:'1px solid var(--ap-border)', borderRadius: 2, color:'var(--ap-fg-faint)' }}>Esc</span>
        </div>
        <div className="ag-scroll" style={{ maxHeight: 440, padding:'12px 0' }}>
          <div style={{ padding:'8px 22px 6px' }} className="ag-eyebrow">Items</div>
          {items.map(it => (
            <div key={it.id} onClick={()=>setRoute({ name:'product', id: it.id })} className="ag-flex ag-gap-3"
              style={{ padding:'10px 22px', cursor:'pointer', alignItems:'center' }}
              onMouseEnter={(e)=>e.currentTarget.style.background='var(--ap-bg-2)'} onMouseLeave={(e)=>e.currentTarget.style.background='transparent'}>
              <div style={{ width: 36, height: 36, 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: 10 }}>{it.brand}</div>
                <div style={{ fontSize: 12, color:'var(--ap-fg-muted)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{it.title}</div>
              </div>
              <div className="ag-num" style={{ fontSize: 12, fontWeight: 600 }}>€{it.eur.toLocaleString()}</div>
              <div style={{ width: 80, textAlign:'right' }}><RouteLine from={it.city} to="Berlin" compact/></div>
            </div>
          ))}
          <div style={{ padding:'12px 22px 6px' }} className="ag-eyebrow">Brands</div>
          <div style={{ padding:'0 22px 14px', display:'flex', flexWrap:'wrap', gap: 8 }}>
            {brands.map(b => <span key={b} className="ag-chip" onClick={()=>setRoute({ name:'browse', cat:'all', brand: b })}>{b}</span>)}
          </div>
        </div>
      </div>
    </div>
  );
};

// ---------- FOOTER ----------
const Footer = ({ setRoute }) => (
  <footer style={{ background:'var(--ag-ink)', color:'var(--ag-bone)', marginTop: 80 }}>
    <div className="ag-shell ag-shell--wide" style={{ padding:'80px 32px 40px' }}>
      <div className="ag-flex" style={{ gap: 80, alignItems:'flex-start' }}>
        <div style={{ flex:1, maxWidth: 420 }}>
          <div style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 64, lineHeight: 0.95, letterSpacing:'-0.01em' }}>You want it,<br/>we find it.</div>
          <div style={{ marginTop: 28, fontSize: 13, lineHeight: 1.6, color:'rgba(255,255,255,0.7)' }}>
            Agora is an independent intercontinental marketplace. We curate, authenticate, and ship pre-loved luxury from private sellers across 14 countries.
          </div>
          <div className="ag-flex ag-gap-2" style={{ marginTop: 28 }}>
            <input className="ag-input" placeholder="Your email — for new listings & editorial drops" style={{ background:'transparent', borderColor:'rgba(255,255,255,0.2)', color:'#fff' }}/>
            <button className="ag-btn" style={{ background:'#fff', color:'var(--ag-ink)', borderColor:'#fff' }}>Subscribe</button>
          </div>
        </div>
        <div className="ag-flex ag-gap-8" style={{ flex:1, justifyContent:'flex-end' }}>
          {[
            { h:'Shop', items:['Handbags','Clothing','Watches','Jewelry','Accessories','Vintage & Archive'] },
            { h:'Trust', items:['Authentication','Buyer protection','Returns','Customs & DDP'] },
            { h:'Sell', items:['List with Agora','Curator program','Pricing & fees','Seller handbook'] },
            { h:'Agora', items:['About','Editorial','Careers','Press','Contact'] },
          ].map(col => (
            <div key={col.h} style={{ minWidth: 140 }}>
              <div className="ag-eyebrow" style={{ color:'rgba(255,255,255,0.5)' }}>{col.h}</div>
              <div className="ag-col ag-gap-3" style={{ marginTop: 14 }}>
                {col.items.map(i => <span key={i} style={{ fontSize: 13, color:'rgba(255,255,255,0.85)', cursor:'pointer' }}>{i}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="ag-between" style={{ marginTop: 80, paddingTop: 28, borderTop:'1px solid rgba(255,255,255,0.12)' }}>
        <div className="ag-flex ag-gap-6" style={{ alignItems:'center' }}>
          <Wordmark size={20}/>
          <span className="ag-label" style={{ color:'rgba(255,255,255,0.5)' }}>Tbilisi · Berlin · Tokyo</span>
        </div>
        <div className="ag-flex ag-gap-6" style={{ alignItems:'center', color:'rgba(255,255,255,0.5)' }}>
          <a className="ag-label" style={{ fontSize: 10, color:'inherit' }} href="https://mirror.appearance.fr/jobs" target="_blank" rel="noreferrer">Curation desk · Internal ↗</a>
          <span style={{ width: 1, height: 10, background:'rgba(255,255,255,0.2)' }}/>
          <span className="ag-label" style={{ fontSize: 10 }}>EN / DE / JA / IT / FR</span>
          <span className="ag-label" style={{ fontSize: 10 }}>EUR · €</span>
          <span className="ag-label" style={{ fontSize: 10 }}>© 2026 Agora Marketplace SAL</span>
        </div>
      </div>
    </div>
  </footer>
);

// ---------- EXPORTS ----------
Object.assign(window, { Icon, ProductTile, ProductCard, RouteLine, Wordmark, TopNav, Footer, CommandPalette });
