/* ============================================================
   SHOP PAGE — filters, sort, grid
   ============================================================ */
function ShopPage({ params }) {
  const { nav } = useStore();
  const [cat, setCat] = useState(params.cat || 'all');
  const [sort, setSort] = useState('featured');
  const [q, setQ] = useState('');

  useEffect(() => { setCat(params.cat || 'all'); }, [params.cat]);

  let list = BB.products.filter(p => cat === 'all' || p.cat === cat);
  if (q.trim()) list = list.filter(p => (p.name + ' ' + p.short).toLowerCase().includes(q.toLowerCase()));
  list = [...list];
  if (sort === 'price-asc') list.sort((a, b) => a.price - b.price);
  if (sort === 'price-desc') list.sort((a, b) => b.price - a.price);
  if (sort === 'new') list.sort((a, b) => (b.tags.includes('new') ? 1 : 0) - (a.tags.includes('new') ? 1 : 0));
  if (sort === 'popular') list.sort((a, b) => (b.tags.includes('best') ? 1 : 0) - (a.tags.includes('best') ? 1 : 0));

  const activeCat = BB.categories.find(c => c.id === cat);

  return (
    <>
      {/* hero band */}
      <section style={{ background: 'linear-gradient(160deg, var(--cream-deep), var(--blush-soft))', padding: 'clamp(44px,6vw,80px) var(--gutter) clamp(36px,5vw,56px)' }}>
        <div className="container wide">
          <p className="eyebrow" style={{ marginBottom: 14 }}><button onClick={() => nav('home')} className="link-u">Home</button> &nbsp;/&nbsp; Shop {activeCat ? '/ ' + activeCat.name : ''}</p>
          <h1 style={{ fontSize: 'clamp(40px,6vw,76px)' }}>{activeCat ? activeCat.name : <>The <em style={{ fontStyle: 'italic' }}>Categories</em></>}</h1>
          <p className="muted" style={{ fontSize: 16.5, maxWidth: 540, marginTop: 14 }}>{activeCat ? activeCat.blurb : 'Browse every hand-crafted piece in the atelier — from edible treats to full party bundles.'}</p>
        </div>
      </section>

      <div className="container wide" style={{ padding: 'clamp(28px,4vw,48px) var(--gutter) clamp(64px,9vw,110px)' }}>
        {/* category chips */}
        <div style={{ display: 'flex', gap: 9, flexWrap: 'wrap', marginBottom: 22 }}>
          <button className={`chip ${cat === 'all' ? 'active' : ''}`} onClick={() => { setCat('all'); nav('shop', {}); }}>All</button>
          {BB.categories.map(c => (
            <button key={c.id} className={`chip ${cat === c.id ? 'active' : ''}`} onClick={() => { setCat(c.id); nav('shop', { cat: c.id }); }}>{c.name}</button>
          ))}
        </div>

        {/* toolbar */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap', paddingBottom: 22, borderBottom: '1px solid var(--line)', marginBottom: 36 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--ivory)', border: '1.5px solid var(--line)', borderRadius: 100, padding: '9px 16px', flex: '1 1 240px', maxWidth: 320 }}>
            <I.search width={18} height={18} style={{ color: 'var(--ink-soft)' }} />
            <input value={q} onChange={e => setQ(e.target.value)} placeholder="Search this collection…" style={{ border: 'none', background: 'transparent', outline: 'none', flex: 1, fontSize: 14 }} />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span className="muted" style={{ fontSize: 13.5 }}>{list.length} item{list.length !== 1 ? 's' : ''}</span>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <label className="eyebrow" style={{ fontSize: 11 }}>Sort</label>
              <select value={sort} onChange={e => setSort(e.target.value)} className="input" style={{ padding: '10px 14px', borderRadius: 100, width: 'auto', fontSize: 13.5, cursor: 'pointer' }}>
                <option value="featured">Featured</option>
                <option value="popular">Most popular</option>
                <option value="new">Newest</option>
                <option value="price-asc">Price: low to high</option>
                <option value="price-desc">Price: high to low</option>
              </select>
            </div>
          </div>
        </div>

        {/* grid */}
        {list.length === 0 ? (
          <div style={{ textAlign: 'center', padding: '80px 0' }}>
            <p style={{ fontFamily: 'var(--serif)', fontSize: 28 }}>Nothing here yet</p>
            <p className="muted" style={{ marginTop: 8 }}>Try another category or clear your search.</p>
          </div>
        ) : (
          <div className="prod-grid">
            {list.map((p, i) => <ProductCard key={p.id} p={p} delay={(i % 4) + 1} />)}
          </div>
        )}
      </div>
    </>
  );
}

Object.assign(window, { ShopPage });