/* ============================================================
   OMNIO — Single news post template
   ============================================================ */

function getSlug() {
  if (typeof window !== "undefined" && window.__SLUG__) return window.__SLUG__;
  const url = new URL(window.location.href);
  return url.searchParams.get("slug") || window.POSTS[0].slug;
}

function BlogPost() {
  const posts = window.POSTS;
  const slug = getSlug();
  const post = posts.find((p) => p.slug === slug) || posts[0];
  const related = posts.filter((p) => p.slug !== post.slug).slice(0, 2);

  return (
    <>
      {/* breadcrumb / back */}
      <section style={{ padding: "32px 0 0" }}>
        <div className="container">
          <a href="blog.html" style={{ display: "inline-flex", alignItems: "center", gap: 10, fontFamily: "var(--mono)", fontWeight: 200, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-soft)" }}>
            <span style={{ fontFamily: "var(--body)", fontSize: 14 }}>←</span>
            All news
          </a>
        </div>
      </section>

      {/* Article header */}
      <section className="section dense" style={{ paddingTop: 48, paddingBottom: 56 }}>
        <div className="container">
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 32 }}>
            <span style={{ fontFamily: "var(--mono)", fontWeight: 200, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--magenta)" }}>{post.category}</span>
            <span style={{ width: 28, height: 1, background: "var(--line-strong)" }} />
            <span style={{ fontFamily: "var(--mono)", fontWeight: 200, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-soft)" }}>{post.date}</span>
          </div>

          <h1 className="display-xl" style={{ maxWidth: "20ch", fontSize: "clamp(40px, 6vw, 92px)" }}>
            {post.title}
          </h1>

          <p className="lede" style={{ marginTop: 36, maxWidth: "58ch" }}>
            {post.excerpt}
          </p>
        </div>
      </section>

      {/* Divider — no hero image */}
      <section style={{ padding: 0 }}>
        <div className="container">
          <hr style={{ border: "none", borderTop: "1px solid var(--line-strong)", margin: 0 }} />
        </div>
      </section>

      {/* Body */}
      <section className="section" style={{ paddingTop: "clamp(60px, 7vw, 110px)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "220px 1fr", gap: 64, alignItems: "start" }} className="article-grid">
            {/* Left rail */}
            <aside style={{ position: "sticky", top: 100, display: "flex", flexDirection: "column", gap: 28 }} className="article-rail">
              <div>
                <div style={{ fontFamily: "var(--mono)", fontWeight: 200, fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-mute)", marginBottom: 8 }}>Published</div>
                <div style={{ fontFamily: "var(--mono)", fontWeight: 200, fontSize: 13, letterSpacing: "0.08em", color: "var(--ink)" }}>{post.dateShort}</div>
              </div>
              <div>
                <div style={{ fontFamily: "var(--mono)", fontWeight: 200, fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-mute)", marginBottom: 8 }}>Topic</div>
                <div style={{ fontFamily: "var(--mono)", fontWeight: 200, fontSize: 13, letterSpacing: "0.08em", color: "var(--magenta)" }}>{post.category}</div>
              </div>
            </aside>

            {/* Body content */}
            <article style={{ maxWidth: "62ch" }}>
              {post.body.map((block, i) => {
                if (block.type === "p") {
                  return (
                    <p key={i} style={{ fontFamily: "var(--body)", fontSize: 17.5, lineHeight: 1.65, color: "var(--ink)", marginTop: i === 0 ? 0 : 24, marginBottom: 0 }}>
                      {block.text}
                    </p>
                  );
                }
                if (block.type === "pull") {
                  return (
                    <figure key={i} style={{ margin: "48px 0", padding: "40px 36px", background: "var(--ink-2)", color: "var(--cream)", position: "relative", overflow: "hidden" }}>
                      <div style={{ position: "absolute", top: -20, right: -20, opacity: 0.07, pointerEvents: "none" }}>
                        <window.OmnioO size={220} rotation={-30} color="#f5efe7" dot="#e921b2" />
                      </div>
                      <span style={{ fontFamily: "var(--display)", fontSize: 64, lineHeight: 0.5, color: "var(--magenta)", fontWeight: 800, display: "block", marginBottom: 18 }}>“</span>
                      <blockquote style={{ margin: 0, fontFamily: "var(--display)", fontWeight: 600, fontSize: "clamp(22px, 2.2vw, 30px)", lineHeight: 1.25, letterSpacing: "-0.01em", color: "var(--cream)", maxWidth: "32ch" }}>
                        {block.text}
                      </blockquote>
                      {block.who && (
                        <figcaption style={{ marginTop: 24, paddingTop: 18, borderTop: "1px solid rgba(245,239,231,0.18)", display: "flex", flexDirection: "column", gap: 4 }}>
                          <div style={{ fontWeight: 600, fontSize: 14, color: "var(--cream)" }}>{block.who}</div>
                          {block.role && <div style={{ fontFamily: "var(--mono)", fontWeight: 200, fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(245,239,231,0.6)" }}>{block.role}</div>}
                        </figcaption>
                      )}
                    </figure>
                  );
                }
                return null;
              })}

              <div style={{ marginTop: 64, paddingTop: 32, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
                <span style={{ fontFamily: "var(--mono)", fontWeight: 200, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-mute)" }}>
                  End of release
                </span>
                <a className="btn ghost" href="contact.html">Press inquiries</a>
              </div>
            </article>
          </div>

          <style>{`
            @media (max-width: 900px) {
              .article-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
              .article-rail { position: static !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 24px 40px !important; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
            }
          `}</style>
        </div>
      </section>

      {/* Related */}
      <section className="section tight" style={{ background: "var(--cream-2)", borderTop: "1px solid var(--line)" }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 40, gap: 24, flexWrap: "wrap" }}>
            <h3 className="display-md">More from the newsroom</h3>
            <a href="blog.html" style={{ fontFamily: "var(--mono)", fontWeight: 200, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink)" }}>
              All news →
            </a>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }} className="related-grid">
            {related.map((r) => (
              <a key={r.slug} href={`post/${r.slug}.html`} style={{ display: "block", background: "var(--cream)", border: "1px solid var(--line)", padding: "32px clamp(28px, 3vw, 40px)", transition: "background 0.2s" }}
                onMouseEnter={(e) => e.currentTarget.style.background = "var(--cream-2)"}
                onMouseLeave={(e) => e.currentTarget.style.background = "var(--cream)"}>
                <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                    <span style={{ fontFamily: "var(--mono)", fontWeight: 200, fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: r.accent === "teal" ? "var(--teal-deep)" : "var(--magenta)" }}>{r.category}</span>
                    <span style={{ flex: 1, height: 1, background: "var(--line)" }} />
                    <span style={{ fontFamily: "var(--mono)", fontWeight: 200, fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-mute)" }}>{r.dateShort}</span>
                  </div>
                  <h4 style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 22, lineHeight: 1.2, letterSpacing: "-0.01em", color: "var(--ink)", margin: 0 }}>
                    {r.title}
                  </h4>
                  <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-soft)", margin: 0 }}>
                    {r.excerpt.slice(0, 140)}{r.excerpt.length > 140 ? "…" : ""}
                  </p>
                  <span style={{ fontFamily: "var(--mono)", fontWeight: 200, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink)", marginTop: 6 }}>
                    Read →
                  </span>
                </div>
              </a>
            ))}
          </div>
          <style>{`@media (max-width: 820px) { .related-grid { grid-template-columns: 1fr !important; } }`}</style>
        </div>
      </section>
    </>
  );
}

function PostApp() {
  return (
    <>
      <window.Nav />
      <main>
        <BlogPost />
      </main>
      <window.Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<PostApp />);