function Insights({ onOpen }) {
  const posts = window.POSTS || [];
  const [filter, setFilter] = React.useState('Todos');

  const categories = React.useMemo(() => {
    const cats = posts.map(p => (p.cat || '').split('·').slice(-1)[0].trim()).filter(Boolean);
    return ['Todos', ...Array.from(new Set(cats))];
  }, [posts]);

  const filtered = filter === 'Todos'
    ? posts
    : posts.filter(p => (p.cat || '').includes(filter));

  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, [filter]);

  return (
    <section className="section insights-section" id="recursos">
      <div className="section-head">
        <span className="eyebrow">Recursos · Webinars · Insights</span>
        <h2>Conocimiento de la industria HVACR latinoamericana</h2>
        <p>
          Webinars, análisis y mejores prácticas de los expertos del canal HVACR.
          Toda la biblioteca disponible para miembros de HARDI LATAM.
        </p>
      </div>
      <div className="filter-chips">
        {categories.map((c) => (
          <button key={c}
                  className={`chip ${filter === c ? 'active' : ''}`}
                  onClick={() => setFilter(c)}>
            {c}
          </button>
        ))}
      </div>
      <div className="insights-grid">
        {filtered.map((p) => (
          <article key={p.id} className="insight" onClick={() => onOpen(p)}>
            <div className={`img ${p.color || 'g0'}`} style={p.image ? { backgroundImage: `url('${p.image}')`, backgroundSize: 'cover', backgroundPosition: 'center' } : {}}>
              <span className="play">
                <i data-lucide="play" style={{ width: 16, height: 16 }}></i>
              </span>
            </div>
            <div className="body">
              <span className="eyebrow">{p.cat}</span>
              <h3>{p.title}</h3>
              <div className="meta">
                {p.date} · {p.readTime}
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}