/* === FieldNotes ===
 * Three-up blog/notes teaser. The brand's editorial outlet — short
 * "operator notes" rather than blog posts.
 */

const NOTES = [
  { date: "2026-05-12", read: "6 min", title: "Private, secure comms", excerpt: "You don't need a green radio in your PACE plan for encrypted communication." },
  { date: "2026-04-28", read: "4 min", title: "Cheap mistakes that defeat expensive tools", excerpt: "The most common compromise is a forgotten gift, not a planted bug." },
  { date: "2026-04-04", read: "9 min", title: "Building a threat model that survives first contact", excerpt: "Most threat models live on a whiteboard. Yours has to live in a pocket." },
];

const FieldNotes = () => (
  <section id="notes" style={{
    padding: "96px 32px",
    maxWidth: 1280, margin: "0 auto",
  }}>
    <SectionHeader
      eyebrow="// SECTION 03 · FIELD NOTES //"
      title={<>Notes from <span style={{ color: "var(--neon-magenta)", textShadow: "var(--glow-magenta)" }}>subsurface</span></>}
      subtitle="Operator-grade essays on threat modeling, hardware, and habits. Published when there's something worth saying."
    />
    <div className="ol-notes-grid" style={{
      display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20,
    }}>
      {NOTES.map((n, i) => <NoteCard key={i} index={i + 1} {...n}/>)}
    </div>
  </section>
);

const NoteCard = ({ index, date, read, title, excerpt }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <a href="#" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{
      textDecoration: "none", color: "inherit",
      position: "relative", display: "flex", flexDirection: "column", gap: 12,
      background: "transparent",
      border: `1px solid ${hover ? "var(--neon-violet)" : "var(--obsidian-fog)"}`,
      padding: 24, transition: "border-color 120ms cubic-bezier(0.2,0,0,1)",
      boxShadow: hover ? "var(--glow-violet)" : "none",
    }}>
      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 10,
        letterSpacing: "0.22em", textTransform: "uppercase",
        color: "var(--fg-3)",
      }}>// 0{index} · {date} · {read}</div>
      <h3 style={{
        fontFamily: "var(--font-display)", fontSize: 28, lineHeight: 1,
        textTransform: "uppercase", margin: 0, color: "var(--fg-1)",
      }}>{title}</h3>
      <p style={{
        fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.55,
        color: "var(--fg-2)", margin: 0,
      }}>{excerpt}</p>
      <span style={{
        fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500,
        letterSpacing: "0.22em", textTransform: "uppercase",
        color: hover ? "var(--neon-magenta)" : "var(--fg-2)",
        textShadow: hover ? "0 0 8px var(--neon-magenta)" : "none",
        marginTop: 8,
      }}>Read →</span>
    </a>
  );
};

Object.assign(window, { FieldNotes });