const Blog = () => {
  const posts = [
    {
      date: "2026-08-31",
      tag: "projects",
      title: "What I learned building a CSV-to-Parquet pipeline as my first real project",
      desc: "Schema validation took three times longer than I budgeted, because real-world CSV data is messier than any tutorial prepares you for. One row broke pandas in a way I didn't see coming.",
      read: "7 min"
    },
    {
      date: "2026-08-15",
      tag: "java",
      title: "Translating my Python solutions to Java taught me what I didn't understand about Python",
      desc: "Going from dict to HashMap exposed assumptions I'd been making about Python's type system without realising it. A few idioms just don't translate, and Java makes you explicit about things Python let you skip.",
      read: "9 min"
    },
    {
      date: "2026-08-01",
      tag: "career",
      title: "Why I'm choosing ML systems engineering before I've written a single line of production code",
      desc: "Most CS students pick a specialisation in Year 2. I picked mine in August, before term even started, after reading four things that changed how I thought about the field.",
      read: "8 min"
    },
  ];
  return (
    <section className="section" id="blog">
      <div className="container">
        <div className="sec-head">
          <div className="eyebrow">Blog</div>
          <h2>Notes from the learning curve.</h2>
        </div>
        <div className="blog-list">
          {posts.map((p, i) => (
            <a className="post" href="#" key={i}>
              <div className="post-meta">
                <time className="post-date">{p.date}</time>
                <span className="post-tag">{p.tag}</span>
              </div>
              <div>
                <div className="post-title">{p.title}</div>
                <div className="post-desc">{p.desc}</div>
              </div>
              <div className="post-read">{p.read} <Icon name="arrow-up-right" size={14}/></div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Blog = Blog;