function Blog() {
  return (
    <Section id="insights" background="var(--paper)">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 40, alignItems: 'end', marginBottom: 60 }} className="sse-blog-header">
        <div>
          <Kicker>§ 06 · Insights & News</Kicker>
          <Display size={72} style={{ marginTop: 24 }}>From the floor and the field.</Display>
        </div>
        <Button variant="outline" href="#insights">View all posts <Arrow /></Button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="sse-blog-grid">
        {BLOG_POSTS.map((p, i) => (
          <BlogCard key={p.title} post={p} idx={i} />
        ))}
      </div>

      <style>{`
        @media (max-width: 1000px) {
          .sse-blog-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 700px) {
          .sse-blog-grid { grid-template-columns: 1fr !important; }
          .sse-blog-header { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </Section>
  );
}

function BlogCard({ post, idx }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: 'var(--paper-warm)',
        border: '1px solid var(--line)',
        borderRadius: 8,
        overflow: 'hidden',
        transition: 'all 0.25s',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
        boxShadow: hover ? '0 20px 40px -20px rgba(10,26,62,0.15)' : 'none',
        cursor: 'pointer',
        display: 'flex',
        flexDirection: 'column',
      }}>
      {/* Cover */}
      <div style={{ aspectRatio: '16/10', position: 'relative', overflow: 'hidden', background: 'linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%)' }}>
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px)',
          backgroundSize: '20px 20px',
        }} />
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Hex size={60} stroke="rgba(212,160,23,0.6)" strokeWidth={1.2}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--amber)', letterSpacing: '0.1em' }}>
              {String(idx + 1).padStart(2, '0')}
            </div>
          </Hex>
        </div>
        <div style={{
          position: 'absolute',
          top: 16, left: 16,
          padding: '6px 10px',
          background: 'rgba(245,243,238,0.95)',
          fontFamily: 'var(--font-mono)',
          fontSize: 10,
          letterSpacing: '0.15em',
          textTransform: 'uppercase',
          color: 'var(--navy)',
          fontWeight: 600,
          borderRadius: 4,
        }}>
          {post.tag}
        </div>
      </div>

      {/* Content */}
      <div style={{ padding: 24, display: 'flex', flexDirection: 'column', flex: 1 }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.15em', color: 'var(--steel-dark)', textTransform: 'uppercase', marginBottom: 12 }}>
          {post.date}
        </div>
        <h3 style={{
          fontFamily: 'var(--font-display)',
          fontSize: 22,
          fontWeight: 500,
          letterSpacing: '-0.02em',
          color: 'var(--navy)',
          lineHeight: 1.15,
          marginBottom: 12,
          textWrap: 'balance',
        }}>
          {post.title}
        </h3>
        <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--steel-dark)', flex: 1, textWrap: 'pretty' }}>
          {post.excerpt}
        </p>
        <div style={{
          marginTop: 20,
          display: 'flex',
          alignItems: 'center',
          gap: 8,
          fontSize: 13,
          fontWeight: 500,
          color: 'var(--navy)',
        }}>
          Read article <Arrow />
        </div>
      </div>
    </article>
  );
}

Object.assign(window, { Blog });