/* @jsx React.createElement */
/* Field Notes from the Archive — paper-mode section.
   Three "declassified" notes pulled from past episodes, presented as
   a working brief: typewritten marginalia, stamps, stains, paper artifacts.
   Sits between Doctrine (paper) and the dark Pull Quote — a deliberate
   moment of texture before returning to the dark canvas. */

const ARCHIVE = [
  {
    file: 'OP-26-007/A',
    cat: 'INTENT',
    date: '08·SEP·26',
    title: 'Two sentences. Then shut up.',
    body: "Endstate first. Constraints second. If your wing CO can't recite it back from memory at the FOB, you didn't write a commander's intent — you wrote a memo. Cut it in half. Cut it in half again.",
    stamp: 'FIELD\u00a0NOTE',
    stampColor: 'red',
    margin: { text: 'most teams\nskip line 2 →', tone: 'blue' },
    underline: 'shut up',
  },
  {
    file: 'OP-26-011/B',
    cat: 'AUTHORITY',
    date: '29·SEP·26',
    title: 'Push the call two echelons down.',
    body: "If a section lead has to phone the wing CO to commit to a contact report, you've already lost the engagement. The person closest to the decision should make it. Your job is to make that survivable.",
    stamp: 'CONFIRMED',
    stampColor: 'ok',
    margin: { text: 'try this w/\nyour standup\non monday', tone: 'red' },
    underline: 'survivable',
  },
  {
    file: 'OP-26-014/C',
    cat: 'AAR',
    date: '19·OCT·26',
    title: 'The four questions. Twenty minutes. Done.',
    body: "What was supposed to happen? What actually happened? Why? What do we change tomorrow? That is the entire script. The work is not in the questions — it is in answering them without flinching.",
    stamp: 'OPSEC-3',
    stampColor: 'blue',
    margin: { text: 'esp. on\nthe wins\n— mv', tone: 'pencil' },
    underline: 'without flinching',
  },
];

function ArchiveCard({ note, idx }) {
  const tilt = [-0.6, 0.4, -0.4][idx] || 0;
  // coffee stain artifact removed — was visually weak
  // (vc-fna__stain class kept defined but unused)
  return (
    <article className="vc-fna__card" style={{ transform: `rotate(${tilt}deg)` }}>
      <div className="vc-fna__clip" aria-hidden="true" />
      <header className="vc-fna__head">
        <div className="vc-fna__file">
          <span className="vc-fna__filenum">{note.file}</span>
          <span className="vc-fna__cat">§ {note.cat}</span>
        </div>
        <div className={`vc-fna__stamp vc-fna__stamp--${note.stampColor}`}>
          {note.stamp}
        </div>
      </header>
      <h3 className="vc-fna__title">{note.title}</h3>
      <p className="vc-fna__body">
        {note.underline ? (
          renderWithUnderline(note.body, note.underline)
        ) : note.body}
      </p>
      <footer className="vc-fna__foot">
        <span className="vc-fna__date">FILED · {note.date}</span>
        <span className="vc-fna__sep">·</span>
        <span className="vc-fna__more">read full debrief →</span>
      </footer>
      <div className={`vc-fna__margin vc-fna__margin--${note.margin.tone}`}>
        {note.margin.text.split('\n').map((line, i) => (
          <React.Fragment key={i}>{line}{i < note.margin.text.split('\n').length - 1 ? <br/> : null}</React.Fragment>
        ))}
      </div>
    </article>
  );
}

function renderWithUnderline(text, phrase) {
  const i = text.indexOf(phrase);
  if (i < 0) return text;
  return (
    <React.Fragment>
      {text.slice(0, i)}
      <span className="vc-fna__uh">{phrase}</span>
      {text.slice(i + phrase.length)}
    </React.Fragment>
  );
}

function FieldNotesArchive() {
  return (
    <section className="vc-fna" id="archive">
      {/* paper artifacts on the section background */}
      <div className="vc-fna__perf" aria-hidden="true" />
      <div className="vc-fna__head-row">
        <div className="vc-fna__head-left">
          <div className="vc-eyebrow vc-eyebrow--paper">§ 03 &middot; FROM THE ARCHIVE</div>
          <h2 className="vc-fna__h2">Field notes, declassified.</h2>
          <p className="vc-fna__lede">
            One page from the brief, pulled out of the binder. The stuff our wing leads have circled, underlined, and stuck to the wall. Three lessons, three operations, three Mondays from now.
          </p>
        </div>
        <div className="vc-fna__head-right">
          <blockquote className="vc-fna__pull">
            <span className="vc-fna__pull-mark">&ldquo;</span>
            If it isn&rsquo;t on the wall by Monday, it didn&rsquo;t earn the binder.
          </blockquote>
          <div className="vc-fna__hand">
            <span className="vc-fna__handnote">pull these for<br/>the q4 review &rarr;</span>
          </div>
        </div>
      </div>

      <div className="vc-fna__grid">
        {ARCHIVE.map((n, i) => <ArchiveCard key={n.file} note={n} idx={i} />)}
      </div>

      <div className="vc-fna__foot-row">
        <a className="vc-fna__cta">OPEN&nbsp;THE&nbsp;FULL&nbsp;BINDER&nbsp;→</a>
        <span className="vc-fna__caveat">22 editions · 64 field notes · indexed by topic</span>
      </div>
    </section>
  );
}

window.FieldNotesArchive = FieldNotesArchive;