// Blog index — lists posts from window.JMK_BLOG (blog-posts.js) as cards.
function PageBlog() {
  const { PageHero, CTASection, PaintDivider, Reveal, useMediaQuery } = window.JMK;
  const posts = window.JMK_BLOG || [];
  const isMobile = useMediaQuery("(max-width: 640px)");
  const isTablet = useMediaQuery("(max-width: 1024px)");
  const cols = isMobile ? "1fr" : isTablet ? "repeat(2, 1fr)" : "repeat(3, 1fr)";

  return (
    <React.Fragment>
      <PageHero eyebrow="Journal" title="Blog" tagline="Thinking from inside the studio — culture, strategy and the craft behind the work." />

      <section style={{ background: "#ffffff", padding: "clamp(72px,10vw,120px) clamp(20px,5vw,64px)" }}>
        {posts.length === 0 ? (
          <Reveal>
            <p style={{ fontFamily: "var(--font-editorial)", fontStyle: "italic", fontSize: "clamp(24px,3.4vw,40px)", color: "var(--ink-500)", textAlign: "center", margin: "40px 0" }}>
              New writing is on the way. Check back soon.
            </p>
          </Reveal>
        ) : (
          <div style={{ display: "grid", gridTemplateColumns: cols, gap: 32 }}>
            {posts.map((p, i) => (
              <Reveal key={p.slug} delay={(i % 3) * 60}>
                <a href={"post.html?slug=" + encodeURIComponent(p.slug)} className="jmk-lift" data-cursor="link" style={{ textDecoration: "none", display: "block" }}>
                  <div className="jmk-zoom" style={{ aspectRatio: "3/2", background: "#111111", borderRadius: "var(--radius-md)", overflow: "hidden", marginBottom: 16 }}>
                    {p.cover && <img src={p.cover} alt={p.title} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />}
                  </div>
                  <div style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", letterSpacing: "var(--tracking-wide)", textTransform: "uppercase", color: "var(--ink-300)", marginBottom: 8 }}>{p.date}</div>
                  <div style={{ fontFamily: "var(--font-editorial)", fontSize: "var(--text-2xl)", color: "var(--ink-900)", marginBottom: 8, lineHeight: 1.1 }}>{p.title}</div>
                  <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-base)", color: "var(--ink-500)", lineHeight: "var(--leading-relaxed)", margin: 0 }}>{p.excerpt}</p>
                </a>
              </Reveal>
            ))}
          </div>
        )}
      </section>

      <PaintDivider color="var(--color-primary)" />
      <CTASection title="Like how we think?" sub="Let's put it to work on your brand." />
    </React.Fragment>
  );
}
window.JMK = window.JMK || {};
window.JMK.PageBlog = PageBlog;