// Blog index page

function BlogPage() {
  const posts = window.POSTS;
  const featured = posts.find(p => p.feature);
  const rest = posts.filter(p => !p.feature);

  return (
    <window.Page active="blog">
      {/* HERO */}
      <section data-section="hero" style={{ padding: "100px 32px 60px" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
          <Eyebrow>Musings on AI · from the NoralAI team</Eyebrow>
          <Display size={88} style={{ marginTop: 24, maxWidth: 1000 }}>
            Notes on managed AI,<br />deployment, and the <span style={{ color: SIGNAL }}>operations shift.</span>
          </Display>
          <Lede style={{ marginTop: 32, fontSize: 20 }}>
            Positioning, platform thinking, and behind-the-scenes from real deployments. Written by the team building and operating <Wordmark /> systems in production.
          </Lede>
        </div>
      </section>

      {/* FEATURED POST */}
      {featured && (
        <Section paddingY={48}>
          <a href={`post.html?slug=${featured.slug}`} style={{ textDecoration: "none", color: "inherit", display: "block" }}>
            <div style={{
              background: INK, color: CREAM, borderRadius: 24,
              padding: 56, position: "relative", overflow: "hidden",
              minHeight: 380, display: "flex", flexDirection: "column", justifyContent: "space-between",
            }}>
              <div aria-hidden="true" style={{ position: "absolute", inset: 0, opacity: 0.05, backgroundImage: `radial-gradient(${CREAM} 1px, transparent 1px)`, backgroundSize: "32px 32px" }} />
              <div data-decorative="true" aria-hidden="true" style={{ position: "absolute", right: -80, bottom: -80, opacity: 0.10 }}>
                <NoralMark size={420} color={SIGNAL} />
              </div>
              <div style={{ position: "relative" }}>
                <div style={{ display: "flex", gap: 12, alignItems: "center", marginBottom: 24 }}>
                  <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: SIGNAL, fontWeight: 600, padding: "4px 10px", borderRadius: 6, background: "rgba(255,91,46,0.15)" }}>Featured</span>
                  <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(245,241,234,0.78)", fontWeight: 500 }}>{featured.category} · {featured.readTime}</span>
                </div>
                <Display size={56} color={CREAM} style={{ maxWidth: 800, marginBottom: 20 }}>{featured.title}</Display>
                <Lede color="rgba(245,241,234,0.75)" style={{ fontSize: 18, maxWidth: 640 }}>{featured.excerpt}</Lede>
              </div>
              <div style={{ position: "relative", display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 32, paddingTop: 24, borderTop: "1px solid rgba(245,241,234,0.15)" }}>
                <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(245,241,234,0.78)" }}>{featured.date} · {featured.author}</span>
                <span style={{ fontFamily: "'Inter', sans-serif", fontWeight: 600, fontSize: 14, color: SIGNAL, letterSpacing: "-0.01em" }}>Read article →</span>
              </div>
            </div>
          </a>
        </Section>
      )}

      {/* POST GRID */}
      <Section paddingY={48}>
        <Eyebrow>More from the team</Eyebrow>
        <div data-grid="3col" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginTop: 24 }}>
          {rest.map(p => (
            <a key={p.slug} href={`post.html?slug=${p.slug}`} style={{ textDecoration: "none", color: "inherit", display: "block" }}>
              <article style={{
                background: CREAM, borderRadius: 16, border: `1px solid ${INK}11`,
                padding: 28, height: "100%", display: "flex", flexDirection: "column",
                minHeight: 320,
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
                  <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: SIGNAL, fontWeight: 600 }}>{p.category}</span>
                  <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.14em", color: MIST }}>{p.readTime}</span>
                </div>
                <h3 style={{
                  fontFamily: "'Inter', sans-serif", fontWeight: 700, fontSize: 22, letterSpacing: "-0.025em",
                  lineHeight: 1.2, color: INK, margin: "0 0 14px",
                }}>{p.title}</h3>
                <p style={{ fontSize: 14, color: STONE, lineHeight: 1.55, margin: 0, flex: 1 }}>{p.excerpt}</p>
                <div style={{ marginTop: 24, paddingTop: 16, borderTop: `1px solid ${INK}19`, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: MIST }}>{p.date}</span>
                  <span style={{ fontFamily: "'Inter', sans-serif", fontWeight: 600, fontSize: 13, color: SIGNAL }}>Read →</span>
                </div>
              </article>
            </a>
          ))}
        </div>
      </Section>

      {/* SUBSCRIBE */}
      <Section paddingY={80} style={{ background: CREAM }}>
        <div data-grid="split" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <Eyebrow>Subscribe</Eyebrow>
            <H2 style={{ marginTop: 16 }}>Musings on AI,<br />in your inbox.</H2>
            <Lede style={{ marginTop: 20 }}>
              One email a month. Notes from real deployments, platform thinking, and what we're learning about managed AI in production.
            </Lede>
          </div>
          <form onSubmit={(e) => e.preventDefault()} style={{ display: "flex", gap: 8 }}>
            <input type="email" placeholder="you@company.com" style={{
              flex: 1, background: PAPER, border: `1px solid ${INK}19`, borderRadius: 10,
              padding: "16px 18px", fontFamily: "'Inter', sans-serif", fontSize: 15,
              color: INK, outline: "none",
            }} />
            <button type="submit" style={{
              background: SIGNAL, color: CREAM, border: "none",
              fontFamily: "'Inter', sans-serif", fontWeight: 600, fontSize: 15,
              padding: "16px 24px", borderRadius: 10, cursor: "pointer",
              letterSpacing: "-0.01em", whiteSpace: "nowrap",
            }}>Subscribe →</button>
          </form>
        </div>
      </Section>
    </window.Page>
  );
}

window.BlogPage = BlogPage;