/* portal-catalog.jsx — Catálogo de produtos */

function PortalCatalog({ onNav }) {
  const [cat, setCat] = React.useState('todos');
  const cats = [
    { k:'todos',      label:'Todos',      n: CRM_PRODUCTS.length },
    { k:'cabelo',     label:'Cabelo',     n: CRM_PRODUCTS.filter(p=>p.cat==='cabelo').length },
    { k:'corpo',      label:'Corpo',      n: CRM_PRODUCTS.filter(p=>p.cat==='corpo').length },
    { k:'barba',      label:'Barba',      n: CRM_PRODUCTS.filter(p=>p.cat==='barba').length },
    { k:'vestuário',  label:'Vestuário',  n: CRM_PRODUCTS.filter(p=>p.cat==='vestuário').length },
  ];
  const filtered = cat === 'todos' ? CRM_PRODUCTS : CRM_PRODUCTS.filter(p => p.cat === cat);

  return (
    <div className="content stack gap-5">
      <div className="flex between" style={{ alignItems:'flex-end' }}>
        <div>
          <h1 className="page-title">Catálogo</h1>
          <div className="page-sub" style={{ maxWidth: 580 }}>
            Tudo o que podes pedir como extra no teu próximo ciclo. Preços sem IVA.
          </div>
        </div>
        <button className="btn clay sm" onClick={() => onNav('cycle')}>
          Ir para o ciclo Q3 →
        </button>
      </div>

      <div className="row gap-2" style={{ flexWrap:'wrap' }}>
        {cats.map(c => (
          <div key={c.k} className={'pill ' + (cat===c.k ? 'active' : '')} onClick={() => setCat(c.k)}>
            {c.label} <span className="count">{c.n}</span>
          </div>
        ))}
      </div>

      <div className="grid gap-4" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        {filtered.map(p => {
          const inBase = PORTAL_BASE.find(b => b.code === p.code);
          return (
            <div key={p.code} className="product-card">
              <ProductArt code={p.code} kind={p.kind}/>
              <div className="product-body stack gap-2">
                <div>
                  <div className="row gap-2 items-c">
                    <div style={{ fontSize: 14, fontWeight: 600 }}>{p.name}</div>
                    {inBase && <span className="badge" style={{padding:'2px 6px', fontSize:9.5, color:'var(--moss)'}}><span className="dot"/>base</span>}
                  </div>
                  <div className="italic-serif ink-3" style={{ fontSize: 12 }}>{p.scent}</div>
                </div>
                <div className="ink-3" style={{ fontSize: 11.5 }}>{p.fmt}</div>
                <div className="flex between items-c mt-2">
                  <div className="display tab" style={{ fontSize: 18 }}>{CRM_FMT_EUR(p.price)}</div>
                  <button className="btn outline sm" onClick={() => onNav('cycle')}>
                    <Icon k="plus" size={12}/> Adicionar
                  </button>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { PortalCatalog });