/* ============================================================
   OMNIO — Blog index
   ============================================================ */
const { useState: useStateB } = React;

function BlogIndex() {
  const posts = window.POSTS;
  const [featured, ...rest] = posts;

  const allCategories = ["All", ...Array.from(new Set(posts.map((p) => p.category)))];
  const [cat, setCat] = useStateB("All");
  const filteredRest = cat === "All" ? rest : posts.filter((p) => p.category === cat && p.slug !== featured.slug);

  return (
    <>
      {/* Hero */}
      <section className="section dense" style={{ paddingTop: 72, paddingBottom: 48 }}>
        <div className="container">
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 36 }}>
            <span className="eyebrow">Newsroom</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 64, alignItems: "end" }} className="blog-hero-grid">
            <h1 className="display-xl" style={{ maxWidth: "14ch" }}>
              <span style={{ color: "#30354b" }}>News &amp; updates</span><span style={{ color: "var(--magenta)" }}>.</span>
            </h1>
          </div>
          <style>{`@media (max-width: 880px) { .blog-hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
        </div>
      </section>

      {/* Featured post — typographic, no image */}
      <section id="latest" className="section tight" style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 32, gap: 16, flexWrap: "wrap" }}>
            <span className="eyebrow">Featured</span>
            <span style={{ fontFamily: "var(--mono)", fontWeight: 200, fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-mute)" }}>
              Most recent · {featured.dateShort}
            </span>
          </div>

          <a href={`post/${featured.slug}.html`} style={{ display: "block", textDecoration: "none" }}>
            <article style={{ background: "var(--ink-2)", color: "var(--cream)", padding: "clamp(40px, 5vw, 72px)", position: "relative", overflow: "hidden", transition: "background 0.25s" }}
              onMouseEnter={(e) => e.currentTarget.style.background = "var(--ink)"}
              onMouseLeave={(e) => e.currentTarget.style.background = "var(--ink-2)"}>

              {/* Watermark O */}
              <div style={{ position: "absolute", right: -120, top: -120, opacity: 0.05, pointerEvents: "none" }}>
                <window.OmnioO size={520} rotation={-30} color="#f5efe7" dot="#e921b2" />
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: "clamp(32px, 5vw, 80px)", alignItems: "start", position: "relative", zIndex: 1 }} className="featured-grid">

                {/* Left meta column */}
                <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
                  <div>
                    <div style={{ fontFamily: "var(--mono)", fontWeight: 200, fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(245,239,231,0.5)", marginBottom: 8 }}>
                      Published
                    </div>
                    <div style={{ fontFamily: "var(--mono)", fontWeight: 200, fontSize: 13, letterSpacing: "0.08em", color: "var(--cream)" }}>
                      {featured.dateShort}
                    </div>
                  </div>
                  <div>
                    <div style={{ fontFamily: "var(--mono)", fontWeight: 200, fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(245,239,231,0.5)", marginBottom: 8 }}>
                      Topic
                    </div>
                    <div style={{ fontFamily: "var(--mono)", fontWeight: 200, fontSize: 13, letterSpacing: "0.08em", color: "var(--magenta)", textTransform: "uppercase" }}>
                      {featured.category}
                    </div>
                  </div>
                </div>

                {/* Right body column */}
                <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
                  <h2 style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: "clamp(32px, 4.5vw, 64px)", lineHeight: 1.05, letterSpacing: "-0.025em", color: "var(--cream)", margin: 0, maxWidth: "18ch" }}>
                    {featured.title}<span style={{ color: "var(--magenta)" }}>.</span>
                  </h2>
                  <p style={{ fontSize: 17, lineHeight: 1.6, color: "rgba(245,239,231,0.78)", margin: 0, maxWidth: "54ch" }}>
                    {featured.excerpt}
                  </p>
                  <div style={{ marginTop: 12, display: "inline-flex", alignItems: "center", gap: 12, fontFamily: "var(--mono)", fontWeight: 200, fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--cream)", paddingBottom: 8, borderBottom: "1px solid rgba(245,239,231,0.3)", alignSelf: "flex-start" }}>
                    Read the announcement
                    <span style={{ fontFamily: "var(--body)", fontSize: 16 }}>→</span>
                  </div>
                </div>
              </div>
            </article>
          </a>
          <style>{`@media (max-width: 760px) { .featured-grid { grid-template-columns: 1fr !important; gap: 24px !important; } }`}</style>
        </div>
      </section>

      {/* Archive */}
      <section id="archive" className="section">
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 40, gap: 24, flexWrap: "wrap" }}>
            <div>
              <span className="eyebrow teal">Archive</span>
              <h2 className="display-lg" style={{ marginTop: 18, maxWidth: "18ch" }}>
                Everything else worth noting.
              </h2>
            </div>
            <span style={{ fontFamily: "var(--mono)", fontWeight: 200, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-mute)" }}>
              {posts.length.toString().padStart(2, "0")} posts indexed
            </span>
          </div>

          {/* Filter pills */}
          <div role="tablist" style={{ display: "flex", gap: 10, flexWrap: "wrap", marginBottom: 48 }}>
            {allCategories.map((c) => {
              const on = c === cat;
              return (
                <button key={c} role="tab" aria-selected={on} onClick={() => setCat(c)}
                style={{
                  padding: "10px 20px",
                  borderRadius: 999,
                  fontFamily: "var(--mono)",
                  fontWeight: 200,
                  fontSize: 12,
                  letterSpacing: "0.18em",
                  textTransform: "uppercase",
                  border: `1px solid ${on ? "var(--ink)" : "var(--line-strong)"}`,
                  background: on ? "var(--ink)" : "transparent",
                  color: on ? "var(--cream)" : "var(--ink)",
                  cursor: "pointer",
                  transition: "all 0.2s",
                  whiteSpace: "nowrap"
                }}>
                  {c}
                </button>);

            })}
          </div>

          {filteredRest.length === 0 ?
          <div style={{ padding: "80px 0", textAlign: "center", color: "var(--ink-mute)", fontFamily: "var(--mono)", fontWeight: 200, fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", border: "1px dashed var(--line-strong)" }}>
              No posts in this topic yet.
            </div> :

          <ul style={{ listStyle: "none", padding: 0, margin: 0, borderTop: "1px solid var(--line-strong)" }}>
              {filteredRest.map((p, i) =>
            <li key={p.slug} style={{ borderBottom: "1px solid var(--line-strong)" }}>
                  <a href={`post/${p.slug}.html`} style={{ display: "grid", gridTemplateColumns: "80px 160px 1fr 1fr 100px", gap: 32, alignItems: "center", padding: "32px 0", cursor: "pointer", transition: "background 0.2s" }}
              className="post-row"
              onMouseEnter={(e) => e.currentTarget.style.background = "rgba(48,53,75,0.03)"}
              onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
                    <span style={{ fontFamily: "var(--mono)", fontWeight: 200, fontSize: 11, letterSpacing: "0.16em", color: "var(--ink-mute)" }}>
                      {(i + 1).toString().padStart(2, "0")}
                    </span>
                    <span style={{ fontFamily: "var(--mono)", fontWeight: 200, fontSize: 12, letterSpacing: "0.16em", color: "var(--ink-soft)" }}>
                      {p.dateShort}
                    </span>
                    <span style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 22, lineHeight: 1.2, letterSpacing: "-0.01em", color: "var(--ink)" }}>
                      {p.title}
                    </span>
                    <span style={{ fontSize: 14.5, lineHeight: 1.5, color: "var(--ink-soft)", maxWidth: "44ch" }}>
                      {p.excerpt.slice(0, 160)}{p.excerpt.length > 160 ? "…" : ""}
                    </span>
                    <span style={{ fontFamily: "var(--mono)", fontWeight: 200, fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", padding: "5px 10px", border: "1px solid var(--line-strong)", borderRadius: 999, color: p.accent === "teal" ? "var(--teal-deep)" : "var(--magenta)", justifySelf: "start", whiteSpace: "nowrap" }}>
                      {p.category}
                    </span>
                  </a>
                </li>
            )}
            </ul>
          }
          <style>{`
            @media (max-width: 1000px) {
              .post-row { grid-template-columns: 60px 1fr 100px !important; }
              .post-row > span:nth-child(2), .post-row > span:nth-child(4) { display: none !important; }
            }
          `}</style>
        </div>
      </section>

      {/* Subscribe CTA */}
      <section className="section tight" style={{ background: "var(--ink-2)", color: "var(--cream)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 56, alignItems: "center" }} className="sub-grid">
            <div>
              <span className="eyebrow" style={{ color: "rgba(245,239,231,0.55)" }}>Stay informed</span>
              <h2 className="display-lg" style={{ marginTop: 18, color: "var(--cream)", maxWidth: "18ch" }}>
                Get updates when we publish<span style={{ color: "var(--magenta)" }}>.</span>
              </h2>
            </div>
            <form onSubmit={(e) => e.preventDefault()} style={{ display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-start" }}>
              <div style={{ display: "flex", gap: 0, width: "100%", maxWidth: 440, border: "1px solid rgba(245,239,231,0.2)" }}>
                <input
                  type="email"
                  placeholder="you@company.com"
                  style={{
                    flex: 1,
                    background: "transparent",
                    border: "none",
                    padding: "16px 18px",
                    color: "var(--cream)",
                    fontFamily: "var(--body)",
                    fontSize: 14,
                    outline: "none"
                  }} />
                
                <button type="submit" style={{
                  border: "none",
                  background: "var(--magenta)",
                  color: "var(--cream)",
                  padding: "0 26px",
                  fontFamily: "var(--body)",
                  fontWeight: 600,
                  fontSize: 13,
                  letterSpacing: "0.02em",
                  cursor: "pointer"
                }}>
                  Subscribe →
                </button>
              </div>
              <div style={{ fontFamily: "var(--mono)", fontWeight: 200, fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(245,239,231,0.45)" }}>
                Low volume · unsubscribe anytime
              </div>
            </form>
          </div>
          <style>{`@media (max-width: 880px) { .sub-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
        </div>
      </section>
    </>);

}

function BlogApp() {
  return (
    <>
      <window.Nav />
      <main>
        <BlogIndex />
      </main>
      <window.Footer />
    </>);

}

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