// Listing page (Drop 01) with filter/sort

const ShopPage = ({ accent, cardLayout, setRoute }) => {
  const accentColor = accent === 'red' ? 'var(--uwr-red)' : 'var(--uwr-cyan)';
  const [sort, setSort] = React.useState('default');
  const [fitFilter, setFitFilter] = React.useState('all');
  const [view, setView] = React.useState('grid'); // grid | list

  let products = PRODUCTS.filter((p) => fitFilter === 'all' ? true : p.fit === fitFilter);
  if (sort === 'price-asc') products = [...products].sort((a, b) => a.price - b.price);
  if (sort === 'price-desc') products = [...products].sort((a, b) => b.price - a.price);
  if (sort === 'name') products = [...products].sort((a, b) => a.name.localeCompare(b.name));

  const fits = ['all', ...new Set(PRODUCTS.map((p) => p.fit))];

  return (
    <>
      {/* Header band */}
      <div style={{ padding: '60px 32px 40px', borderBottom: '1px solid var(--uwr-line)' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 8 }}>
          <MonoTag color={accentColor}>// COLLECTION</MonoTag>
          <MonoTag color="var(--uwr-off-dim)">06 PIECES · IN STOCK</MonoTag>
        </div>
        <h1 className="uwr-head" style={{
          fontSize: 'clamp(56px, 10vw, 144px)',
          margin: 0, lineHeight: 0.92,
        }}>
          DROP 01<br />
          <span style={{ color: accentColor }}>BELOW ZERO</span>
        </h1>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginTop: 28, gap: 24, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 480, fontSize: 14, color: 'var(--uwr-off-dim)', lineHeight: 1.6 }}>
            The first cut. Six heavy cotton pieces designed for athletes who train where the surface ends. Worn on the deck, off the deck, in the dark.
          </div>
          <div className="uwr-mono" style={{ color: 'var(--uwr-off-dim)' }}>SHIPS FROM 12.04.2026</div>
        </div>
      </div>

      {/* Filter bar */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '20px 32px', borderBottom: '1px solid var(--uwr-line)',
        flexWrap: 'wrap', gap: 16,
        position: 'sticky', top: 60, background: 'rgba(5,8,10,0.92)', backdropFilter: 'blur(8px)', zIndex: 10,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
          <span className="uwr-mono" style={{ color: 'var(--uwr-off-dim)' }}>FIT</span>
          <div style={{ display: 'flex', gap: 4 }}>
            {fits.map((f) => (
              <button key={f} onClick={() => setFitFilter(f)} className="uwr-mono" style={{
                background: fitFilter === f ? 'var(--uwr-off)' : 'transparent',
                color: fitFilter === f ? 'var(--uwr-black)' : 'var(--uwr-off-dim)',
                border: '1px solid var(--uwr-line)',
                padding: '6px 12px', cursor: 'pointer',
              }}>
                {f === 'all' ? 'ALL' : f.toUpperCase()}
              </button>
            ))}
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
          <span className="uwr-mono" style={{ color: 'var(--uwr-off-dim)' }}>SORT</span>
          <select value={sort} onChange={(e) => setSort(e.target.value)} className="uwr-mono" style={{
            background: 'transparent', color: 'var(--uwr-off)', border: '1px solid var(--uwr-line)',
            padding: '6px 12px', cursor: 'pointer',
          }}>
            <option value="default" style={{ background: 'var(--uwr-black)' }}>DEFAULT</option>
            <option value="price-asc" style={{ background: 'var(--uwr-black)' }}>PRICE: LOW</option>
            <option value="price-desc" style={{ background: 'var(--uwr-black)' }}>PRICE: HIGH</option>
            <option value="name" style={{ background: 'var(--uwr-black)' }}>NAME</option>
          </select>
          <div style={{ display: 'flex', gap: 4 }}>
            <button onClick={() => setView('grid')} style={{
              background: view === 'grid' ? 'var(--uwr-off)' : 'transparent',
              color: view === 'grid' ? 'var(--uwr-black)' : 'var(--uwr-off-dim)',
              border: '1px solid var(--uwr-line)', padding: 6, width: 30, height: 30,
            }}>
              <svg width="14" height="14" viewBox="0 0 14 14"><rect x="1" y="1" width="5" height="5" fill="currentColor"/><rect x="8" y="1" width="5" height="5" fill="currentColor"/><rect x="1" y="8" width="5" height="5" fill="currentColor"/><rect x="8" y="8" width="5" height="5" fill="currentColor"/></svg>
            </button>
            <button onClick={() => setView('list')} style={{
              background: view === 'list' ? 'var(--uwr-off)' : 'transparent',
              color: view === 'list' ? 'var(--uwr-black)' : 'var(--uwr-off-dim)',
              border: '1px solid var(--uwr-line)', padding: 6, width: 30, height: 30,
            }}>
              <svg width="14" height="14" viewBox="0 0 14 14"><rect x="1" y="2" width="12" height="2" fill="currentColor"/><rect x="1" y="6" width="12" height="2" fill="currentColor"/><rect x="1" y="10" width="12" height="2" fill="currentColor"/></svg>
            </button>
          </div>
        </div>
      </div>

      {/* grid */}
      <div style={{ padding: '40px 32px 100px' }}>
        {view === 'grid' ? (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 28 }}>
            {products.map((p) => (
              <ProductCard key={p.id} product={p} layout={cardLayout} accent={accent}
                onClick={() => setRoute({ name: 'pdp', id: p.id })} />
            ))}
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {products.map((p, i) => (
              <div key={p.id} onClick={() => setRoute({ name: 'pdp', id: p.id })}
                style={{
                  display: 'grid', gridTemplateColumns: '120px 1fr auto auto auto',
                  gap: 32, padding: '20px 0', alignItems: 'center', cursor: 'pointer',
                  borderTop: i === 0 ? '1px solid var(--uwr-line-strong)' : '1px solid var(--uwr-line)',
                  borderBottom: i === products.length - 1 ? '1px solid var(--uwr-line-strong)' : 'none',
                }}>
                <ProductPlaceholder name={p.code} color={p.color} style={{ width: 120, height: 144 }} />
                <div>
                  <MonoTag color={accentColor}>{p.code}</MonoTag>
                  <div className="uwr-head" style={{ fontSize: 22, marginTop: 6 }}>{p.name.toUpperCase()}</div>
                  <div className="uwr-mono" style={{ color: 'var(--uwr-off-dim)', marginTop: 4 }}>{p.fit.toUpperCase()} · {p.weight} · {p.fabric.toUpperCase()}</div>
                </div>
                <div className="uwr-mono" style={{ color: 'var(--uwr-off-dim)' }}>{p.colors.length} COLORS</div>
                <div className="uwr-head" style={{ fontSize: 18 }}>${p.price}</div>
                <Arrow size={20} style={{ color: 'var(--uwr-off-dim)' }} />
              </div>
            ))}
          </div>
        )}
      </div>

      <Footer accent={accent} />
    </>
  );
};

Object.assign(window, { ShopPage });