function NoteRow({ row, onBlog }) {
  return (
    <div onClick={onBlog}
      style={{ display: "grid", gridTemplateColumns: "70px minmax(0,1fr) auto",
        gap: "clamp(14px,2vw,26px)", alignItems: "baseline", cursor: "pointer",
        padding: "clamp(16px,2vw,22px) 0", borderTop: "1px solid var(--rule)" }}>
      <Micro size={9} color="var(--ink-4)">{row.date}</Micro>

      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
          {row.thumb && (
            <span style={{ flex: "0 0 auto", display: "block", width: 64 }}>
              <Plate ratio="64/44" tone={row.thumb} frame="01:12:04" />
            </span>
          )}
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 300,
            fontSize: "1.5rem", lineHeight: 1.05, letterSpacing: "-0.02em", color: "var(--ink)" }}>
            {row.title}
          </span>
        </div>
        {row.excerpt && (
          <p style={{ fontFamily: "var(--font-body)", fontSize: 13.5, lineHeight: 1.55,
            color: "var(--ink-2)", margin: "9px 0 0", maxWidth: "52ch" }}>{row.excerpt}</p>
        )}
        {row.glyph && (
          <div style={{ marginTop: 10 }}>
            <Shavian size={20} gloss={row.gloss}>{row.glyph}</Shavian>
          </div>
        )}
      </div>

      <span style={{ display: "inline-flex", alignItems: "baseline", gap: 10, justifySelf: "end" }}>
        <Micro size={9} color="var(--ink-3)">{row.type}</Micro>
        <span style={{ color: "var(--vermilion)", fontSize: 14, lineHeight: 1 }}>↗</span>
      </span>
    </div>
  );
}

function NotesWip() {
  return (
    <section id="notes" className="section" style={{ background: "var(--paper-bright)" }}>
      <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "flex-end", gap: 24 }}>
        <div>
          <Kicker>— Essays, fragments, references</Kicker>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(3rem,8vw,6.5rem)",
            lineHeight: 0.9, letterSpacing: "-0.03em", color: "var(--ink)", margin: "16px 0 0" }}>Notes</h2>
        </div>
        <p style={{ textAlign: "right", maxWidth: 320, fontFamily: "var(--font-body)", fontSize: "clamp(1rem,1.2vw,1.15rem)",
          lineHeight: 1.5, color: "var(--ink-2)", margin: 0 }}>The commonplace book is being re-set.</p>
      </div>
      <WipPanel
        title="Still writing in the margins."
        note="Essays, fragments, screenshots and references — thinking out loud, kept short. The first set is in edit now; the full notes site opens after."
        items={["Two essays in edit", "Film screenshots being captioned", "A Shavian transliteration pass", "The rest on the notes site"]}
      />
    </section>
  );
}

function Notes({ onBlog }) {
  if (SHOW_WIP) return <NotesWip />;
  const rows = [
    { date: "28 may", title: "On keeping a commonplace book", type: "Essay",
      excerpt: "The internet made everyone an archivist and no one a curator. A note is only worth keeping if you'd defend it." },
    { date: "24 may", title: "A frame from La Chimera", type: "Screenshot", thumb: "cool" },
    { date: "—", title: "\u201cTaste is just attention paid out over years.\u201d", type: "Fragment" },
    { date: "—", title: "Transliterating my margin notes into Shavian", type: "Note",
      glyph: "𐑥𐑫𐑤𐑩", gloss: "mulla" },
    { date: "—", title: "Apartamento, every issue", type: "Reference" },
    { date: "11 may", title: "Against the highlight reel", type: "Essay" },
  ];

  return (
    <section id="notes" className="section" style={{ background: "var(--paper-bright)" }}>
      <div className="cols cols--notes">
        <Reveal>
          <Kicker>— Seven of many</Kicker>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: "clamp(3rem,8vw,6.5rem)", lineHeight: 0.9, letterSpacing: "-0.03em",
            color: "var(--ink)", margin: "16px 0 0" }}>Notes</h2>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "1.05rem", lineHeight: 1.55,
            color: "var(--ink-2)", maxWidth: "30ch", margin: "22px 0 0" }}>
            Essays, fragments, screenshots and references. Thinking out loud, kept short.
          </p>
          <div style={{ fontFamily: "var(--font-annotation)", fontSize: 24, lineHeight: 1.1,
            color: "var(--vermilion)", transform: "rotate(-3deg)", margin: "20px 0 0", maxWidth: "18ch" }}>
            the blog, basically.
          </div>
          <div style={{ marginTop: 30 }}>
            <ArrowLink onClick={() => onBlog()}>The rest live on the notes site</ArrowLink>
          </div>
        </Reveal>

        <Reveal delay={80}>
          {rows.map((row, i) => <NoteRow key={i} row={row} onBlog={onBlog} />)}
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Notes });