const POSTS = [
  {
    featured: true,
    cat: 'Recap',
    date: 'Apr 18',
    title: 'Beat Battle #6 — Chop & Flip recap',
    excerpt: "Kiki Low took the belt with a flipped 70s soul loop that nobody saw coming. Runner-up BARON did a whole garage edit in under 90 seconds. We almost lost power twice.",
  },
  {
    cat: 'Workshop',
    date: 'Apr 12',
    title: 'Five sidechain tricks that aren\'t pumping kicks',
    excerpt: "Ducking pads. Ghost snares. Vocal de-essing with a key. Every time you learn sidechain you discover a new thing it can do.",
  },
  {
    cat: 'Interview',
    date: 'Apr 05',
    title: 'Inside Noor & the Soft Noise\'s debut EP',
    excerpt: "Recorded across three campus practice rooms and one friend's basement. We talk pedals, bowing guitars, and why the vocals are so low in the mix.",
  },
  {
    cat: 'Guide',
    date: 'Mar 28',
    title: 'How to get the good studio time (B-207)',
    excerpt: "Book early, bring your own cables, and clean up after yourself. Also: the ceiling tile next to the door rattles at low B — tape it.",
  },
  {
    cat: 'News',
    date: 'Mar 20',
    title: 'We got the Push 3 — here\'s the locker policy',
    excerpt: "Two-week max checkout. Members only, first-come first-served. No, you cannot take it to your house party.",
  },
];

function Blog() {
  return (
    <section className="container" id="blog">
      <SectionHead
        num="[07] / WHAT'S NEW"
        title="What's <em>new.</em>"
        sub="Recaps, interviews, workshop notes, and whatever else our board feels like writing down."
      />
      <div className="blog-grid">
        {POSTS.map((p, i) => (
          <div key={i} className={"post" + (p.featured ? " featured" : "")}>
            {p.featured && <div className="cover" />}
            <div className="meta">
              <span className="cat">{p.cat}</span>
              <span>{p.date} · 2026</span>
            </div>
            <h3>{p.title}</h3>
            <p className="excerpt">{p.excerpt}</p>
            <div className="read">Read →</div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.Blog = Blog;