// Collection / Category page

function PageCollection({ mobile }) {
  const { go } = useApp();
  const [view, setView] = useState(4);
  const [sort, setSort] = useState('Destacado');
  const [openFilters, setOpenFilters] = useState(false);
  const all = [...PRODUCTS, ...PRODUCTS, ...PRODUCTS].slice(0, 16).map((p, i) => ({ ...p, id: p.id + '-' + i }));

  const FilterGroup = ({ title, options }) => {
    const [open, setOpen] = useState(true);
    return (
      <div style={{ borderBottom: '1px solid var(--rule)', padding: '18px 0' }}>
        <button onClick={() => setOpen(!open)} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
          <span className="eyebrow" style={{ fontSize: 11 }}>{title}</span>
          <span style={{ fontSize: 14, color: 'var(--ink-3)' }}>{open ? '−' : '+'}</span>
        </button>
        {open && (
          <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
            {options.map(o => (
              <label key={o.name} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13, cursor: 'pointer' }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <input type="checkbox" style={{ accentColor: 'var(--ink)' }}/>
                  {o.name}
                </span>
                <span className="font-mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{o.count}</span>
              </label>
            ))}
          </div>
        )}
      </div>
    );
  };

  if (mobile) return <PageCollectionMobile all={all}/>;

  return (
    <main>
      {/* Breadcrumb + hero */}
      <section style={{ padding: '24px 40px 0' }}>
        <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.08em', color: 'var(--ink-3)', marginBottom: 20 }}>
          <button onClick={() => go('home')}>INICIO</button> / TIENDA / <span style={{ color: 'var(--ink)' }}>CASCOS MOTO</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end', paddingBottom: 32 }}>
          <div>
            <div className="eyebrow eyebrow-accent" style={{ marginBottom: 16 }}>— Categoría</div>
            <h1 className="font-display" style={{ fontSize: 88, margin: 0, fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 0.95 }}>
              Cascos <em>Moto</em>
            </h1>
          </div>
          <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--ink-2)', maxWidth: 520, paddingBottom: 12 }}>
            218 cascos homologados ECE 22.06 y FIM, seleccionados a mano por nuestros especialistas.
            Incluye prueba en boutique y ajuste personalizado sin costo.
          </p>
        </div>
      </section>

      {/* Sticky toolbar */}
      <div style={{ position: 'sticky', top: 123, zIndex: 20, background: 'var(--bg)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 40px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <button onClick={() => setOpenFilters(!openFilters)} className="eyebrow" style={{ display: 'flex', alignItems: 'center', gap: 8, borderRight: '1px solid var(--rule)', paddingRight: 16 }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M4 6h16M7 12h10M10 18h4"/></svg>
              FILTROS (3)
            </button>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {['AGV', 'Integral', '$10k – $20k'].map(c => (
                <button key={c} style={{ padding: '4px 10px', border: '1px solid var(--rule)', fontSize: 11, fontFamily: 'var(--font-mono)', letterSpacing: '0.05em', display: 'flex', gap: 6, alignItems: 'center' }}>
                  {c} ✕
                </button>
              ))}
              <button style={{ fontSize: 11, color: 'var(--ink-3)', textDecoration: 'underline' }}>Limpiar</button>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
            <div style={{ display: 'flex', gap: 4 }}>
              {[3, 4, 5].map(n => (
                <button key={n} onClick={() => setView(n)} style={{
                  padding: '6px 10px', border: view === n ? '1px solid var(--ink)' : '1px solid transparent',
                  fontFamily: 'var(--font-mono)', fontSize: 11, color: view === n ? 'var(--ink)' : 'var(--ink-3)',
                }}>{n}</button>
              ))}
            </div>
            <div className="eyebrow">218 productos</div>
            <div style={{ position: 'relative' }}>
              <select value={sort} onChange={e => setSort(e.target.value)} className="eyebrow" style={{ border: '1px solid var(--rule)', padding: '6px 28px 6px 12px', background: 'var(--bg)', appearance: 'none' }}>
                <option>Destacado</option>
                <option>Precio: menor a mayor</option>
                <option>Precio: mayor a menor</option>
                <option>Nuevos</option>
              </select>
              <span style={{ position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none', fontSize: 10 }}>▾</span>
            </div>
          </div>
        </div>
      </div>

      {/* Grid + side filters */}
      <section style={{ padding: '32px 40px 0', display: 'grid', gridTemplateColumns: openFilters ? '260px 1fr' : '1fr', gap: 40, transition: 'grid-template-columns 200ms' }}>
        {openFilters && (
          <aside style={{ position: 'sticky', top: 200, height: 'fit-content', maxHeight: 'calc(100vh - 200px)', overflowY: 'auto' }}>
            <FilterGroup title="Marca" options={[{name:'AGV',count:48},{name:'Dainese',count:92},{name:'Shoei',count:36},{name:'HJC',count:22},{name:'Arai',count:20}]}/>
            <FilterGroup title="Tipo" options={[{name:'Integral',count:124},{name:'Modular',count:42},{name:'Jet',count:28},{name:'Off-road',count:24}]}/>
            <FilterGroup title="Precio" options={[{name:'< $5,000',count:18},{name:'$5k – $10k',count:64},{name:'$10k – $20k',count:86},{name:'> $20k',count:50}]}/>
            <FilterGroup title="Talla" options={[{name:'XS',count:32},{name:'S',count:88},{name:'M',count:140},{name:'L',count:128},{name:'XL',count:72}]}/>
            <FilterGroup title="Color" options={[{name:'Negro',count:112},{name:'Blanco',count:48},{name:'Rojo',count:36},{name:'Carbon',count:28}]}/>
          </aside>
        )}
        <div style={{ display: 'grid', gridTemplateColumns: `repeat(${view}, 1fr)`, gap: 24, rowGap: 48 }}>
          {all.map(p => <ProductCard key={p.id} product={p}/>)}
        </div>
      </section>

      {/* Load more */}
      <section style={{ padding: '80px 40px 40px', textAlign: 'center' }}>
        <div className="font-mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em', marginBottom: 12 }}>MOSTRANDO 16 DE 218</div>
        <div style={{ maxWidth: 200, height: 2, background: 'var(--rule)', margin: '0 auto', position: 'relative' }}>
          <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: '8%', background: 'var(--ink)' }}/>
        </div>
        <button className="btn btn-outline btn-lg" style={{ marginTop: 24 }}>Cargar más productos</button>
      </section>

      <Footer/>
    </main>
  );
}

function PageCollectionMobile({ all }) {
  return (
    <main>
      <section style={{ padding: '16px 16px 0' }}>
        <div className="font-mono" style={{ fontSize: 10, letterSpacing: '0.08em', color: 'var(--ink-3)', marginBottom: 8 }}>INICIO / CASCOS MOTO</div>
        <h1 className="font-display" style={{ fontSize: 44, margin: 0, fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1 }}>Cascos <em>Moto</em></h1>
        <div className="eyebrow" style={{ marginTop: 8 }}>218 productos</div>
      </section>
      <div style={{ position: 'sticky', top: 85, zIndex: 20, background: 'var(--bg)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', marginTop: 20, padding: '12px 16px', display: 'flex', gap: 8 }}>
        <button className="btn btn-outline btn-sm" style={{ flex: 1 }}>Filtros (3)</button>
        <button className="btn btn-outline btn-sm" style={{ flex: 1 }}>Ordenar</button>
      </div>
      <section style={{ padding: '20px 16px 40px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, rowGap: 28 }}>
        {all.slice(0, 10).map(p => <ProductCard key={p.id} product={p} mobile/>)}
      </section>
      <Footer/>
    </main>
  );
}

window.PageCollection = PageCollection;