// Blog Preview — Hero post + 3 title-only posts on homepage.
// Fetches /blog/posts.json at mount. Hero is pinned to "how-to-read-a-coa".

function BlogPreview() {
  const [posts, setPosts] = React.useState([]);

  React.useEffect(() => {
    fetch("/blog/posts.json")
      .then(r => r.json())
      .then(data => {
        data.sort((a, b) => b.date.localeCompare(a.date));
        setPosts(data);
      })
      .catch(() => {});
  }, []);

  if (posts.length === 0) return null;

  const hero = posts.find(p => p.featured) || posts[0];
  const sidebar = posts.filter(p => p !== hero).slice(0, 6);

  return (
    <section id="blog" style={{ padding: "72px 0", borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 40, flexWrap: "wrap", gap: 16 }}>
          <div className="section-head" style={{ maxWidth: 560 }}>
            <h2 className="display" style={{ fontSize: "clamp(28px, 4vw, 40px)", margin: 0 }}>
              Protocol Diaries
            </h2>
          </div>
          <a href="/blog/" className="btn btn-ghost btn-sm" style={{ flexShrink: 0 }}>
            All posts <span style={{ fontSize: 16, lineHeight: 1 }}>&rarr;</span>
          </a>
        </div>

        {/* Hero + sidebar layout */}
        <div className="blog-preview-layout">
          {/* Hero card */}
          <a href={`/blog/${hero.slug}/`} className="blog-preview-hero" style={{ textDecoration: "none", color: "inherit", display: "block" }}>
            <div className="blog-preview-hero-img-wrap">
              <img
                src={hero.heroImage}
                alt={hero.heroAlt || hero.title}
                loading="lazy"
                className="blog-preview-hero-img"
              />
            </div>
            <div className="blog-preview-hero-body">
              <div className="eyebrow" style={{ color: "var(--accent-deep)" }}>{hero.readingTime} min read</div>
              <h3 className="display" style={{ fontSize: "clamp(22px, 3vw, 28px)", margin: 0, lineHeight: 1.2, color: "var(--ink)" }}>
                {hero.title}
              </h3>
              <p style={{ fontSize: 15, color: "var(--ink-3)", lineHeight: 1.6, margin: 0 }}>
                {hero.deck}
              </p>
            </div>
          </a>

          {/* Sidebar — titles only */}
          <div className="blog-preview-sidebar">
            {sidebar.map((post, i) => (
              <React.Fragment key={post.slug}>
                <a
                  href={`/blog/${post.slug}/`}
                  className="blog-preview-sidebar-item"
                  style={{ textDecoration: "none", color: "inherit", display: "flex", flexDirection: "column", gap: 8, padding: "20px 0" }}
                >
                  <h4 className="display" style={{ fontSize: 17, margin: 0, lineHeight: 1.35, color: "var(--ink)", letterSpacing: "-0.01em" }}>
                    {post.title}
                  </h4>
                  <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 13, color: "var(--accent-deep)", display: "inline-flex", alignItems: "center", gap: 6 }}>
                    Read more <span style={{ fontSize: 15 }}>&rarr;</span>
                  </span>
                </a>
                {i < sidebar.length - 1 && <div style={{ borderTop: "1px solid var(--line)" }} />}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .blog-preview-layout {
          display: grid;
          grid-template-columns: 1.4fr 1fr;
          gap: 40px;
          align-items: start;
        }
        .blog-preview-hero {
          border-radius: 16px;
          overflow: hidden;
          background: var(--white);
          border: 1px solid var(--line);
          box-shadow: 0 2px 12px rgba(0,0,0,0.06);
          transition: transform .2s cubic-bezier(0.22,0.61,0.36,1), box-shadow .2s;
        }
        .blog-preview-hero:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(0,0,0,0.1);
        }
        .blog-preview-hero-img-wrap {
          overflow: hidden;
        }
        .blog-preview-hero-img {
          width: 100%;
          aspect-ratio: 16/9;
          object-fit: cover;
          display: block;
          transition: transform .3s cubic-bezier(0.22,0.61,0.36,1);
        }
        .blog-preview-hero:hover .blog-preview-hero-img {
          transform: scale(1.03);
        }
        .blog-preview-hero-body {
          padding: 28px 28px 24px;
          display: flex;
          flex-direction: column;
          gap: 10px;
        }
        .blog-preview-sidebar {
          display: flex;
          flex-direction: column;
          padding-top: 4px;
        }
        .blog-preview-sidebar-item {
          transition: padding-left .15s ease;
        }
        .blog-preview-sidebar-item:hover h4 {
          color: var(--accent-deep) !important;
        }
        .blog-preview-sidebar-item:hover {
          padding-left: 8px !important;
        }
        @media (max-width: 860px) {
          .blog-preview-layout {
            grid-template-columns: 1fr;
            gap: 32px;
          }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { BlogPreview });