function ShopPage() {
  const route = useHashRoute();
  const [fast] = (typeof useFastMode === 'function') ? useFastMode() : [false];
  // Read line filter from hash query (#/shop?line=myo)
  const queryStr = (route.path.split('?')[1] || '');
  const params = new URLSearchParams(queryStr);
  const lineFilter = params.get('line'); // 'myo' | 'energy' | null
  const filtered = SITE_PRODUCTS.filter(p => {
    if (!lineFilter) return true;
    if (lineFilter === 'myo') return p.line === 'Myo-Peptide™';
    if (lineFilter === 'energy') return p.line === 'Energy';
    return true;
  });

  const filters = [
    { id: null, label: 'All' },
    { id: 'myo', label: 'Myo-Peptide™' },
    { id: 'energy', label: 'Energy' },
  ];

  // Fast Mode: split by line, two clearly labelled rows
  const myoProducts = SITE_PRODUCTS.filter(p => p.line === 'Myo-Peptide™');
  const energyProducts = SITE_PRODUCTS.filter(p => p.line !== 'Myo-Peptide™');

  return (
    <>
      {/* Header */}
      <section style={{
        background: 'var(--bm-ink)', color: 'var(--bm-paper)',
        padding: '96px 80px 56px', position: 'relative', overflow: 'hidden',
        borderBottom: '3px solid var(--bm-ink)',
      }}>
        <div aria-hidden="true" style={{
          position: 'absolute', inset: 0,
          background: "url('assets/facets-navy.png') center / cover no-repeat",
          opacity: 0.65,
          pointerEvents: 'none',
        }} />
        <div style={{ position: 'relative', zIndex: 1 }}>
          <Eyebrow color="var(--bm-pink)">Pre-launch · {filtered.length} of {SITE_PRODUCTS.length} flavors</Eyebrow>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 112, lineHeight: 0.9, letterSpacing: '-0.03em',
            textTransform: 'uppercase', marginTop: 16, color: 'var(--bm-paper)',
          }}>The lineup.</h1>
          <p style={{ marginTop: 16, fontSize: 18, lineHeight: 1.5, color: 'rgba(244,239,228,0.78)', maxWidth: 640 }}>
            Six SKUs. Two lines. One mission. Tap any can to see the formula — and join the Founders List for first access.
          </p>

          <div style={{ display: 'flex', gap: 8, marginTop: 32, flexWrap: 'wrap' }}>
            {filters.map(f => {
              const active = (f.id || null) === (lineFilter || null);
              return (
                <a key={f.label} href={`#/shop${f.id ? `?line=${f.id}` : ''}`} style={{
                  display: 'inline-flex', alignItems: 'center',
                  padding: '10px 20px', borderRadius: 999,
                  fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 12,
                  letterSpacing: '0.16em', textTransform: 'uppercase',
                  background: active ? 'var(--bm-pink)' : 'transparent',
                  color: active ? '#fff' : 'var(--bm-paper)',
                  border: active ? '1.5px solid var(--bm-pink)' : '1.5px solid rgba(244,239,228,0.45)',
                  textDecoration: 'none',
                }}>{f.label}</a>
              );
            })}
          </div>
        </div>
      </section>

      {/* Grid */}
      <section style={{ background: 'var(--bm-paper)', padding: '40px 80px 120px' }}>
        {fast ? (
          <>
            {/* Myo-Peptide row */}
            <div style={{ marginBottom: 40 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 16, gap: 16, flexWrap: 'wrap' }}>
                <div>
                  <Eyebrow color="var(--bm-pink-deep)">Recovery · 20g protein + 2.4g PeptiStrong®</Eyebrow>
                  <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 56, lineHeight: 0.95, textTransform: 'uppercase', marginTop: 8, color: 'var(--bm-pink)', letterSpacing: '-0.02em' }}>Myo-Peptide™</h2>
                </div>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>{myoProducts.length} flavors</span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: `repeat(${myoProducts.length}, 1fr)`, gap: 16 }}>
                {myoProducts.map(p => <ProductCard key={p.id} p={p} compact />)}
              </div>
            </div>
            {/* Energy row */}
            <div>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 16, gap: 16, flexWrap: 'wrap' }}>
                <div>
                  <Eyebrow color="var(--bm-blue-deep)">Energy · 500mg Cognizin® + 200mg CognatiQ®</Eyebrow>
                  <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 56, lineHeight: 0.95, textTransform: 'uppercase', marginTop: 8, color: 'var(--bm-blue-deep)', letterSpacing: '-0.02em' }}>Boss Mode Energy</h2>
                </div>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>{energyProducts.length} flavors</span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: `repeat(${energyProducts.length}, 1fr)`, gap: 16 }}>
                {energyProducts.map(p => <ProductCard key={p.id} p={p} compact />)}
              </div>
            </div>
          </>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {filtered.map(p => <ProductCard key={p.id} p={p} />)}
          </div>
        )}
      </section>
    </>
  );
}

function ProductCard({ p, compact }) {
  return (
    <Link to={`/product/${p.id}`} className="bm-product-card" style={{
      background: p.bg, borderRadius: 12, padding: compact ? 20 : 32,
      cursor: 'pointer', position: 'relative', overflow: 'hidden',
      minHeight: compact ? 360 : 460, display: 'flex', flexDirection: 'column',
      border: `2px solid ${p.dark ? p.bg : 'var(--bm-ink)'}`,
      boxShadow: `8px 8px 0 0 ${p.dark ? 'var(--bm-pink)' : 'var(--bm-ink)'}`,
      textDecoration: 'none',
      transition: 'transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <Capsule tone={p.dark ? 'blue' : 'pink'} style={{ fontSize: 10 }}>
          {p.line}
        </Capsule>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: p.accent, letterSpacing: '0.08em', whiteSpace: 'nowrap' }}>12 FL OZ</span>
      </div>
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px 0' }}>
        <img src={p.img} style={{ maxHeight: compact ? 220 : 320, maxWidth: '85%', width: 'auto', height: 'auto', objectFit: 'contain', filter: 'drop-shadow(6px 8px 0 rgba(10,10,10,0.18))' }} />
      </div>
      <div>
        <div style={{
          fontFamily: 'var(--font-display)', fontWeight: 800,
          fontSize: compact ? 22 : 28, lineHeight: 1, textTransform: 'uppercase',
          color: p.accent, letterSpacing: '-0.01em',
        }}>{p.flavor}</div>
        <div style={{ fontSize: 13, marginTop: 6, color: p.dark ? 'rgba(255,255,255,0.7)' : 'var(--fg-2)' }}>
          {p.tagline}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 16 }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: p.accent, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Coming soon</span>
          <span style={{ fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: p.accent }}>Learn more →</span>
        </div>
      </div>
    </Link>
  );
}

window.ShopPage = ShopPage;