/* @jsx React.createElement */
/* AAR Feed — the working ledger.
   Two surfaces:
     <AARFeed />    — home teaser, 2 most recent + "open the full ledger" link.
     <AARsPage />   — dedicated page at /aars.html, full chronological ledger. */

const AAR_ENTRIES = [
  { date: '2026·OCT·19', tag: 'OP-26-014', lesson: 'An intent that needs you alive to execute is not an intent. It is a leash. Write it so the next commander can pick it up cold.', cite: 'EP 014 · ON COMMAND' },
  { date: '2026·OCT·12', tag: 'OP-26-013', lesson: 'The first nine minutes after jump are not where you give orders. They are where the orders you already gave either survive contact, or don\'t.', cite: 'EP 013 · AAR' },
  { date: '2026·OCT·05', tag: 'OP-26-012', lesson: 'A wing without fuel is a wing on the ramp. Sustainment is not the boring part of leadership — it is the part that makes the heroic parts possible.', cite: 'EP 012 · LOGISTICS' },
  { date: '2026·SEP·28', tag: 'OP-26-011', lesson: 'You don\'t have a strategy problem. You have a sensing problem. Strategy is downstream of what your scouts are willing to tell you on a hot mic.', cite: 'EP 011 · ISR' },
  { date: '2026·SEP·21', tag: 'OP-26-010', lesson: 'OPSEC is not paranoia. OPSEC is the courtesy of not making your wingmen carry a secret they didn\'t agree to keep.', cite: 'EP 010 · OPSEC' },
  { date: '2026·SEP·14', tag: 'OP-26-009', lesson: 'Mission command in five sentences: tell them the endstate, the constraints, the priority, the comms plan, and what you will not be there to decide.', cite: 'EP 009 · DOCTRINE' },
];

function AAREntry({ e }) {
  return (
    <div className="vc-aar__entry">
      <div className="vc-aar__date">
        {e.date}
        <span>{e.tag}</span>
      </div>
      <div>
        <p className="vc-aar__lesson">{e.lesson}</p>
        <div className="vc-aar__cite">
          <a>{e.cite}</a>
          <span>·</span>
          <span>FILED</span>
        </div>
      </div>
    </div>
  );
}

/* Home teaser — 2 most recent, with link to full ledger. */
function AARFeed() {
  const visible = AAR_ENTRIES.slice(0, 2);
  return (
    <section className="vc-aar" id="aar">
      <div className="vc-aar__inner">
        <div className="vc-aar__head">
          <div className="vc-section__rule" />
          <div className="vc-eyebrow">§ 04 &middot; THE LEDGER</div>
          <h2 className="vc-section__h2" style={{fontSize:40, marginTop:18}}>What we're learning, in chronological order.</h2>
          <p className="vc-section__sub" style={{marginTop:18}}>
            One sentence per brief. The thing we'd write on the wall if we only had room for one. A working ledger of operating principles, dated and cited.
          </p>
        </div>
        <div className="vc-aar__feed">
          {visible.map((e, i) => <AAREntry key={i} e={e} />)}
          <a className="vc-aar__open" href="aars.html">
            <span className="vc-aar__open-lbl">OPEN&nbsp;THE&nbsp;FULL&nbsp;LEDGER</span>
            <span className="vc-aar__open-meta">{AAR_ENTRIES.length}&nbsp;ENTRIES &middot; OPENED&nbsp;2026·SEP·14</span>
            <span className="vc-aar__open-arrow">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* Dedicated page — every entry, with a proper hero band. */
function AARsPage() {
  return (
    <React.Fragment>
      <section className="vc-suph">
        <div className="vc-hero__grid" />
        <div className="vc-suph__inner">
          <div className="vc-eyebrow">
            <span style={{color:'var(--c-signal)'}}>VOLUNTEER&nbsp;C2</span>
            &nbsp;&middot;&nbsp;THE&nbsp;LEDGER
          </div>
          <h1 className="vc-suph__h1">After-action review, in full.</h1>
          <p className="vc-suph__lede">
            Every brief, one sentence. Dated, tagged, cited. Read it as a chronological log of what we changed our minds about. Newest first.
          </p>
        </div>
      </section>

      <section className="vc-aar">
        <div className="vc-aar__inner">
          <div className="vc-aar__feed">
            {AAR_ENTRIES.map((e, i) => <AAREntry key={i} e={e} />)}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

window.AARFeed = AARFeed;
window.AARsPage = AARsPage;