const { CourseCard, Tag, SectionHeading, Icon, Button } = window.Academia_fb1ae0;

function Catalog({ onSelect }) {
  const t = window.GIO.t;
  const [area, setArea] = React.useState('todos');
  const [q, setQ] = React.useState('');

  const filtros = [{ clave: 'todos', nombre: t.catalogo_filtro_todos || 'Todos', icono: 'layout-grid' }]
    .concat(window.GIO.areas);

  const list = window.GIO.cursos.filter(c =>
    (area === 'todos' || c.area === area) &&
    (q.trim() === '' || (c.titulo + ' ' + (c.descripcion || '')).toLowerCase().includes(q.toLowerCase()))
  );

  return (
    <section id="cursos" style={{ background: 'var(--surface-page)', padding: 'var(--section-y) 0' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)', display: 'flex', flexDirection: 'column', gap: 'var(--space-8)' }}>
        <SectionHeading eyebrow={t.catalogo_eyebrow} title={t.catalogo_titulo} lead={t.catalogo_subtitulo} align="center" />

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-3)', alignItems: 'center', justifyContent: 'center' }}>
          {filtros.map(a => (
            <Tag key={a.clave} icon={a.icono} selected={area === a.clave} onClick={() => setArea(a.clave)}>{a.nombre}</Tag>
          ))}
          <label style={{ display: 'flex', alignItems: 'center', gap: 8, height: 38, padding: '0 16px', borderRadius: 'var(--radius-pill)', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)' }}>
            <Icon name="search" size={16} style={{ color: 'var(--text-faint)' }} />
            <input value={q} onChange={e => setQ(e.target.value)} placeholder={t.catalogo_buscar}
              style={{ border: 'none', outline: 'none', background: 'transparent', fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-s)', width: 130, color: 'var(--text-heading)' }} />
          </label>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(280px,1fr))', gap: 'var(--space-6)' }}>
          {list.map(c => (
            <CourseCard
              key={c.id}
              area={c.paleta}
              areaLabel={c.areaLabel}
              icon={c.icono}
              badge={c.badge}
              title={c.titulo}
              level={c.nivel}
              hours={c.horas}
              lessons={c.clases}
              price={c.precio}
              priceNote={c.precioNota}
              onSelect={() => onSelect(c)}
            />
          ))}
        </div>

        {list.length === 0 ? (
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--space-4)', padding: 'var(--space-16) 0' }}>
            <Icon name="search-x" size={30} style={{ color: 'var(--text-faint)' }} />
            <p style={{ fontFamily: 'var(--font-body)', color: 'var(--text-muted)' }}>{t.catalogo_vacio}</p>
            <Button variant="secondary" size="sm" onClick={() => { setQ(''); setArea('todos'); }}>Ver todos</Button>
          </div>
        ) : null}
      </div>
    </section>
  );
}
Object.assign(window, { Catalog });