// ════════════════════════════════════════════════════════════════
// Blog index — v2 preview React component.
// Renders the real post metadata from blog/posts.js (window.BLOG_POSTS) as a
// responsive card grid in the v2 chrome. Reuses the shared system: Nav,
// Eyebrow, Section, SectionHead, Footer.
//
// Card links point at the clean route `/blog/<slug>`; vercel.json maps that to
// the `-v2` article shell (blog/posts/<slug>-v2.html).
// ════════════════════════════════════════════════════════════════

// Link to the clean blog route for each post.
function v2PostHref(slug) {
  return "/blog/" + slug;
}

function formatPostDate(iso) {
  // iso is "YYYY-MM-DD" — render as e.g. "JUN 1, 2026"
  return new Date(iso + "T00:00:00").toLocaleDateString("en-US", {
    month: "short", day: "numeric", year: "numeric",
  }).toUpperCase();
}

function BlogCard({ post }) {
  return (
    <a className="v2-blog-card" href={v2PostHref(post.slug)}>
      <div className="v2-blog-meta">
        {post.eyebrow}<span className="dot" aria-hidden>·</span>{formatPostDate(post.date)}
        <span className="dot" aria-hidden>·</span>{post.readMinutes} min read
      </div>
      <h2 className="v2-blog-title">
        {post.title}
        {post.subtitle && <span className="sub"> — {post.subtitle}</span>}
      </h2>
      <p className="v2-blog-excerpt">{post.excerpt}</p>
      <span className="v2-blog-read">Read <span aria-hidden>→</span></span>
    </a>
  );
}

function BlogIndex() {
  const posts = window.BLOG_POSTS || [];
  return (
    <div>
      <Nav />
      <Section id="blog">
        <SectionHead
          eyebrow="BLOG"
          title="Notes on org charts, honestly written."
          sub="Comparisons, how-tos, and the occasional opinion — from the team building the org chart software that finally says yes."
        />
        {posts.length === 0
          ? <p style={{ textAlign: "center", color: "var(--muted)", marginTop: 40 }}>No posts yet.</p>
          : <div className="v2-blog-grid">
              {posts.map(p => <BlogCard key={p.slug} post={p} />)}
            </div>}
      </Section>
      <Footer />
    </div>
  );
}

Object.assign(window, { BlogIndex, BlogCard, v2PostHref, formatPostDate });