// Writing / blog grid
const Writing = () => {
  const [ref, visible] = window.useReveal();
  const data = window.PORTFOLIO_DATA;

  return (
    <section id="writing">
      <div className="container">
        <div className="section-label">
          <span className="num">04.</span>
          <span>writing</span>
        </div>
        <h2 className="section-title">
          Notes from the trenches<span style={{ color: "var(--amber)" }}>.</span>
        </h2>
        <p className="section-subtitle">
          Things I've figured out the hard way — backend architecture, .NET patterns,
          and the occasional rant about query plans.
        </p>

        <div ref={ref} className={`posts-grid reveal-stagger ${visible ? "visible" : ""}`}>
          {data.posts.map((post, i) => (
            <a key={i} href={`#/${post.slug}`} className="post-card" onClick={(e) => e.preventDefault()}>
              <div className="post-card-head">
                <span className="post-card-cat">{post.category}</span>
                <span className="post-card-date">{post.date}</span>
              </div>
              <h3 className="post-card-title">{post.title}</h3>
              <p className="post-card-excerpt">{post.excerpt}</p>
              <div className="post-card-meta">
                <span>{post.readTime} read</span>
                <span className="post-card-arrow">
                  <window.Icon name="arrowUpRight" size={16} />
                </span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Writing = Writing;