/* @jsx React.createElement */
/* Doctrine — the working library, indexed by principle.
   Two surfaces:
     <Doctrine />     — home teaser, 3 most-cited rows + "view all" link.
     <DoctrinePage /> — dedicated page at /doctrine.html, full library. */

const PILLARS = [
  {
    n: '01',
    cat: 'ON COMMAND',
    title: 'Mission command, not micromanagement.',
    body: "You can't push every decision through a 40-pilot fleet op. We teach commander's intent — the only tool that survives plan collapse, comms loss, and first contact.",
    cited: 'CITED IN 5 BRIEFS',
  },
  {
    n: '02',
    cat: 'ON OPS',
    title: 'Logistics, ISR, and OPSEC \u2014 actually run.',
    body: "Sustainment beats heroics. We show the boring scaffolding (refuel cycles, contact reports, distribution lists) that makes the dramatic moments possible.",
    cited: 'CITED IN 4 BRIEFS',
  },
  {
    n: '03',
    cat: 'ON LEARNING',
    title: 'AARs that don\u2019t lie to themselves.',
    body: "Most after-action reviews are confessional theater. We teach the structure: what was supposed to happen, what actually happened, why, and what we change tomorrow.",
    cited: 'CITED IN 3 BRIEFS',
  },
  {
    n: '04',
    cat: 'ON COMMS',
    title: 'Brevity is a leadership skill.',
    body: "A net jam is a leadership failure. We teach the discipline of one-thought transmissions, callsign hygiene, and the art of not stepping on your own commander.",
    cited: 'CITED IN 3 BRIEFS',
  },
  {
    n: '05',
    cat: 'ON ROLES',
    title: 'A volunteer is not a free employee.',
    body: "The motivation curve of a volunteer is shaped by belonging, mastery, and clarity \u2014 not by salary. Lead them like the unpaid professionals they are, or watch them quietly stop showing up.",
    cited: 'CITED IN 2 BRIEFS',
  },
  {
    n: '06',
    cat: 'ON TEMPO',
    title: 'Pace beats peak.',
    body: "An org that can run one operation per week for a year will outlearn an org that runs one heroic operation per quarter. Tempo compounds. Heroics burn the people who deliver them.",
    cited: 'CITED IN 2 BRIEFS',
  },
  {
    n: '07',
    cat: 'ON PLANNING',
    title: 'A plan you can\u2019t hand off is a plan you\u2019re holding hostage.',
    body: "If only you can run the op, you don't have a plan \u2014 you have a hobby. We teach the brief format that lets the next commander pick it up cold.",
    cited: 'CITED IN 1 BRIEF',
  },
];

/** Just the rows. Reused by both surfaces. */
function DoctrineList({ pillars }) {
  return (
    <ol className="vc-toc">
      {pillars.map(p => (
        <li key={p.n} className="vc-toc__row">
          <div className="vc-toc__n">{p.n}</div>
          <div className="vc-toc__body">
            <div className="vc-toc__cat">{p.cat}</div>
            <h3 className="vc-toc__title">{p.title}</h3>
            <p className="vc-toc__excerpt">{p.body}</p>
          </div>
          <div className="vc-toc__cited">{p.cited}</div>
        </li>
      ))}
    </ol>
  );
}

/* Home teaser — three rows + open-the-library link. */
function Doctrine() {
  const teaser = PILLARS.slice(0, 3);
  return (
    <section className="vc-section vc-section--paper" id="doctrine">
      <div className="vc-section__head">
        <div className="vc-section__rule vc-section__rule--paper" />
        <div className="vc-eyebrow vc-eyebrow--paper">§ 02 &middot; THE DOCTRINE</div>
        <h2 className="vc-section__h2 vc-section__h2--paper">Three principles, taught in every brief.</h2>
        <p className="vc-section__sub vc-section__sub--paper">
          We're not a ship-review channel. We're not news. We're not lore. We're a working library of organizational lessons, with <em>Star Citizen</em> as the laboratory.
        </p>
      </div>

      <DoctrineList pillars={teaser} />

      <a className="vc-toc__open" href="doctrine.html">
        {/* Empty leading cell — matches the 64px number column on .vc-toc__row
            so the label aligns with the row body content above. */}
        <span className="vc-toc__open-spacer" aria-hidden="true" />
        <span className="vc-toc__open-body">
          <span className="vc-toc__open-lbl">OPEN&nbsp;THE&nbsp;FULL&nbsp;DOCTRINE&nbsp;LIBRARY</span>
          <span className="vc-toc__open-meta">{PILLARS.length}&nbsp;PRINCIPLES &middot; CROSS-INDEXED</span>
        </span>
        <span className="vc-toc__open-arrow">→</span>
      </a>
    </section>
  );
}

/* Dedicated page — full library on paper, with proper hero. */
function DoctrinePage() {
  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;LIBRARY
          </div>
          <h1 className="vc-suph__h1">The doctrine, in full.</h1>
          <p className="vc-suph__lede">
            Every principle taught in every brief, indexed and cross-referenced. The library grows as the channel does &mdash; numbers reflect citation count across published episodes.
          </p>
        </div>
      </section>

      <section className="vc-section vc-section--paper" style={{paddingTop: 88}}>
        <DoctrineList pillars={PILLARS} />
      </section>
    </React.Fragment>
  );
}

window.Doctrine = Doctrine;
window.DoctrinePage = DoctrinePage;