// SHOP PAGE — mobile ready
function ShopPage({ lang, addToCart, showToast }) {
  const [activeCategory, setActiveCategory] = React.useState('all');
  const [search, setSearch] = React.useState('');
  const [sort, setSort] = React.useState('default');

  const products = Store.getProducts();
  const categories = Store.getCategories();

  const t = lang === 'pt' ? {
    title: 'A Nossa Loja', sub: 'Todos os nossos produtos artesanais',
    all: 'Todos', search: 'Pesquisar produtos...', sortDef: 'Ordem padrão',
    sortAsc: 'Preço: baixo → alto', sortDesc: 'Preço: alto → baixo',
    noResults: 'Nenhum produto encontrado.'
  } : {
    title: 'Our Shop', sub: 'All our handcrafted products',
    all: 'All', search: 'Search products...', sortDef: 'Default order',
    sortAsc: 'Price: low → high', sortDesc: 'Price: high → low',
    noResults: 'No products found.'
  };

  let filtered = products
    .filter(p => activeCategory === 'all' || p.category === activeCategory)
    .filter(p => p.name.toLowerCase().includes(search.toLowerCase()) || p.description.toLowerCase().includes(search.toLowerCase()));

  if (sort === 'asc') filtered = [...filtered].sort((a, b) => a.price - b.price);
  if (sort === 'desc') filtered = [...filtered].sort((a, b) => b.price - a.price);

  return (
    <div style={{ minHeight: '100vh', background: 'var(--bg)', paddingTop: 70 }}>
      {/* Banner */}
      <div style={{ background: 'linear-gradient(to bottom, var(--bg3), var(--bg))', padding: 'clamp(32px,6vw,56px) clamp(16px,4vw,40px) 36px', textAlign: 'center', borderBottom: '1px solid var(--border)' }}>
        <SectionTitle subtitle={t.sub}>{t.title}</SectionTitle>
        <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap', maxWidth: 700, margin: '0 auto' }}>
          <input value={search} onChange={e => setSearch(e.target.value)} placeholder={t.search}
            style={{ ...inputStyle, maxWidth: 320, flex: '1 1 200px', minWidth: 0 }} />
          <select value={sort} onChange={e => setSort(e.target.value)}
            style={{ ...inputStyle, maxWidth: 200, flex: '0 0 auto', cursor: 'pointer' }}>
            <option value="default">{t.sortDef}</option>
            <option value="asc">{t.sortAsc}</option>
            <option value="desc">{t.sortDesc}</option>
          </select>
        </div>
      </div>

      <div style={{ maxWidth: 1300, margin: '0 auto', padding: 'clamp(20px,4vw,40px)', display: 'flex', gap: 28, flexWrap: 'wrap' }}>
        {/* Sidebar / category strip */}
        <aside className="shop-sidebar" style={{ width: 190, flexShrink: 0 }}>
          <div style={{ fontFamily: 'Lato, sans-serif', color: 'var(--gold)', fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', marginBottom: 12, width: '100%' }}>
            {lang === 'pt' ? 'Categorias' : 'Categories'}
          </div>
          {[{ id: 'all', label: t.all }, ...categories].map(cat => (
            <button key={cat.id} onClick={() => setActiveCategory(cat.id)}
              style={{
                display: 'block', width: '100%', textAlign: 'left',
                background: activeCategory === cat.id ? 'rgba(212,153,58,0.18)' : 'transparent',
                border: activeCategory === cat.id ? '1px solid rgba(212,153,58,0.5)' : '1px solid transparent',
                borderRadius: 6, color: activeCategory === cat.id ? 'var(--gold)' : 'var(--muted)',
                fontFamily: 'Lato, sans-serif', fontSize: 13, padding: '10px 14px',
                cursor: 'pointer', marginBottom: 5, transition: 'all 0.2s'
              }}>
              {cat.label}
              <span style={{ float: 'right', fontSize: 11, opacity: 0.55 }}>
                {cat.id === 'all' ? products.length : products.filter(p => p.category === cat.id).length}
              </span>
            </button>
          ))}
        </aside>

        {/* Product grid */}
        <div style={{ flex: 1, minWidth: 0 }}>
          {filtered.length === 0 ? (
            <div style={{ textAlign: 'center', padding: '80px 0', color: 'var(--dim)', fontFamily: 'Lato, sans-serif' }}>{t.noResults}</div>
          ) : (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 20 }}>
              {filtered.map(p => (
                <ProductCard key={p.id} product={p} lang={lang} showToast={showToast} addToCart={addToCart} />
              ))}
            </div>
          )}
        </div>
      </div>
      <Footer lang={lang} setPage={() => {}} />
    </div>
  );
}

Object.assign(window, { ShopPage });