const NOTES = [
  {
    n: "01 / Stays current",
    h: "A subscription, not a static book",
    p: "AI moves too fast for a book you buy once. Each annual edition is refreshed so the workflows still work when you open them.",
  },
  {
    n: "02 / Authored, then open",
    h: "Written by practitioners first",
    p: "The first edition is seeded by co-authors — a real founding library, not an empty shelf. Open, paid contribution opens once it’s worth browsing.",
  },
  {
    n: "03 / Responsible by design",
    h: "Guardrails in every recipe",
    p: "Data handling, human oversight, failure modes, escalation — part of the template on every workflow, never an appendix.",
  },
];

export default function FieldNotes() {
  return (
    <section className="notes">
      <div className="wrap">
        <div className="notes-grid">
          {NOTES.map((x) => (
            <div className="note reveal" key={x.n}>
              <div className="n">{x.n}</div>
              <h3>{x.h}</h3>
              <p>{x.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}