// components/BlogList.jsx
const BlogList = () => {
  const allLabel = t('blog.cats_all');
  const [cat, setCat] = React.useState(allLabel);
  const posts = window.BLOG_POSTS || [];
  const cats = window.BLOG_CATEGORIES || [];

  const featured = posts.find(p => p.featured) || posts[0];
  const rest = posts.filter(p => p !== featured);
  const filtered = cat === allLabel ? rest : rest.filter(p => p.category === cat);

  return (
    <main className="blog-page">
      <section className="blog-hero">
        <div className="container blog-hero-inner">
          <span className="t-eyebrow">{t('blog.hero.eyebrow')}</span>
          <h1>{t('blog.hero.title_a')}<br/>{t('blog.hero.title_b')}</h1>
          <p className="blog-hero-sub">
            {t('blog.hero.sub')}
          </p>
          <div className="blog-cats">
            {cats.map(c => (
              <button key={c}
                      className={"blog-cat " + (cat === c ? "is-active" : "")}
                      onClick={() => setCat(c)}>
                {c}
              </button>
            ))}
          </div>
        </div>
      </section>

      {cat === allLabel && featured && (
        <section className="blog-featured">
          <div className="container">
            <a className="blog-featured-card" href={postHref(featured)}>
              <div className="blog-featured-cover">
                <img src={featured.cover} alt="" loading="lazy" />
              </div>
              <div className="blog-featured-body">
                <span className="blog-pill">{t('blog.featured_label')} · {featured.category}</span>
                <h2>{featured.title}</h2>
                <p className="blog-featured-excerpt">{featured.excerpt}</p>
                <div className="blog-featured-meta">
                  <span>{featured.author.name}</span>
                  <span className="dot" />
                  <span>{featured.date}</span>
                  <span className="dot" />
                  <span>{featured.readTime} {t('blog.read_time_suffix')}</span>
                </div>
              </div>
            </a>
          </div>
        </section>
      )}

      <section className="blog-grid-section">
        <div className="container">
          <div className="blog-grid">
            {filtered.map(p => (
              <a key={p.slug} className="blog-card" href={postHref(p)}>
                <div className="blog-card-cover">
                  <img src={p.cover} alt="" loading="lazy" />
                </div>
                <div className="blog-card-body">
                  <div className="blog-card-cat">{p.category}</div>
                  <h3>{p.title}</h3>
                  <div className="blog-card-meta">
                    <span>{p.author.name}</span>
                    <span className="dot" />
                    <span>{p.date}</span>
                    <span className="dot" />
                    <span>{p.readTime}</span>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
};

function postHref(p) {
  return "blog/" + p.slug + ".html";
}