// Shop / Collection page

function PageShop({ setPage, addToCart }) {
  const vp = useViewport();
  const [filter, setFilter] = React.useState('all');
  const [sort, setSort]     = React.useState('numbered');

  const tags = [
    ['all', 'All Formulas', SKUS.length],
    ['morning', 'Morning',  2],
    ['training','Training', 2],
    ['evening', 'Evening',  2],
    ['rescue',  'Rescue',   1],
  ];

  const TAG_MAP = {
    morning:  ['focus','hydrate'],
    training: ['hydrate','recover'],
    evening:  ['sleep','recover'],
    rescue:   ['revive'],
  };

  const visible = filter === 'all' ? SKUS : SKUS.filter((s) => TAG_MAP[filter].includes(s.id));

  return (
    <div style={{background: site.paper, color: site.ink}}>

      {/* hero band */}
      <section style={{borderBottom:`.5px solid ${site.rule}`, position:'relative', overflow:'hidden'}}>
        <div style={{position:'absolute', inset:0, opacity:.05,
          backgroundImage:`repeating-linear-gradient(0deg, ${site.ink} 0 .5px, transparent .5px 28px),
                           repeating-linear-gradient(90deg, ${site.ink} 0 .5px, transparent .5px 28px)`}}></div>
        <div style={{maxWidth:1400, margin:'0 auto', padding: vp.isMobile ? '40px 18px 28px' : '72px 32px 56px', position:'relative'}}>
          <div style={{fontFamily: site.mono, fontSize:11, letterSpacing:'.32em', opacity:.6}}>SHOP THE APOTHECARY  ·  005 FORMULAS</div>
          <h1 style={{fontFamily: site.serif, fontStyle:'italic', fontWeight:500, fontSize: vp.isMobile ? 56 : 96, lineHeight:.92, letterSpacing:'-.025em', margin:'14px 0 0'}}>The full shelf.</h1>
          <div style={{fontFamily: site.han, fontSize: vp.isMobile ? 14 : 18, letterSpacing:'.14em', marginTop:16, opacity:.78}}>전체 진열대 — 다섯 가지 기능성 젤리</div>
        </div>
      </section>

      {/* filter bar */}
      <div style={{position:'sticky', top: vp.isMobile ? 76 : 107, zIndex:20, background: site.paper, borderBottom:`.5px solid ${site.rule}`, WebkitOverflowScrolling:'touch'}}>
        <div style={{maxWidth:1400, margin:'0 auto', padding: vp.isMobile ? '14px 18px' : '18px 32px', display:'flex', justifyContent:'space-between', alignItems:'center', gap:16, flexWrap:'wrap', overflowX:'auto'}}>
          <div style={{display:'flex', gap:20, flexWrap:'wrap'}}>
            {tags.map(([k, label, n]) => (
              <span key={k} onClick={() => setFilter(k)} style={{
                cursor:'pointer', display:'flex', alignItems:'baseline', gap:8,
                fontFamily: site.mono, fontSize:11, letterSpacing:'.26em',
                color: site.ink, opacity: filter === k ? 1 : .55,
                borderBottom: filter === k ? `1px solid ${site.ink}` : '1px solid transparent',
                paddingBottom:4, textTransform:'uppercase',
              }}>
                <span>{label}</span>
                <span style={{fontFamily: site.serif, fontStyle:'italic', fontSize:13, opacity:.7}}>({n})</span>
              </span>
            ))}
          </div>
          <div style={{display:'flex', gap:14, alignItems:'center', fontFamily: site.mono, fontSize:10, letterSpacing:'.28em', opacity:.7}}>
            <span style={{opacity:.5}}>SORT</span>
            {['numbered','price-asc','price-desc'].map((s)=>(
              <span key={s} onClick={() => setSort(s)} style={{cursor:'pointer', borderBottom: sort === s ? `1px solid ${site.ink}` : '1px solid transparent', paddingBottom:3, opacity: sort === s ? 1 : .6}}>
                {s.replace('-asc',' ↑').replace('-desc',' ↓').toUpperCase()}
              </span>
            ))}
          </div>
        </div>
      </div>

      {/* grid */}
      <section style={{padding: vp.isMobile ? '32px 18px 56px' : '56px 32px 80px'}}>
        <div style={{maxWidth:1400, margin:'0 auto', display:'grid', gridTemplateColumns: vp.isMobile ? '1fr' : vp.isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)', gap: vp.isMobile ? 24 : 32}}>
          {visible.map((sku)=>(
            <PDPCard key={sku.id} skuId={sku.id} setPage={setPage} addToCart={addToCart} />
          ))}
        </div>
      </section>

      {/* CTA band */}
      <section style={{background: site.ink, color: site.paper, padding:'72px 32px'}}>
        <div style={{maxWidth:1400, margin:'0 auto', display:'flex', justifyContent:'space-between', alignItems:'center', gap:32}}>
          <div>
            <div style={{fontFamily: site.mono, fontSize:11, letterSpacing:'.32em', color: site.hanji, opacity:.85}}>NOT SURE WHERE TO START?</div>
            <h2 style={{fontFamily: site.serif, fontStyle:'italic', fontWeight:500, fontSize:60, lineHeight:1, letterSpacing:'-.02em', margin:'14px 0 0'}}>Build the stack that fits your day.</h2>
          </div>
          <SiteButton variant="outline" fg={site.paper} onClick={() => setPage({page:'stack'})}>Build a stack →</SiteButton>
        </div>
      </section>
    </div>
  );
}

// A richer shop card with quick-add
function PDPCard({ skuId, setPage, addToCart }) {
  const sku = SKU_BY_ID[skuId];
  const cw  = APS_SKU[skuId];
  const [hover, setHover] = React.useState(false);
  const drop = useDrop();
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{display:'flex', flexDirection:'column', gap:18}}>
      <div onClick={() => setPage({page:'pdp', skuId})} style={{
        position:'relative', aspectRatio:'4 / 5', background: cw.bg, overflow:'hidden', cursor:'pointer',
        border:`.5px solid ${site.rule}`,
      }}>
        <div style={{position:'absolute', inset:0, opacity:.06,
          backgroundImage:`repeating-linear-gradient(0deg, ${cw.fg} 0 .5px, transparent .5px 24px),
                           repeating-linear-gradient(90deg, ${cw.fg} 0 .5px, transparent .5px 24px)`}}></div>
        <div style={{position:'absolute', top:18, left:18, color: cw.fg, fontFamily: site.mono, fontSize:9, letterSpacing:'.32em', opacity:.78}}>NO. {sku.no}</div>
        <div style={{position:'absolute', top:18, right:18, color: cw.fg, fontFamily: site.mono, fontSize:9, letterSpacing:'.32em', opacity:.78}}>${PRICE[skuId]} / BOX</div>
        <div style={{position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center'}}>
          <div style={{width:130, height:420, boxShadow:'0 22px 36px rgba(31,22,16,.28), 0 4px 8px rgba(31,22,16,.16)', transform: hover ? 'translateY(-8px) rotate(-2deg)' : 'rotate(-3deg)', transition:'transform .35s ease'}}>
            <StickApoStamp skuId={skuId} />
          </div>
        </div>
        <button onClick={(e) => { e.stopPropagation(); drop.open(skuId); }} className="rg-btn" style={{
          position:'absolute', bottom: hover ? 18 : -50, left: 18, right: 18,
          padding:'14px 18px', background: cw.fg, color: cw.bg, border:'none',
          fontFamily: site.mono, fontSize:10, letterSpacing:'.32em', textTransform:'uppercase',
          cursor:'pointer', transition:'bottom .3s cubic-bezier(.2,.7,.3,1)',
          display:'inline-flex', alignItems:'center', justifyContent:'space-between', gap:10,
        }}>
          <span>Sign up for drop release</span>
          <AnimatedArrow />
        </button>
      </div>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
        <div>
          <div style={{fontFamily: site.mono, fontSize:10, letterSpacing:'.28em', opacity:.55}}>NO. {sku.no} · {sku.role.toUpperCase()}</div>
          <h3 style={{fontFamily: site.serif, fontStyle:'italic', fontWeight:500, fontSize:34, lineHeight:1, letterSpacing:'-.01em', margin:'8px 0 0'}}>{sku.enLong}.</h3>
          <div style={{fontFamily: site.han, fontSize:14, letterSpacing:'.22em', opacity:.75, marginTop:6}}>{sku.krFull}</div>
        </div>
        <div style={{fontFamily: site.serif, fontStyle:'italic', fontSize:30, letterSpacing:'-.01em'}}>${PRICE[skuId]}</div>
      </div>
      <div style={{fontFamily: site.serif, fontStyle:'italic', fontSize:16, lineHeight:1.4, opacity:.82, maxWidth:'88%'}}>
        “{sku.fn}.”
      </div>
    </div>
  );
}

Object.assign(window, { PageShop, PDPCard });