// blog.jsx - field notes index

const POSTS = [
  { tag: "FIELD NOTE", date: "2026 · 03 · 14", title: "The OAuth grant we almost missed - a 3,200-word post-mortem.", read: "14 min", kind: "post-mortem" },
  { tag: "ESSAY",      date: "2026 · 03 · 02", title: "Why your MSSP's dashboard is lying to you (respectfully).", read: "9 min",  kind: "opinion" },
  { tag: "TECHNICAL",  date: "2026 · 02 · 21", title: "Tuning Wazuh for AWS CloudTrail without drowning your analysts.", read: "18 min", kind: "guide" },
  { tag: "FIELD NOTE", date: "2026 · 02 · 08", title: "A stale PAT, a rented VPS, and 47 days of quiet access.", read: "11 min", kind: "post-mortem" },
  { tag: "ESSAY",      date: "2026 · 01 · 24", title: "The EPS trap, in one chart you can send your CFO.", read: "6 min",  kind: "opinion" },
  { tag: "TECHNICAL",  date: "2026 · 01 · 11", title: "MISP + TheHive: a 40-minute pipeline that actually works.", read: "22 min", kind: "guide" },
  { tag: "FIELD NOTE", date: "2025 · 12 · 19", title: "What an audit-day looks like when the logs are already there.", read: "7 min",  kind: "post-mortem" },
  { tag: "ESSAY",      date: "2025 · 12 · 04", title: "Stop measuring MTTD. Measure what you'd miss without it.", read: "8 min",  kind: "opinion" },
];

function BlogPage({ setPage }) {
  const [filter, setFilter] = React.useState("all");
  const filters = ["all", "post-mortem", "guide", "opinion"];
  const shown = filter === "all" ? POSTS : POSTS.filter(p => p.kind === filter);

  return (
    <div className="page">
      <section style={{ padding: "80px 0 40px" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 32, maxWidth: 900 }}>
          <Label>FIELD NOTES · POST-MORTEMS · ESSAYS · TECHNICAL GUIDES</Label>
          <h1 className="serif" style={{ fontSize: "clamp(52px, 6.5vw, 104px)", margin: 0, lineHeight: 0.98, letterSpacing: "-0.025em" }}>
            What we see,<br/>
            <span style={{ color: "var(--fg-mute)", fontStyle: "italic" }}>written down.</span>
          </h1>
          <p style={{ fontSize: 18, color: "var(--fg-mute)", margin: 0, maxWidth: 620, lineHeight: 1.55 }}>
            Anonymized post-mortems, opinionated essays, and the occasional
            40-minute guide. No newsletter spam - we publish when we have
            something worth saying.
          </p>
        </div>
      </section>

      <section style={{ padding: "20px 0" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          <div style={{ display: "flex", gap: 10, borderBottom: "1px solid var(--line)", paddingBottom: 18 }}>
            {filters.map(f => (
              <button key={f} onClick={() => setFilter(f)}
                style={{
                  padding: "6px 14px",
                  fontFamily: "var(--mono)",
                  fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase",
                  border: "1px solid " + (filter === f ? "var(--accent)" : "var(--line)"),
                  color: filter === f ? "#000" : "var(--fg-mute)",
                  background: filter === f ? "var(--accent)" : "transparent",
                  transition: "all 140ms",
                }}>
                {f}
              </button>
            ))}
          </div>

          {shown.map((p, i) => (
            <a key={i} style={{
              display: "grid",
              gridTemplateColumns: "120px 140px 1fr 80px",
              gap: 24, alignItems: "center",
              padding: "28px 0",
              borderBottom: "1px solid var(--line-soft)",
              cursor: "pointer",
            }}
              onMouseEnter={e => e.currentTarget.style.background = "var(--bg-1)"}
              onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
              <Tag color="var(--fg-dim)">{p.tag}</Tag>
              <Mono style={{ fontSize: 12, color: "var(--fg-dim)" }}>{p.date}</Mono>
              <h3 className="serif" style={{ fontSize: 24, margin: 0, lineHeight: 1.2, letterSpacing: "-0.01em", textWrap: "pretty" }}>{p.title}</h3>
              <Mono style={{ fontSize: 11, color: "var(--fg-dim)", textAlign: "right" }}>{p.read} →</Mono>
            </a>
          ))}
        </div>
      </section>

      <section style={{ padding: "80px 0 60px" }}>
        <div className="container">
          <div style={{
            border: "1px solid var(--line)",
            background: "var(--bg-1)",
            padding: "48px 56px",
            display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "center",
          }}>
            <div>
              <Label>SIGNAL · NOT NOISE</Label>
              <h3 className="serif" style={{ fontSize: 36, margin: "12px 0 8px", letterSpacing: "-0.015em" }}>
                One field note a month. No filler.
              </h3>
              <p style={{ margin: 0, color: "var(--fg-mute)", fontSize: 14.5 }}>
                We publish when there's something real. Unsubscribe is a single click.
              </p>
            </div>
            <div style={{ display: "flex", gap: 8 }}>
              <input type="email" placeholder="you@company.com"
                style={{
                  padding: "14px 18px", background: "var(--bg)",
                  border: "1px solid var(--line)", color: "var(--fg)",
                  fontFamily: "var(--sans)", fontSize: 14, minWidth: 280,
                }} />
              <button className="btn btn-primary">Subscribe →</button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { BlogPage });