/* mobile-screens.jsx — všechny mobile screeny · 375px baseline */

/* ── 01 · HEADER + NAV DRAWER ─────────────────── */
const ScreenHeader = () => {
  const [open, setOpen] = React.useState(false);
  return (
    <PhoneFrame screen="01" label="Header · Nav drawer" note="Hamburger → spring 480ms slide in · BAG count vždy viditelný">
      <div style={{ position:'relative', overflow:'hidden', height:520 }}>
        <StatusBar/>
        {/* Announcement bar */}
        <div className="mono" style={{ background:T.ink, color:T.bone, height:32, display:'flex', alignItems:'center', justifyContent:'center', fontSize:9, letterSpacing:'.2em', textTransform:'uppercase' }}>
          FREE EU SHIPPING OVER €300
        </div>
        <MobileNav open={open} onToggle={() => setOpen(o => !o)}/>
        {/* Page content preview */}
        <div style={{ padding:`${S[5]}px ${MG}px`, opacity: open ? .3 : 1, transition:`opacity ${M.base.d}ms ${M.base.e}`, background:T.bone, minHeight:400 }}>
          <div style={{ fontWeight:900, fontSize:52, letterSpacing:'-0.04em', lineHeight:.92 }}>Hand-fed<br/>metalwork.</div>
          <div className="mono" style={{ marginTop:S[4], fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', color:T.n400 }}>SCROLL TO EXPLORE ↓</div>
        </div>
        <MobileDrawerMenu open={open} onClose={() => setOpen(false)}/>
      </div>
      <MAnn items={[
        ['header h', '56px'], ['announcement h', '32px'], ['gutter', '16px'],
        ['wordmark', '22px'], ['hamburger', '22×2px bars · gap 5px'],
        ['drawer', 'translateX(-100%→0) · spring 480ms'],
      ]}/>
    </PhoneFrame>
  );
};

/* ── 02 · HERO (drop mode) ─────────────────────── */
const ScreenHero = () => {
  const [t, setT] = React.useState({ d:2, h:14, m:32, s:11 });
  React.useEffect(() => {
    const x = setInterval(() => setT(p => {
      let { d, h, m, s } = p;
      s--; if (s<0){s=59;m--;} if(m<0){m=59;h--;} if(h<0){h=23;d--;}
      return {d,h,m,s};
    }), 1000);
    return () => clearInterval(x);
  }, []);
  const pad = n => String(n).padStart(2,'0');
  return (
    <PhoneFrame screen="02" label="Hero · drop countdown" note="Min-height 100dvh · countdown hideuje pri diff ≤ 0">
      <div style={{ background:T.ink, color:T.bone, minHeight:620, display:'flex', flexDirection:'column' }}>
        <StatusBar light/>
        <div className="mono" style={{ background:T.ink, color:T.bone, height:32, display:'flex', alignItems:'center', justifyContent:'center', fontSize:9, letterSpacing:'.2em', gap:S[4] }}>
          <span style={{color:T.neon}}>● LIVE</span><span>DROP 02 · NOV 14</span>
        </div>
        <MobileNav dark/>
        <div style={{ flex:1, padding:`${S[6]}px ${MG}px ${S[5]}px`, display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
          <div>
            <div className="mono" style={{ fontSize:10, letterSpacing:'.2em', color:T.neon, marginBottom:S[4], textTransform:'uppercase' }}>● DROP 02 · FW26 · GOES LIVE NOV 14</div>
            <h1 style={{ fontWeight:900, fontSize:64, letterSpacing:'-0.045em', lineHeight:.92, margin:0, position:'relative' }}>
              <span style={{ position:'relative', display:'inline-block' }}>
                <span aria-hidden style={{ position:'absolute', left:'-0.04em', right:'-0.04em', top:'55%', height:'50%', background:T.neon, zIndex:0 }}/>
                <span style={{ position:'relative', zIndex:1 }}>Hand-fed.</span>
              </span>
            </h1>
          </div>
          <div>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:S[3], marginBottom:S[5] }}>
              {[['DAYS', t.d], ['HRS', t.h], ['MIN', t.m], ['SEC', t.s]].map(([l, v]) => (
                <div key={l} style={{ textAlign:'center' }}>
                  <div style={{ fontWeight:900, fontSize:36, letterSpacing:'-0.03em', lineHeight:1, fontVariantNumeric:'tabular-nums' }}>{pad(v)}</div>
                  <div className="mono" style={{ fontSize:9, letterSpacing:'.2em', opacity:.55, marginTop:4, textTransform:'uppercase' }}>{l}</div>
                </div>
              ))}
            </div>
            <button style={{ width:'100%', height:52, background:T.neon, color:T.ink, border:'none', fontWeight:700, fontSize:15, letterSpacing:'.02em', cursor:'pointer' }}>
              Get notified →
            </button>
          </div>
        </div>
      </div>
      <MAnn items={[
        ['display', '64px · lh .92'], ['countdown', '36px tabular-nums'],
        ['CTA h', '52px · full-width'], ['gutter', '16px'],
        ['neon bar', 'top 55% · h 50%'], ['bg', 'T.ink #0a0a0a'],
      ]}/>
    </PhoneFrame>
  );
};

/* ── 03 · COLLECTION GRID ──────────────────────── */
const ScreenCollection = () => (
  <PhoneFrame screen="03" label="Collection · 2-col grid" note="2 sloupce mobile · gap S[2]=8px · quick-add na tap (ne hover)">
    <StatusBar/>
    <div className="mono" style={{ background:T.ink, color:T.bone, height:32, display:'flex', alignItems:'center', justifyContent:'center', fontSize:9, letterSpacing:'.2em' }}>
      FREE EU SHIPPING OVER €300
    </div>
    <MobileNav/>
    {/* Collection header */}
    <div style={{ padding:`${S[4]}px ${MG}px ${S[3]}px`, display:'flex', justifyContent:'space-between', alignItems:'baseline', borderBottom:`1px solid ${T.n200}` }}>
      <h2 style={{ fontWeight:900, fontSize:22, letterSpacing:'-0.03em', margin:0 }}>All</h2>
      <div style={{ display:'flex', gap:S[3] }}>
        <button style={{ background:'none', border:`1px solid ${T.ink}`, padding:`${S[1]}px ${S[3]}px`, fontSize:11, cursor:'pointer' }}>Filter</button>
        <button style={{ background:'none', border:`1px solid ${T.n200}`, padding:`${S[1]}px ${S[3]}px`, fontSize:11, cursor:'pointer' }}>Sort</button>
      </div>
    </div>
    {/* 2-col grid */}
    <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:S[2], padding:S[2], background:T.bone }}>
      {[
        { name:'Loop Bag',     color:'Chrome',   price:'€620,00', tag:{label:'NEW', variant:'neon'} },
        { name:'Fringe Charm', color:'Lavender', price:'€85,00' },
        { name:'Cast Belt',    color:'Mirror',   price:'€340,00', tag:{label:'LAST 3', dot:T.negative} },
        { name:'Loop Bag',     color:'Chrome',   price:'€620,00' },
      ].map((p, i) => (
        <ProductCard key={i} {...p}/>
      ))}
    </div>
    <MAnn items={[
      ['columns', '2 mobile · 4 desktop'], ['gap', 'S[2] = 8px'],
      ['gutter', 'S[2] = 8px'], ['filter', 'bottom drawer on mobile'],
      ['quick-add', 'tap to show (no hover on touch)'],
    ]}/>
  </PhoneFrame>
);

/* ── 04 · PDP ──────────────────────────────────── */
const ScreenPDP = () => {
  const [variant, setVariant] = React.useState('Chrome');
  const [size, setSize]       = React.useState('M');
  const [qty, setQty]         = React.useState(1);
  const variants = ['Chrome', 'Mirror', 'Midnight'];
  const sizes    = ['S', 'M', 'L'];
  return (
    <PhoneFrame screen="04" label="PDP · stacked + sticky CTA" note="Gallery full-width · sticky CTA bar bottom (safe-area-inset-bottom)">
      <div style={{ background:T.bone, display:'flex', flexDirection:'column', minHeight:700, position:'relative' }}>
        <StatusBar/>
        <div className="mono" style={{ background:T.ink, color:T.bone, height:32, display:'flex', alignItems:'center', justifyContent:'center', fontSize:9, letterSpacing:'.2em' }}>FREE EU SHIPPING OVER €300</div>
        <MobileNav/>
        {/* Gallery — full width, 4:5 */}
        <div style={{ position:'relative', aspectRatio:'4/5', background:`linear-gradient(135deg, ${T.chrome}, ${T.n400})`, flexShrink:0, maxHeight:280, overflow:'hidden' }}>
          <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center', fontWeight:900, fontSize:64, color:T.bone, opacity:.3, letterSpacing:'-0.04em' }}>LOOP</div>
          <div style={{ position:'absolute', top:S[3], left:S[3] }}><Tag variant="neon">NEW · DROP 02</Tag></div>
          {/* thumb strip */}
          <div style={{ position:'absolute', bottom:S[3], left:S[3], right:S[3], display:'flex', gap:S[1] }}>
            {[1,2,3,4].map(i => <div key={i} style={{ flex:1, height:40, background:T.paper, border:`1px solid ${T.ink}`, opacity: i===1?1:.5 }}/>)}
          </div>
        </div>
        {/* Form */}
        <div style={{ padding:`${S[4]}px ${MG}px`, flex:1, display:'flex', flexDirection:'column', gap:S[3] }}>
          <div className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', display:'flex', justifyContent:'space-between' }}>
            <span style={{opacity:.55}}>BAGS · LOOP</span>
            <span style={{color:T.positive}}>● IN STOCK</span>
          </div>
          <h2 style={{ fontWeight:900, fontSize:28, letterSpacing:'-0.03em', lineHeight:1, margin:0 }}>The Loop Bag</h2>
          <div style={{ fontSize:20, fontWeight:900 }}>€620,00</div>
          {/* Variant */}
          <div>
            <div className="mono" style={{ fontSize:9, letterSpacing:'.18em', textTransform:'uppercase', color:T.n500, marginBottom:S[2] }}>FINISH · {variant}</div>
            <div style={{ display:'flex', gap:S[2] }}>
              {variants.map(v => (
                <button key={v} onClick={() => setVariant(v)} style={{
                  flex:1, padding:`${S[2]}px 0`, background:T.paper, border:`1px solid ${variant===v?T.ink:T.n300}`,
                  borderBottomWidth: variant===v?3:1, cursor:'pointer', fontSize:12, fontWeight:600,
                }}>{v}</button>
              ))}
            </div>
          </div>
          {/* Size */}
          <div>
            <div className="mono" style={{ fontSize:9, letterSpacing:'.18em', textTransform:'uppercase', color:T.n500, marginBottom:S[2], display:'flex', justifyContent:'space-between' }}>
              <span>SIZE · {size}</span><a href="#" style={{color:T.ink}}>SIZE GUIDE →</a>
            </div>
            <div style={{ display:'flex', gap:S[2] }}>
              {sizes.map(s => (
                <button key={s} onClick={() => setSize(s)} style={{
                  flex:1, padding:`${S[3]}px 0`, background:T.paper, border:`1px solid ${size===s?T.ink:T.n300}`,
                  borderBottomWidth: size===s?3:1, cursor:'pointer', fontSize:15, fontWeight:700,
                }}>{s}</button>
              ))}
            </div>
          </div>
          {/* Features */}
          <ul style={{ listStyle:'none', padding:0, margin:0, borderTop:`1px solid ${T.n200}` }}>
            {['Polished aluminium body','Hand-cast hardware','Edition of 200'].map(x => (
              <li key={x} style={{ display:'flex', justifyContent:'space-between', padding:`${S[2]}px 0`, borderBottom:`1px solid ${T.n200}`, fontSize:13 }}>
                <span>{x}</span><span className="mono" style={{ opacity:.4, fontSize:10 }}>✓</span>
              </li>
            ))}
          </ul>
          {/* spacer for sticky bar */}
          <div style={{ height:80 }}/>
        </div>
        <StickyATC label={`Add to bag · €${620*qty},00`}/>
      </div>
      <MAnn items={[
        ['gallery', 'full-width · 4:5 · max-height 280px'],
        ['title', '28px 900 · ls -0.03em'],
        ['variant btn h', '~40px · border-bottom 3px active'],
        ['sticky CTA h', '48px btn + 12px padding + safe-area'],
        ['sticky bg', 'T.bone · border-top T.ink'],
      ]}/>
    </PhoneFrame>
  );
};

/* ── 05 · CART DRAWER ──────────────────────────── */
const ScreenCart = () => {
  const [open, setOpen] = React.useState(true);
  const items = [
    { name:'Loop Bag', variant:'Chrome', size:'M', qty:1, price:620 },
    { name:'Fringe Charm', variant:'Gold', size:'—', qty:2, price:85 },
  ];
  const total = items.reduce((s,i) => s + i.price*i.qty, 0);
  return (
    <PhoneFrame screen="05" label="Cart drawer · bottom sheet mobile" note="Na mobilu: full-height slide-up ze spodu · spring 480ms · backdrop 40% opacity">
      <div style={{ position:'relative', overflow:'hidden', height:640, background:T.bone }}>
        <StatusBar/>
        <div className="mono" style={{ background:T.ink, color:T.bone, height:32, display:'flex', alignItems:'center', justifyContent:'center', fontSize:9, letterSpacing:'.2em' }}>FREE EU SHIPPING OVER €300</div>
        <MobileNav onToggle={() => setOpen(o => !o)}/>
        {/* Backdrop */}
        <div onClick={() => setOpen(false)} style={{
          position:'absolute', inset:0, background:'rgba(10,10,10,.4)',
          opacity: open?1:0, pointerEvents: open?'auto':'none',
          transition:`opacity ${M.base.d}ms ${M.base.e}`, zIndex:10,
        }}/>
        {/* Drawer — slides from bottom on mobile */}
        <div style={{
          position:'absolute', left:0, right:0, bottom:0,
          background:T.bone, borderTop:`1px solid ${T.ink}`,
          borderRadius:'8px 8px 0 0',
          transform: open?'translateY(0)':'translateY(100%)',
          transition:`transform ${M.spring.d}ms ${M.spring.e}`,
          zIndex:20, display:'flex', flexDirection:'column', maxHeight:'80%',
        }}>
          {/* Handle */}
          <div style={{ display:'flex', justifyContent:'center', padding:`${S[3]}px 0 0` }}>
            <div style={{ width:36, height:4, background:T.n300, borderRadius:2 }}/>
          </div>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:`${S[3]}px ${MG}px`, borderBottom:`1px solid ${T.ink}` }}>
            <span className="mono" style={{ fontSize:11, letterSpacing:'.18em', textTransform:'uppercase' }}>YOUR BAG · {items.length}</span>
            <button onClick={() => setOpen(false)} style={{ background:'none', border:'none', cursor:'pointer', fontSize:18 }}>✕</button>
          </div>
          <div style={{ flex:1, overflow:'auto', padding:`${S[4]}px ${MG}px`, display:'flex', flexDirection:'column', gap:S[4] }}>
            {items.map((it, i) => (
              <div key={i} style={{ display:'grid', gridTemplateColumns:'72px 1fr', gap:S[3], paddingBottom:S[4], borderBottom:`1px solid ${T.n200}` }}>
                <div style={{ aspectRatio:'1', background:`linear-gradient(135deg, ${T.chrome}, ${T.n400})` }}/>
                <div style={{ display:'flex', flexDirection:'column', gap:3 }}>
                  <div style={{ fontWeight:700, fontSize:14 }}>{it.name}</div>
                  <div className="mono" style={{ fontSize:10, letterSpacing:'.14em', textTransform:'uppercase', opacity:.55 }}>{it.variant} · {it.size} · QTY {it.qty}</div>
                  <div style={{ marginTop:'auto', display:'flex', justifyContent:'space-between' }}>
                    <a href="#" className="mono" style={{ fontSize:10, letterSpacing:'.14em', color:T.n500 }}>REMOVE</a>
                    <span style={{ fontWeight:900, fontSize:14 }}>€{it.price*it.qty},00</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ padding:`${S[4]}px ${MG}px`, borderTop:`1px solid ${T.ink}`, background:T.paper, paddingBottom:`calc(${S[4]}px + env(safe-area-inset-bottom, 0px))` }}>
            <div style={{ display:'flex', justifyContent:'space-between', marginBottom:S[3] }}>
              <span className="mono" style={{ fontSize:11, letterSpacing:'.18em', textTransform:'uppercase' }}>SUBTOTAL</span>
              <span style={{ fontWeight:900, fontSize:18 }}>€{total},00</span>
            </div>
            <button style={{ width:'100%', height:52, background:T.ink, color:T.bone, border:`1px solid ${T.ink}`, fontWeight:700, fontSize:15, cursor:'pointer' }}>
              Checkout →
            </button>
          </div>
        </div>
      </div>
      <MAnn items={[
        ['mobile drawer', 'bottom sheet · borderRadius 8px top · max-height 80vh'],
        ['handle', '36×4px · T.n300 · borderRadius 2px'],
        ['transition', 'translateY(100%→0) · spring 480ms'],
        ['backdrop', 'rgba(10,10,10,.4) · base 200ms'],
        ['safe-area', 'padding-bottom + env(safe-area-inset-bottom)'],
        ['checkout h', '52px · full-width'],
      ]}/>
    </PhoneFrame>
  );
};

/* ── 06 · LOOKBOOK ─────────────────────────────── */
const ScreenLookbook = () => (
  <PhoneFrame screen="06" label="Lookbook · stacked tiles" note="Mobile: 2-col grid · ink a neon tiles zachovány · žádný parallax (CSS fallback)">
    <StatusBar/>
    <div className="mono" style={{ background:T.ink, color:T.bone, height:32, display:'flex', alignItems:'center', justifyContent:'center', fontSize:9, letterSpacing:'.2em' }}>FREE EU SHIPPING OVER €300</div>
    <MobileNav/>
    <div style={{ padding:`${S[4]}px ${MG}px ${S[3]}px` }}>
      <h2 style={{ fontWeight:900, fontSize:22, letterSpacing:'-0.03em', margin:0 }}>Lookbook</h2>
    </div>
    {/* 2-col mosaic — simplified for mobile */}
    <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:0, padding:`0 ${MG}px`, gap:S[1] }}>
      <div style={{ gridColumn:'span 2', aspectRatio:'16/9', background:`linear-gradient(135deg, ${T.chrome}, ${T.n400})`, position:'relative', display:'flex', alignItems:'flex-end', padding:S[3] }}>
        <span className="mono" style={{ fontSize:10, letterSpacing:'.14em', textTransform:'uppercase' }}>01 · LOOP BAG</span>
        <span style={{ position:'absolute', right:S[3], bottom:S[3], fontWeight:900, fontSize:24 }}>→</span>
      </div>
      <div style={{ aspectRatio:'1', background:T.ink, display:'flex', flexDirection:'column', justifyContent:'space-between', padding:S[3] }}>
        <span className="mono" style={{ fontSize:10, letterSpacing:'.14em', textTransform:'uppercase', color:T.bone }}>02 · CAST</span>
        <span style={{ fontWeight:900, fontSize:24, color:T.bone }}>→</span>
      </div>
      <div style={{ aspectRatio:'1', background:`linear-gradient(160deg, #e8e6e0, #6a6864)`, display:'flex', flexDirection:'column', justifyContent:'space-between', padding:S[3] }}>
        <span className="mono" style={{ fontSize:10, letterSpacing:'.14em', textTransform:'uppercase' }}>03 · BELT</span>
        <span style={{ fontWeight:900, fontSize:24 }}>→</span>
      </div>
      <div style={{ gridColumn:'span 2', aspectRatio:'16/7', background:T.neon, display:'flex', alignItems:'center', justifyContent:'center' }}>
        <span className="mono" style={{ fontSize:10, letterSpacing:'.2em', textTransform:'uppercase', color:T.ink }}>04 · NEW DROP</span>
      </div>
      <div style={{ aspectRatio:'1', background:`linear-gradient(135deg, #2a2a2a, ${T.ink})`, display:'flex', flexDirection:'column', justifyContent:'space-between', padding:S[3] }}>
        <span className="mono" style={{ fontSize:10, letterSpacing:'.14em', textTransform:'uppercase', color:T.bone }}>05 · FRINGE</span>
        <span style={{ fontWeight:900, fontSize:24, color:T.bone }}>→</span>
      </div>
      <div style={{ aspectRatio:'1', background:T.bone2, display:'flex', flexDirection:'column', justifyContent:'space-between', padding:S[3] }}>
        <span className="mono" style={{ fontSize:10, letterSpacing:'.14em', textTransform:'uppercase' }}>06 · ARCHIVE</span>
        <span style={{ fontWeight:900, fontSize:24 }}>→</span>
      </div>
    </div>
    <MAnn items={[
      ['mobile grid', '2-col · hero tile span 2'],
      ['gap', 'S[1] = 4px'], ['gutter', MG + 'px'],
      ['parallax', 'CSS fallback (static) · žádný JS scroll'],
      ['tile min-h', 'aspect-ratio driven'],
    ]}/>
  </PhoneFrame>
);

/* ── 07 · FOOTER ───────────────────────────────── */
const ScreenFooter = () => (
  <PhoneFrame screen="07" label="Footer · stacked 1-col" note="Desktop 4-col → mobile 1-col accordion nebo flat list">
    <div style={{ background:T.ink, color:T.bone, padding:`${S[6]}px ${MG}px` }}>
      <Wordmark size={40} color={T.bone}/>
      <p style={{ marginTop:S[4], fontSize:14, lineHeight:1.6, color:T.n300, margin:`${S[4]}px 0` }}>
        Hand-fed metalwork from a one-room studio in Florence. Editions of 200, numbered.
      </p>
      {/* Accordion-style columns */}
      {[
        ['SHOP', ['All', 'Bags', 'Charms', 'Archive']],
        ['STUDIO', ['Story', 'Process', 'Press', 'Stockists']],
        ['HELP', ['Shipping', 'Returns', 'Care', 'Contact']],
      ].map(([title, items]) => (
        <div key={title} style={{ borderTop:`1px solid ${T.n500}` }}>
          <div className="mono" style={{ padding:`${S[3]}px 0`, fontSize:11, letterSpacing:'.2em', textTransform:'uppercase', color:T.neon, display:'flex', justifyContent:'space-between' }}>
            {title} <span style={{color:T.n400}}>+</span>
          </div>
        </div>
      ))}
      <div className="mono" style={{ marginTop:S[6], paddingTop:S[4], borderTop:`1px solid ${T.n500}`, fontSize:10, letterSpacing:'.14em', textTransform:'uppercase', color:T.n400, display:'flex', justifyContent:'space-between' }}>
        <span>© GLOSÉ · MADE IN IT</span><span>EN · EUR</span>
      </div>
    </div>
    <MAnn items={[
      ['layout', '1-col stacked'], ['gutter', MG + 'px'],
      ['wordmark', '40px'], ['col nav', 'accordion (+/−) · base 200ms'],
      ['col heading', 'T.neon · mono 11px uppercase'],
      ['divider', 'T.n500 · 1px'],
    ]}/>
  </PhoneFrame>
);

/* ── 08 · SEARCH OVERLAY ───────────────────────── */
const ScreenSearch = () => {
  const [q, setQ] = React.useState('');
  return (
    <PhoneFrame screen="08" label="Search overlay · full-screen" note="Full-screen overlay · autofocus input · results renderují pod inputem">
      <div style={{ background:T.bone, minHeight:500, display:'flex', flexDirection:'column' }}>
        <StatusBar/>
        <div style={{ padding:`${S[3]}px ${MG}px`, borderBottom:`1px solid ${T.ink}`, display:'flex', gap:S[3], alignItems:'center' }}>
          <input
            autoFocus
            value={q}
            onChange={e => setQ(e.target.value)}
            placeholder="Search products…"
            style={{
              flex:1, height:44, padding:`0 ${S[3]}px`,
              border:`1px solid ${T.ink}`, borderBottomWidth:2,
              background:T.paper, fontSize:15, outline:'none',
            }}
          />
          <button style={{ background:'none', border:'none', cursor:'pointer', fontSize:14, fontWeight:700, letterSpacing:'.02em', whiteSpace:'nowrap' }}>Cancel</button>
        </div>
        {q === '' ? (
          <div style={{ padding:`${S[5]}px ${MG}px` }}>
            <div className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', color:T.n400, marginBottom:S[3] }}>Recent searches</div>
            {['Loop Bag', 'Chrome', 'Fringe Charm'].map(s => (
              <div key={s} onClick={() => setQ(s)} style={{ padding:`${S[3]}px 0`, borderBottom:`1px solid ${T.n200}`, display:'flex', justifyContent:'space-between', cursor:'pointer' }}>
                <span style={{ fontSize:15 }}>{s}</span>
                <span style={{ color:T.n400 }}>↗</span>
              </div>
            ))}
          </div>
        ) : (
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:S[2], padding:S[2] }}>
            <ProductCard name="Loop Bag" color="Chrome" price="€620,00" tag={{label:'NEW', variant:'neon'}}/>
            <ProductCard name="Fringe Charm" color="Lavender" price="€85,00"/>
          </div>
        )}
      </div>
      <MAnn items={[
        ['input h', '44px · border-bottom 2px focus'],
        ['overlay', 'full-screen · z-index modal 40'],
        ['results', '2-col ProductCard grid · gap S[2] = 8px'],
        ['recent', 'mono 10px uppercase · border-bottom T.n200'],
      ]}/>
    </PhoneFrame>
  );
};

Object.assign(window, {
  ScreenHeader, ScreenHero, ScreenCollection, ScreenPDP,
  ScreenCart, ScreenLookbook, ScreenFooter, ScreenSearch,
});