/* ============================================================
   SHOP PAGE — fabric browse, category filters, search
   ============================================================ */
function ShopPage({ params }) {
  const { nav } = useStore();
  const [cat, setCat] = useState(params.cat || 'all');
  const [q, setQ] = useState(params.q || '');

  useEffect(() => { setCat(params.cat || 'all'); if (params.q !== undefined) setQ(params.q); }, [params.cat, params.q]);

  const activeCat = BB.navCategories.find(c => c.id === cat);
  let list = BB.products.filter(p => cat === 'all' || p.cat === cat);
  if (q.trim()) {
    const hay = (p) => (p.name + ' ' + p.short + ' ' + (BB.catOf(p)?.name || '') + ' ' + Object.values(p.specs || {}).join(' ')).toLowerCase();
    list = list.filter(p => hay(p).includes(q.toLowerCase()));
  }

  const counts = { all: BB.products.length };
  BB.navCategories.forEach(c => counts[c.id] = BB.products.filter(p => p.cat === c.id).length);

  return (
    <>
      <section style={{ background: 'linear-gradient(160deg, var(--cream-deep), var(--accent-soft))', padding: 'clamp(44px,6vw,80px) var(--gutter) clamp(36px,5vw,56px)', borderBottom: '1px solid var(--line)' }}>
        <div className="container wide">
          <h1 style={{ fontSize: 'clamp(40px,6vw,76px)' }}>{activeCat ? activeCat.name : <>All <em style={{ color: 'var(--accent-deep)' }}>fabrics</em></>}</h1>
        </div>
      </section>

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

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap', paddingBottom: 22, borderBottom: '1px solid var(--line)', marginBottom: 36 }}>
          <div className="search-pill" style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--ivory)', border: '1.5px solid var(--line)', borderRadius: 100, padding: '9px 8px 9px 16px', flex: '1 1 240px', maxWidth: 340 }}>
            <I.search width={18} height={18} style={{ color: 'var(--ink-soft)', flexShrink: 0 }} />
            <input value={q} onChange={e => setQ(e.target.value)} placeholder={activeCat ? `Search ${activeCat.short.toLowerCase()}…` : 'Search fabrics…'} style={{ border: 'none', background: 'transparent', outline: 'none', flex: 1, fontSize: 14, minWidth: 0 }} />
            {q && <button className="qbtn" onClick={() => setQ('')} aria-label="Clear search" style={{ color: 'var(--ink-faint)' }}><I.close width={15} height={15} /></button>}
          </div>
          <span className="muted" style={{ fontSize: 13.5 }}>{list.length} fabric{list.length !== 1 ? 's' : ''}</span>
        </div>

        {list.length === 0 ? (
          <div style={{ textAlign: 'center', padding: '80px 0' }}>
            <p style={{ fontFamily: 'var(--serif)', fontWeight: 600, fontSize: 28 }}>Nothing matched</p>
            <p className="muted" style={{ marginTop: 8 }}>Try another category, or message us describing what you’re after.</p>
            <button className="btn btn-outline btn-sm" style={{ marginTop: 20 }} onClick={() => { setQ(''); setCat('all'); nav('shop', {}); }}>Reset filters</button>
          </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 });