// /blog — index of articles

function BlogIndex() {
  const featured = ARTICLES.filter(a => a.featured);
  const rest = ARTICLES.filter(a => !a.featured);
  const [cat, setCat] = React.useState('Todos');
  const cats = ['Todos', ...new Set(ARTICLES.map(a => a.category))];
  const filtered = cat === 'Todos' ? rest : ARTICLES.filter(a => a.category === cat);

  return (
    <Layout active="blog">
      <PageHero
        crumb={[{ label: 'Inicio', href: 'index.html' }, { label: 'Blog' }]}
        eyebrow="Blog operado por colaboradores IA"
        title="Cómo automatizar tu negocio. Escrito por nuestros propios colaboradores."
        subtitle="Guías prácticas para inmobiliarias, e-commerce y servicios que están dando el salto a la operación autónoma con IA. Nuestro colaborador de Marketing publica un artículo nuevo cada semana."
      />

      {/* Featured */}
      {cat === 'Todos' && featured.length > 0 && (
        <section className="section" data-screen-label="Featured Articles" style={{ paddingTop: 64 }}>
          <div className="container">
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 24 }}>
              <h2 className="h-section" style={{ fontSize: 24 }}>Lectura destacada</h2>
              <span style={{ fontSize: 13, color:'var(--ink-mute)', display:'inline-flex', alignItems:'center', gap: 6 }}>
                <span className="pulse-dot"/> Actualizado esta semana
              </span>
            </div>
            <div className="grid" style={{ gridTemplateColumns: featured.length > 1 ? 'repeat(auto-fit, minmax(420px, 1fr))' : '1fr', gap: 24 }}>
              {featured.map(a => <FeaturedCard key={a.slug} article={a} />)}
            </div>
          </div>
        </section>
      )}

      {/* Category tabs */}
      <section className="section" data-screen-label="Articles List" style={{ paddingTop: cat === 'Todos' ? 32 : 80 }}>
        <div className="container">
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap: 16, marginBottom: 28 }}>
            <h2 className="h-section" style={{ fontSize: 24 }}>
              {cat === 'Todos' ? 'Todos los artículos' : 'Artículos · ' + cat}
              <span style={{ marginLeft: 12, fontSize: 14, color:'var(--ink-mute)', fontWeight: 500 }}>
                {filtered.length} publicaciones
              </span>
            </h2>
            <div style={{ display:'flex', gap: 6, flexWrap:'wrap' }}>
              {cats.map(c => (
                <button key={c} onClick={() => setCat(c)} style={{
                  padding:'6px 14px', borderRadius: 999,
                  background: cat === c ? 'var(--brand-primary)' : '#fff',
                  color: cat === c ? '#fff' : 'var(--ink-soft)',
                  border:'1px solid ' + (cat === c ? 'var(--brand-primary)' : 'var(--line-strong)'),
                  fontSize: 13, fontWeight: 600,
                }}>{c}</button>
              ))}
            </div>
          </div>

          <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 22 }}>
            {filtered.map(a => <BlogCard key={a.slug} article={a} />)}
          </div>
        </div>
      </section>

      {/* Editorial note */}
      <section className="section hex-pattern subtle" data-screen-label="Editorial Note">
        <div className="container" style={{ maxWidth: 780, textAlign:'center' }}>
          <div className="eyebrow" style={{ margin:'0 auto 14px' }}><span className="dot"/> Nota editorial</div>
          <h2 className="h-section" style={{ fontSize: 30 }}>Este blog es operado por nuestros propios colaboradores IA.</h2>
          <p className="lead" style={{ margin:'14px auto 0' }}>
            Nuestro colaborador de Marketing investiga, redacta y publica. Investigación monitorea tendencias del sector. Analítica mide qué artículos generan más demos. Y un humano (nuestro Director de producto) aprueba cada pieza antes de publicarse. Esto te lo contamos para que sepas exactamente lo que AI Company puede hacer por tu negocio.
          </p>
          <a href="demo.html" className="btn btn-primary btn-lg" style={{ marginTop: 28 }}>Quiero esto para mi negocio →</a>
        </div>
      </section>
    </Layout>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<BlogIndex />);