/* Tienda Page */
const TiendaPage = ({ setPage }) => {
  const [filter, setFilter] = React.useState('Todos');
  const allInsumos = window.INSUMOS_DATA || [];
  const cats = React.useMemo(() => {
    const uniqueCats = [...new Set(allInsumos.map(i => i.categoria))];
    return ['Todos', ...uniqueCats.sort()];
  }, [allInsumos]);
  const catIcons = { 'Chocolatería': 'coffee', 'Harinas y Mezclas': 'wheat', 'Decoración': 'palette', 'Herramientas': 'wrench', 'Otros': 'box', 'Azúcares': 'coffee', 'Grasas': 'box', 'Aditivos e Insumos': 'box', 'Cremas y Rellenos': 'coffee', 'Saborizantes': 'coffee', 'Frutas y Pulpas': 'coffee' };
  const filtered = filter === 'Todos' ? allInsumos : allInsumos.filter(i => i.categoria === filter);

  const sections = filter === 'Todos' 
    ? ['Chocolatería', 'Harinas y Mezclas', 'Decoración', 'Herramientas', 'Otros']
    : [filter];

  return (
    <div>
      <div style={{ background: '#fff', padding: '48px 0 32px' }}>
        <div className="container">
          <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 24, flexWrap: 'wrap', gap: 16 }}>
            <div>
              <span className="sec-label sec-label-orange">Tienda LK Mejia</span>
              <h2>Insumos con <span style={{ color: 'var(--or)' }}>asesoría técnica</span></h2>
              <span className="heading-bar" style={{ background: 'var(--or)' }}></span>
              <p style={{ maxWidth: 480 }}>Cada producto que vendemos está respaldado por expertise real. No vendemos por vender.</p>
            </div>
            <div style={{ background: '#EAF5D6', border: '1px solid var(--gr)', borderRadius: 'var(--r-p)', padding: '8px 16px', fontSize: 12, color: 'var(--gr-d)', fontFamily: 'var(--font-d)', fontWeight: 600, display: 'flex', alignItems: 'center', gap: 6 }}>
              <Icon name="truck" size={14} color="var(--gr-d)" /> Envíos a toda Colombia — Retiro en tienda disponible
            </div>
          </div>
          <div className="filters">
            {cats.map(c => (
              <button key={c} className={"filter-btn filter-btn-or" + (filter === c ? " active" : "")} onClick={() => setFilter(c)}>
                {c !== 'Todos' && <Icon name={catIcons[c] || 'box'} size={14} />}{c}
              </button>
            ))}
          </div>
        </div>
      </div>

      {sections.map(cat => {
        const items = allInsumos.filter(i => i.categoria === cat);
        if (items.length === 0) return null;
        return (
          <section key={cat} style={{ background: sections.indexOf(cat) % 2 === 0 ? 'var(--bg)' : '#fff', paddingBottom: 40 }}>
            <div className="container">
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
                <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--or-lt)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={catIcons[cat] || 'box'} size={20} color="var(--or)" />
                </div>
                <div>
                  <h3 style={{ margin: 0 }}>{cat}</h3>
                  <p style={{ fontSize: 13, color: 'var(--t3)', margin: 0 }}>{items.length} productos</p>
                </div>
              </div>
              <div className="grid-3">
                {items.map(p => <ProductCard key={p.id} p={p} />)}
              </div>
            </div>
          </section>
        );
      })}

      {/* Marcas */}
      <section style={{ background: '#fff', padding: '48px 0' }}>
        <div className="container">
          <MarcasLogos />
          <p style={{ fontSize: 13, color: 'var(--t3)', marginTop: 20, textAlign: 'center' }}>+300 productos disponibles en tienda física</p>
        </div>
      </section>

      <StatsBar />
    </div>
  );
};

Object.assign(window, { TiendaPage });