// Blog post page — single post view (Inc Founders House LA Part 2)
// Reuses homepage system + adds a "more posts" rail

const BlogPostPage = ({ slug, onClose, onOpenPost }) => {
  const post = BLOG_POSTS[slug];
  if (!post) {
    // Fallback: show a generic single post layout from NEWSROOM_POSTS metadata
    const meta = NEWSROOM_POSTS.find((p) => p.slug === slug);
    if (!meta) return null;
    return (
      <BlogShell post={{
        title: meta.title,
        eyebrow: `${meta.category} · ${meta.date}`,
        lead: meta.excerpt,
        body: [{ type: "p", text: "Full post coming soon. The CMS port for this entry is in progress — for now, the headline and excerpt are accurate." }],
      }} slug={slug} onClose={onClose} onOpenPost={onOpenPost} />
    );
  }
  return <BlogShell post={post} slug={slug} onClose={onClose} onOpenPost={onOpenPost} />;
};

const BlogShell = ({ post, slug, onClose, onOpenPost }) => {
  const meta = NEWSROOM_POSTS.find((p) => p.slug === slug);
  const moreposts = NEWSROOM_POSTS.filter((p) => p.slug !== slug).slice(0, 3);

  return (
    <main style={{ background: "var(--paper)", paddingTop: 24 }}>
      {/* Back link */}
      <section className="container" style={{ paddingTop: 32, paddingBottom: 0 }}>
        <button
          onClick={onClose}
          className="mono"
          style={{
            background: "transparent", border: "none", padding: 0,
            color: "var(--muted)", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 8,
          }}
        >
          ← Back to newsroom
        </button>
      </section>

      {/* Title block */}
      <section className="container" style={{ paddingTop: 56, paddingBottom: 56 }}>
        <div className="mono" style={{ color: "var(--blue)", marginBottom: 20 }}>↳ {post.eyebrow}</div>
        <h1 className="display" style={{
          fontSize: "clamp(48px, 7vw, 112px)",
          fontWeight: 600,
          letterSpacing: "-0.03em",
          lineHeight: 0.95,
          margin: 0,
          maxWidth: 1100,
          textWrap: "balance",
        }}>
          {post.title.replace(/–/g, "–").split(" ").map((w, i, arr) => {
            // italicize a few key words for visual interest
            const italicWords = ["LA", "Part", "Magazine"];
            return italicWords.includes(w) ? <span key={i} style={{ fontStyle: "italic", fontWeight: 500 }}>{w}{i < arr.length - 1 ? " " : ""}</span> : w + (i < arr.length - 1 ? " " : "");
          })}
        </h1>
      </section>

      {/* Hero image */}
      <section className="container" style={{ paddingBottom: 64 }}>
        <div style={{
          position: "relative",
          aspectRatio: "16/9",
          background: "var(--ink)",
          overflow: "hidden",
          borderRadius: 4,
        }}>
          <image-slot
            id={`news-${slug}`}
            shape="rect"
            src={meta?.image || ""}
            fit={meta?.image && meta.image.includes("/clients/") ? "contain" : "cover"}
            placeholder="Drop hero image"
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
          ></image-slot>
        </div>
      </section>

      {/* Body */}
      <section className="container" style={{ paddingBottom: 96 }}>
        <div className="r-grid-1-1 r-blog-grid" style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 64, alignItems: "start" }}>
          {/* Sticky meta sidebar */}
          <aside className="r-blog-aside" style={{ position: "sticky", top: 110 }}>
            <dl style={{ margin: 0, display: "flex", flexDirection: "column", gap: 18 }}>
              {[
                ["Published", meta?.date || "—"],
                ["Category", meta?.category || "—"],
                ["Reading time", "4 min"],
                ["Author", "Ignited Editorial"],
              ].map(([k, v]) => (
                <div key={k} style={{ borderTop: "1px solid var(--rule)", paddingTop: 10 }}>
                  <dt className="mono" style={{ color: "var(--muted)", fontSize: 10, marginBottom: 4 }}>{k}</dt>
                  <dd style={{ margin: 0, fontSize: 14, color: "var(--ink)" }}>{v}</dd>
                </div>
              ))}
            </dl>
          </aside>

          {/* Body content */}
          <article className="r-blog-body" style={{ maxWidth: 720 }}>
            <p className="r-blog-lead" style={{
              fontFamily: "var(--display)",
              fontSize: 30,
              fontWeight: 500,
              letterSpacing: "-0.02em",
              lineHeight: 1.25,
              margin: "0 0 40px 0",
              color: "var(--ink)",
              textWrap: "pretty",
            }}>
              {post.lead}
            </p>

            {post.body.map((block, i) => {
              if (block.type === "p") {
                return <p key={i} style={{ fontSize: 18, lineHeight: 1.65, margin: "0 0 20px 0", color: "var(--ink)", textWrap: "pretty" }}>{block.text}</p>;
              }
              if (block.type === "h") {
                return (
                  <h3 key={i} className="display" style={{
                    fontSize: 28,
                    fontWeight: 600,
                    letterSpacing: "-0.015em",
                    lineHeight: 1.15,
                    margin: "40px 0 16px 0",
                    color: "var(--ink)",
                  }}>{block.text}</h3>
                );
              }
              if (block.type === "ul") {
                return (
                  <ul key={i} style={{ listStyle: "none", padding: 0, margin: "0 0 24px 0" }}>
                    {block.items.map((it, j) => (
                      <li key={j} style={{
                        display: "grid",
                        gridTemplateColumns: "auto 1fr",
                        gap: 16,
                        alignItems: "baseline",
                        fontSize: 18,
                        lineHeight: 1.6,
                        padding: "10px 0",
                        borderBottom: "1px solid var(--rule)",
                      }}>
                        <span className="mono" style={{ color: "var(--blue)", fontSize: 11 }}>0{j + 1}</span>
                        <span>{it}</span>
                      </li>
                    ))}
                  </ul>
                );
              }
              return null;
            })}

            {/* End mark removed per feedback */}
          </article>
        </div>
      </section>

      <div className="container"><div className="hairline" /></div>

      {/* More posts */}
      <section className="container" style={{ paddingTop: 64, paddingBottom: 96 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 32 }}>
          <h2 className="display" style={{ fontSize: 40, fontWeight: 600, letterSpacing: "-0.02em", margin: 0 }}>
            <span style={{ fontStyle: "italic" }}>More</span> posts
          </h2>
          <button onClick={onClose} className="mono" style={{
            background: "transparent", border: "1px solid var(--rule-strong)",
            padding: "10px 16px", borderRadius: 999, fontSize: 11, cursor: "pointer",
          }}>View all →</button>
        </div>
        <div className="r-grid-news" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
          {moreposts.map((p, i) => (
            <button
              key={p.slug}
              onClick={() => onOpenPost(p.slug)}
              style={{
                display: "block", width: "100%", background: "transparent", border: "none",
                padding: 0, textAlign: "left", cursor: "pointer",
              }}
            >
              <div style={{
                position: "relative", aspectRatio: "16/10",
                background: "var(--paper-2)", overflow: "hidden", borderRadius: 4, marginBottom: 16,
              }}>
                <image-slot id={`news-${p.slug}`} shape="rect" src={p.image || ""}
                  fit={p.image && p.image.includes("/clients/") ? "contain" : "cover"} placeholder="Drop image"
                  style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}></image-slot>
              </div>
              <div className="mono" style={{ color: "var(--muted)", marginBottom: 8 }}>{p.category} · {p.date}</div>
              <h3 className="display" style={{ fontSize: 20, fontWeight: 600, letterSpacing: "-0.015em", lineHeight: 1.2, margin: 0 }}>{p.title}</h3>
            </button>
          ))}
        </div>
      </section>
    </main>
  );
};

window.BlogPostPage = BlogPostPage;