/* Academia Page */
const AcademiaPage = ({ setPage }) => {
  const [filter, setFilter] = React.useState('Todos');
  const allTalleres = window.TALLERES_DATA || [];
  const cats = ['Todos', 'Panadería', 'Pastelería'];
  const filtered = filter === 'Todos' ? allTalleres : allTalleres.filter(t => t.categoria === filter);

  return (
    <div>
      {/* Header */}
      <div style={{ background: '#fff', padding: '48px 0 32px', borderBottom: '1px solid var(--bd)' }}>
        <div className="container">
          <span className="sec-label sec-label-green">Academia LK Mejia</span>
          <h2>Talleres que <span style={{ color: 'var(--gr)' }}>transforman</span></h2>
          <span className="heading-bar" style={{ background: 'var(--gr)' }}></span>
          <p style={{ maxWidth: 480, marginBottom: 24 }}>Grupos pequeños, participación activa, técnicas reales. Aprende repostería de la manera correcta.</p>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
            <div className="filters">
              {cats.map(c => (
                <button key={c} className={"filter-btn" + (filter === c ? " active" : "")} onClick={() => setFilter(c)}>{c}</button>
              ))}
            </div>
            <div style={{ background: '#FEF0DC', border: '1px solid #FAB968', borderRadius: 10, padding: '11px 16px', display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--or)', fontFamily: 'var(--font-d)', fontWeight: 600 }}>
              ⚡ ¡Alta demanda! Varios talleres con últimos cupos
            </div>
          </div>
        </div>
      </div>

      {/* Panadería Section */}
      {(filter === 'Todos' || filter === 'Panadería') && (
        <section style={{ background: 'var(--bg)', 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(--gr-lt)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="wheat" size={20} color="var(--gr)" />
              </div>
              <div>
                <h3 style={{ margin: 0 }}>Panadería</h3>
                <p style={{ fontSize: 13, color: 'var(--t3)', margin: 0 }}>{allTalleres.filter(t => t.categoria === 'Panadería').length} talleres disponibles</p>
              </div>
            </div>
            <div className="grid-4">
              {(filter === 'Todos' ? allTalleres : filtered).filter(t => t.categoria === 'Panadería').map(t => (
                <WorkshopCard key={t.id} t={t} setPage={setPage} />
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Pastelería Section */}
      {(filter === 'Todos' || filter === 'Pastelería') && (
        <section style={{ background: '#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="coffee" size={20} color="var(--or)" />
              </div>
              <div>
                <h3 style={{ margin: 0 }}>Pastelería</h3>
                <p style={{ fontSize: 13, color: 'var(--t3)', margin: 0 }}>{allTalleres.filter(t => t.categoria === 'Pastelería').length} talleres disponibles</p>
              </div>
            </div>
            <div className="grid-4">
              {(filter === 'Todos' ? allTalleres : filtered).filter(t => t.categoria === 'Pastelería').map(t => (
                <WorkshopCard key={t.id} t={t} setPage={setPage} />
              ))}
            </div>
          </div>
        </section>
      )}

      <StatsBar />

      {/* CTA */}
      <section style={{ background: 'var(--bg)' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <h3>¿Buscas un taller personalizado?</h3>
          <p style={{ maxWidth: 480, margin: '8px auto 20px' }}>Organizamos talleres a medida para grupos, empresas y eventos especiales.</p>
          <a href={waLink("un taller personalizado")} target="_blank" rel="noopener noreferrer" className="btn btn-lg btn-orange">
            <WhatsAppIcon size={18} /> Solicitar información
          </a>
        </div>
      </section>

      <p style={{ fontSize: 11, color: 'var(--t3)', textAlign: 'center', padding: '16px 40px', background: '#fff', lineHeight: 1.6 }}>
        <strong>Nota:</strong> El costo del taller es por persona, incluye todos los materiales, dotación de delantal y gorro y parte proporcional de lo que se produce en clase.
      </p>
    </div>
  );
};

Object.assign(window, { AcademiaPage });