// pages-shop.jsx — Home, Categoria, Produto

// ─── HOME ────────────────────────────────────────────────────────
function HomePage({ navigate, tweaks }) {
  const featured = PRODUCTS.filter((p) => p.badge === 'mais-vendido' || p.badge === 'oferta').slice(0, 8);
  const categories = [
    { type: 'Álbum', label: 'Álbuns', desc: 'Capa cartão e capa dura' },
    { type: 'Envelopes', label: 'Envelopes', desc: 'Avulsos, packs e displays' },
    { type: 'Kit', label: 'Kits', desc: 'Álbum + envelopes' },
    { type: 'Box', label: 'Boxes', desc: 'A coleção em uma só caixa' },
    { type: 'Cards', label: 'Cards', desc: 'Linha colecionável de cards' },
    { type: 'Combo', label: 'Combos', desc: 'Pacotes para torcedor' },
  ];
  return (
    <main className="pg">
      {/* HERO */}
      <section className="hero">
        <div className="hero__bg" />
        <div className="hd__container hero__inner">
          <div className="hero__copy">
            <div className="hero__kicker">
              <span className="hero__dot" /> Coleção oficial · Edição 2026
            </div>
            <h1 className="hero__title">
              <span>A COPA</span>
              <span className="hero__title-accent">COMEÇA</span>
              <span>ANTES DO APITO INICIAL</span>
            </h1>
            <p className="hero__lead">
              {tweaks.headline ||
                'Garanta agora o álbum, envelopes e cards exclusivos da edição 2026 — direto na sua casa, lacrados, com nota fiscal.'}
            </p>
            <div className="hero__cta">
              <button className="btn btn--gold btn--lg" onClick={() => navigate('category')}>
                Comprar agora <Icon name="arrow-right" size={18} />
              </button>
              <button className="btn btn--ghost-light btn--lg" onClick={() => navigate('category', { type: 'Álbum' })}>
                Ver álbuns
              </button>
            </div>
            <div className="hero__strip">
              <div><strong>+12.400</strong><span>colecionadores</span></div>
              <div><strong>4,9★</strong><span>na avaliação</span></div>
              <div><strong>24h</strong><span>despacho</span></div>
            </div>
          </div>
          <div className="hero__art">
            <div className="hero__numbers" aria-hidden>
              <span>20</span><span>26</span>
            </div>
            <div className="hero__product">
              <ProductImage product={PRODUCTS[1]} />
            </div>
            <div className="hero__sticker hero__sticker--1">
              <ProductImage product={PRODUCTS[6]} />
            </div>
            <div className="hero__sticker hero__sticker--2">
              <ProductImage product={PRODUCTS[7]} />
            </div>
            <div className="hero__seal">
              <span>EDIÇÃO</span>
              <strong>LIMITADA</strong>
              <span>2026</span>
            </div>
          </div>
        </div>
      </section>

      <Benefits />

      {/* CATEGORIAS */}
      <section className="sect">
        <div className="hd__container">
          <div className="sect__head">
            <div>
              <div className="sect__kicker">EXPLORE A COLEÇÃO</div>
              <h2 className="sect__title">Comece sua coleção</h2>
            </div>
            <a className="sect__link" onClick={() => navigate('category')}>Ver tudo <Icon name="chevron-right" size={14} /></a>
          </div>
          <div className="cats">
            {categories.map((c, i) => {
              const sample = PRODUCTS.find((p) => p.type === c.type);
              return (
                <a key={c.type} className="cat" onClick={() => navigate('category', { type: c.type })} style={{ ['--i']: i }}>
                  <div className="cat__media"><ProductImage product={sample} /></div>
                  <div className="cat__body">
                    <div className="cat__num">0{i + 1}</div>
                    <div>
                      <h3>{c.label}</h3>
                      <p>{c.desc}</p>
                    </div>
                    <Icon name="arrow-right" size={18} />
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      {/* MAIS VENDIDOS */}
      <section className="sect sect--alt">
        <div className="hd__container">
          <div className="sect__head">
            <div>
              <div className="sect__kicker">VITRINE</div>
              <h2 className="sect__title">Mais vendidos da semana</h2>
            </div>
            <a className="sect__link" onClick={() => navigate('category', { sort: 'best' })}>Ver mais <Icon name="chevron-right" size={14} /></a>
          </div>
          <div className={'grid grid--' + (tweaks.cols || 4)}>
            {featured.map((p) => (
              <ProductCard key={p.id} product={p} onOpen={(id) => navigate('product', { id })} />
            ))}
          </div>
        </div>
      </section>

      {/* COMECE SUA COLEÇÃO — banner duplo */}
      <section className="sect">
        <div className="hd__container">
          <div className="duo">
            <div className="duo__card duo__card--green">
              <div className="duo__copy">
                <div className="sect__kicker" style={{ color: '#e8b86a' }}>PRÉ-VENDA</div>
                <h3>Mega Box 100 envelopes</h3>
                <p>500 figurinhas em uma só caixa. Despacho dia 1º · Edição limitada.</p>
                <button className="btn btn--gold" onClick={() => navigate('product', { id: 'mega-100' })}>
                  Garantir o meu <Icon name="arrow-right" size={16} />
                </button>
              </div>
              <div className="duo__art"><ProductImage product={PRODUCTS.find((p) => p.id === 'mega-100')} /></div>
            </div>
            <div className="duo__card duo__card--gold">
              <div className="duo__copy">
                <div className="sect__kicker">COMBO</div>
                <h3>Combo Torcedor Premium</h3>
                <p>Álbum capa dura, 40 envelopes, lata de cards e cachecol exclusivo.</p>
                <button className="btn btn--dark" onClick={() => navigate('product', { id: 'combo-torcedor' })}>
                  Quero o combo <Icon name="arrow-right" size={16} />
                </button>
              </div>
              <div className="duo__art"><ProductImage product={PRODUCTS.find((p) => p.id === 'combo-torcedor')} /></div>
            </div>
          </div>
        </div>
      </section>

      {/* OFERTAS */}
      <section className="sect sect--alt">
        <div className="hd__container">
          <div className="sect__head">
            <div>
              <div className="sect__kicker">OFERTAS</div>
              <h2 className="sect__title">Ofertas e combos</h2>
            </div>
            <a className="sect__link" onClick={() => navigate('category', { sale: true })}>Todas as ofertas <Icon name="chevron-right" size={14} /></a>
          </div>
          <div className={'grid grid--' + (tweaks.cols || 4)}>
            {PRODUCTS.filter((p) => p.oldPrice).slice(0, 4).map((p) => (
              <ProductCard key={p.id} product={p} onOpen={(id) => navigate('product', { id })} />
            ))}
          </div>
        </div>
      </section>

      {/* TESTEMUNHO/COLECIONADOR */}
      <section className="sect quote">
        <div className="hd__container quote__inner">
          <div className="quote__mark">"</div>
          <p>
            Recebi o kit em três dias, tudo lacrado e com nota. A apresentação da box é absurda —
            já é colecionável por si só. <strong>Voltei pra comprar mais.</strong>
          </p>
          <div className="quote__by">— Henrique R., colecionador desde 1998</div>
        </div>
      </section>
    </main>
  );
}

// ─── CATEGORY ────────────────────────────────────────────────────
function CategoryPage({ navigate, params, query, setQuery }) {
  const [filterType, setFilterType] = React.useState(params.type || '');
  const [maxPrice, setMaxPrice] = React.useState(500);
  const [onlyAvail, setOnlyAvail] = React.useState(false);
  const [onlySale, setOnlySale] = React.useState(!!params.sale);
  const [sort, setSort] = React.useState(params.sort || 'best');
  const [view, setView] = React.useState('grid');
  const [perPage, setPerPage] = React.useState(12);

  React.useEffect(() => { setFilterType(params.type || ''); setOnlySale(!!params.sale); }, [params.type, params.sale]);

  const filtered = PRODUCTS.filter((p) => {
    if (filterType && p.type !== filterType) return false;
    if (p.price > maxPrice) return false;
    if (onlyAvail && p.stock < 1) return false;
    if (onlySale && !p.oldPrice) return false;
    if (query && !p.name.toLowerCase().includes(query.toLowerCase())) return false;
    return true;
  });
  const sorted = [...filtered].sort((a, b) => {
    if (sort === 'asc') return a.price - b.price;
    if (sort === 'desc') return b.price - a.price;
    if (sort === 'new') return (b.badge === 'novidade' ? 1 : 0) - (a.badge === 'novidade' ? 1 : 0);
    return b.reviews - a.reviews;
  }).slice(0, perPage);

  return (
    <main className="pg">
      <div className="pgcrumb">
        <div className="hd__container">
          <a onClick={() => navigate('home')}>Início</a>
          <Icon name="chevron-right" size={12} />
          <span>Coleção Copa do Mundo 2026</span>
          {filterType && (<><Icon name="chevron-right" size={12} /><span>{filterType}</span></>)}
        </div>
      </div>
      <div className="hd__container catlayout">
        {/* Sidebar */}
        <aside className="cat-side">
          <h3>Filtros</h3>
          <div className="cat-side__group">
            <h4>Tipo de produto</h4>
            <label className="rad"><input type="radio" name="t" checked={!filterType} onChange={() => setFilterType('')} /><span>Todos</span><span className="muted">{PRODUCTS.length}</span></label>
            {TYPES.map((t) => (
              <label key={t} className="rad">
                <input type="radio" name="t" checked={filterType === t} onChange={() => setFilterType(t)} />
                <span>{t}</span>
                <span className="muted">{PRODUCTS.filter((p) => p.type === t).length}</span>
              </label>
            ))}
          </div>
          <div className="cat-side__group">
            <h4>Preço máximo</h4>
            <input type="range" min="10" max="500" step="10" value={maxPrice} onChange={(e) => setMaxPrice(+e.target.value)} />
            <div className="rangenum">até <strong>{BRL(maxPrice)}</strong></div>
          </div>
          <div className="cat-side__group">
            <h4>Disponibilidade</h4>
            <label className="chk"><input type="checkbox" checked={onlyAvail} onChange={(e) => setOnlyAvail(e.target.checked)} /><span>Em estoque</span></label>
            <label className="chk"><input type="checkbox" checked={onlySale} onChange={(e) => setOnlySale(e.target.checked)} /><span>Em oferta</span></label>
          </div>
          <div className="cat-side__group">
            <h4>Selo</h4>
            {['mais-vendido', 'oferta', 'novidade', 'premium'].map((b) => (
              <label key={b} className="chk"><input type="checkbox" /><span>{b}</span></label>
            ))}
          </div>
          <button className="btn btn--ghost btn--sm" onClick={() => { setFilterType(''); setMaxPrice(500); setOnlyAvail(false); setOnlySale(false); }}>
            Limpar filtros
          </button>
        </aside>

        {/* Listing */}
        <section className="cat-main">
          <div className="cat-main__head">
            <h1>{filterType ? filterType + 's' : 'Coleção Copa do Mundo 2026'}</h1>
            <p>{filtered.length} produtos · todos lacrados, com nota fiscal e despacho em 24h.</p>
          </div>
          <div className="cat-toolbar">
            <div className="cat-toolbar__left">
              <span className="muted">Ordenar:</span>
              <select value={sort} onChange={(e) => setSort(e.target.value)}>
                <option value="best">Mais vendidos</option>
                <option value="asc">Menor preço</option>
                <option value="desc">Maior preço</option>
                <option value="new">Novidades</option>
              </select>
              <span className="muted">Por página:</span>
              <select value={perPage} onChange={(e) => setPerPage(+e.target.value)}>
                <option>8</option><option>12</option><option>24</option>
              </select>
            </div>
            <div className="cat-toolbar__right">
              <button className={'iconbtn' + (view === 'grid' ? ' is-on' : '')} onClick={() => setView('grid')}><Icon name="grid" size={16} /></button>
              <button className={'iconbtn' + (view === 'list' ? ' is-on' : '')} onClick={() => setView('list')}><Icon name="list" size={16} /></button>
            </div>
          </div>
          {view === 'grid' ? (
            <div className="grid grid--3">
              {sorted.map((p) => (<ProductCard key={p.id} product={p} onOpen={(id) => navigate('product', { id })} />))}
            </div>
          ) : (
            <div className="listview">
              {sorted.map((p) => <ListRow key={p.id} product={p} onOpen={(id) => navigate('product', { id })} />)}
            </div>
          )}
          <div className="pager">
            <button className="iconbtn"><Icon name="chevron-left" /></button>
            {[1, 2, 3].map((n) => (<button key={n} className={'pager__n' + (n === 1 ? ' is-on' : '')}>{n}</button>))}
            <button className="iconbtn"><Icon name="chevron-right" /></button>
          </div>
        </section>
      </div>
    </main>
  );
}

function ListRow({ product, onOpen }) {
  const cart = React.useContext(CartContext);
  return (
    <div className="lrow">
      <div className="lrow__media" onClick={() => onOpen(product.id)}><ProductImage product={product} /></div>
      <div className="lrow__body">
        <div className="card__type">{product.type}</div>
        <h3 onClick={() => onOpen(product.id)}>{product.name}</h3>
        <p className="muted">{product.description}</p>
        <div className="card__rating"><Icon name="star" size={12} color="#e8b86a" /><span>{product.rating}</span><span className="muted">({product.reviews} avaliações)</span></div>
      </div>
      <div className="lrow__buy">
        {product.oldPrice && <div className="card__old">{BRL(product.oldPrice)}</div>}
        <div className="card__cur" style={{ fontSize: 24 }}>{BRL(product.price)}</div>
        <div className="card__inst">{installments(product.price)}</div>
        <button className="btn btn--primary" onClick={() => cart.add(product.id)}>Adicionar ao carrinho</button>
        <button className="btn btn--gold" onClick={() => onOpen(product.id)}>Comprar agora</button>
      </div>
    </div>
  );
}

// ─── PRODUCT ─────────────────────────────────────────────────────
function ProductPage({ navigate, params }) {
  const cart = React.useContext(CartContext);
  const product = PRODUCTS.find((p) => p.id === params.id) || PRODUCTS[0];
  const [qty, setQty] = React.useState(1);
  const [thumb, setThumb] = React.useState(0);
  const [cep, setCep] = React.useState('');
  const [shipping, setShipping] = React.useState(null);
  const [openFAQ, setOpenFAQ] = React.useState(0);
  const related = PRODUCTS.filter((p) => p.type === product.type && p.id !== product.id).slice(0, 4);
  const calcShip = () => {
    if (!cep || cep.length < 8) return;
    setShipping([
      { ...SHIPPING_RATES.pac },
      { ...SHIPPING_RATES.sedex },
      { ...SHIPPING_RATES.expressa },
    ]);
  };

  return (
    <main className="pg">
      <div className="pgcrumb">
        <div className="hd__container">
          <a onClick={() => navigate('home')}>Início</a>
          <Icon name="chevron-right" size={12} />
          <a onClick={() => navigate('category')}>Coleção 2026</a>
          <Icon name="chevron-right" size={12} />
          <a onClick={() => navigate('category', { type: product.type })}>{product.type}</a>
          <Icon name="chevron-right" size={12} />
          <span>{product.short}</span>
        </div>
      </div>
      <div className="hd__container prdlayout">
        <div className="prd__gallery">
          <div className="prd__main"><ProductImage product={product} /></div>
          <div className="prd__thumbs">
            {[0, 1, 2, 3].map((i) => (
              <button key={i} className={'prd__thumb' + (thumb === i ? ' is-on' : '')} onClick={() => setThumb(i)}>
                <ProductImage product={product} />
              </button>
            ))}
          </div>
        </div>
        <div className="prd__info">
          <div className="prd__type">{product.type}</div>
          <h1 className="prd__name">{product.name}</h1>
          <div className="prd__rating">
            <Icon name="star" size={16} color="#e8b86a" />
            <strong>{product.rating.toFixed(1)}</strong>
            <span className="muted">· {product.reviews} avaliações</span>
            <span className="prd__stock">● {product.stock > 30 ? 'Em estoque' : 'Últimas unidades'}</span>
          </div>
          <div className="prd__pricebox">
            {product.oldPrice && (
              <div className="prd__old">
                <span>{BRL(product.oldPrice)}</span>
                <span className="pill pill--off">-{Math.round((1 - product.price / product.oldPrice) * 100)}%</span>
              </div>
            )}
            <div className="prd__cur">{BRL(product.price)}</div>
            <div className="prd__inst">ou {installments(product.price)}</div>
            <div className="prd__pix">com Pix · <strong>{BRL(product.price * 0.95)}</strong> (5% off)</div>
          </div>
          <div className="prd__qtyrow">
            <div className="qtybtn">
              <button onClick={() => setQty(Math.max(1, qty - 1))}><Icon name="minus" size={14} /></button>
              <span>{qty}</span>
              <button onClick={() => setQty(qty + 1)}><Icon name="plus" size={14} /></button>
            </div>
            <button className="btn btn--primary btn--lg" onClick={() => cart.add(product.id, qty)}>
              <Icon name="cart" size={18} /> Adicionar ao carrinho
            </button>
          </div>
          <button className="btn btn--gold btn--lg btn--block" onClick={() => { cart.add(product.id, qty); navigate('checkout'); }}>
            Comprar agora <Icon name="arrow-right" size={18} />
          </button>
          <div className="prd__cep">
            <h4><Icon name="truck" size={16} /> Calcular frete e prazo</h4>
            <div className="prd__cep-row">
              <input value={cep} onChange={(e) => setCep(e.target.value.replace(/\D/g, '').slice(0, 8))} placeholder="00000-000" />
              <button className="btn btn--ghost btn--sm" onClick={calcShip}>Calcular</button>
            </div>
            {shipping && (
              <div className="prd__cep-results">
                {shipping.map((s) => (
                  <div key={s.name} className="prd__ship">
                    <div><strong>{s.name}</strong><span className="muted"> · {s.days}</span></div>
                    <div>{BRL(s.price)}</div>
                  </div>
                ))}
              </div>
            )}
          </div>
          <div className="prd__perks">
            <div><Icon name="lock" size={16} /> Pagamento seguro</div>
            <div><Icon name="shield" size={16} /> Compra protegida</div>
            <div><Icon name="package" size={16} /> Despacho em 24h</div>
          </div>
        </div>
      </div>

      {/* DESCRIÇÃO + ITENS + FAQ */}
      <div className="hd__container prddetail">
        <div className="prddetail__col">
          <h3>Descrição</h3>
          <p>{product.description}</p>
          <h3>Informações do produto</h3>
          <table className="spectbl">
            <tbody>
              <tr><th>Tipo</th><td>{product.type}</td></tr>
              <tr><th>Edição</th><td>Copa do Mundo 2026</td></tr>
              <tr><th>Idioma</th><td>Português</td></tr>
              <tr><th>SKU</th><td>{product.id.toUpperCase()}</td></tr>
              <tr><th>Origem</th><td>Importado · Lacrado</td></tr>
            </tbody>
          </table>
        </div>
        <div className="prddetail__col">
          <h3>Itens inclusos</h3>
          <ul className="prdlist">
            {product.items.map((it) => (
              <li key={it}><Icon name="check" size={14} /> {it}</li>
            ))}
          </ul>
          <h3>Perguntas frequentes</h3>
          <div className="faq">
            {FAQ.map((f, i) => (
              <div key={i} className={'faq__item' + (openFAQ === i ? ' is-on' : '')}>
                <button onClick={() => setOpenFAQ(openFAQ === i ? -1 : i)}>
                  <span>{f.q}</span><Icon name="chevron-down" size={16} />
                </button>
                {openFAQ === i && <p>{f.a}</p>}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* RELACIONADOS */}
      <section className="sect sect--alt">
        <div className="hd__container">
          <div className="sect__head">
            <div>
              <div className="sect__kicker">VOCÊ TAMBÉM VAI GOSTAR</div>
              <h2 className="sect__title">Produtos relacionados</h2>
            </div>
          </div>
          <div className="grid grid--4">
            {related.map((p) => (<ProductCard key={p.id} product={p} onOpen={(id) => navigate('product', { id })} />))}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { HomePage, CategoryPage, ProductPage });