const posts = [
  {
    title: 'Anatomía de un agente que funciona en producción',
    date: '2026.04.12',
    reading: '10 min',
    category: 'AGENTES',
  },
  {
    title: 'MCP: por qué importa y cómo implementar tu primer servidor',
    date: '2026.03.28',
    reading: '7 min',
    category: 'INFRAESTRUCTURA',
  },
  {
    title: 'Claude Code en flujos de trabajo reales: lecciones después de 6 meses',
    date: '2026.02.20',
    reading: '12 min',
    category: 'LLMs',
  },
];

const BlogCard = ({ p, i }) => {
  const [ref, visible] = window.useReveal({ threshold: 0.15 });
  return (
    <article ref={ref} className={`blog-card reveal ${visible ? 'is-visible' : ''}`} style={{
      background: '#fff',
      border: '2px solid #111',
      padding: 24,
      cursor: 'pointer',
      boxShadow: '4px 4px 0 #111',
      '--reveal-delay': `${i * 100}ms`,
    }}>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 11, color: '#666',
        display: 'flex', justifyContent: 'space-between', marginBottom: 16,
        letterSpacing: '0.04em',
      }}>
        <span>{p.date}</span>
        <span>{p.reading}</span>
      </div>
      <span style={{
        fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--accent)',
        letterSpacing: '0.1em', fontWeight: 600, marginBottom: 8, display: 'block',
      }}>{p.category}</span>
      <h3 style={{
        fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 700,
        color: '#111', margin: 0, lineHeight: 1.3,
      }}>{p.title}</h3>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 12, color: '#C13B2E',
        marginTop: 20,
      }}>
        Leer <span className="blog-arrow">→</span>
      </div>
    </article>
  );
};

const BlogSection = () => {
  const [headRef, headVisible] = window.useReveal({ threshold: 0.2 });
  return (
    <section id="cuaderno" style={{
      padding: 'clamp(60px, 8vh, 100px) clamp(16px, 4vw, 48px)',
      position: 'relative', zIndex: 1,
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div ref={headRef} className={`reveal ${headVisible ? 'is-visible' : ''}`} style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          marginBottom: 48, flexWrap: 'wrap', gap: 16,
        }}>
          <div>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--accent)', letterSpacing: '0.08em' }}>04 — CUADERNO</span>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 4vw, 52px)',
              fontWeight: 800, color: '#111', margin: '8px 0 0', letterSpacing: '-0.02em',
            }}>Notas técnicas</h2>
          </div>
          <a href="#cuaderno" style={{
            fontFamily: 'var(--font-mono)', fontSize: 13, color: '#111',
            textDecoration: 'none', borderBottom: '2px solid #111',
          }}>Todos los ensayos →</a>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24 }}>
          {posts.map((p, i) => (
            <BlogCard key={i} p={p} i={i} />
          ))}
        </div>
      </div>
    </section>
  );
};

window.BlogSection = BlogSection;