/* @jsx React.createElement */
/* About — "Who's behind this"
   Long-form editorial. Sub-page hero (dark) → dossier body (paper).
   Collective/anonymous bylines: a team, not a roster. */

/* The "uniforms" the team has worn. Used in the dossier sidebar. */
const UNIFORMS = [
  { cat: 'MILITARY',  body: "Platoon to staff. We've stood up units, run them, and stood them down." },
  { cat: 'CORPORATE', body: "Lieutenants to VPs. We've led teams, departments, and the cross-functional messes between them." },
  { cat: 'NONPROFIT', body: "Boards and operating teams. We've kept underfunded missions alive past their odds." },
  { cat: 'SCOUTS',    body: "Scout troops and youth orgs. The original volunteer leadership laboratory." },
  { cat: 'CIVIC',     body: "Civic groups and local government. The slow, unglamorous work that keeps a place a place." },
  { cat: 'ORGS',      body: "Clans, guilds, fleets. Star Citizen, EVE, MMOs going back two decades. Where this all clicked." },
];

function AboutPage() {
  return (
    <React.Fragment>
      {/* Sub-page hero — dark, editorial. Same chassis as Episodes page. */}
      <section className="vc-suph">
        <div className="vc-hero__grid" />
        <div className="vc-suph__inner vc-about__hero">
          <div className="vc-eyebrow">
            <span style={{color:'var(--c-signal)'}}>VOLUNTEER&nbsp;C2</span>
            &nbsp;&middot;&nbsp;&sect;&nbsp;ABOUT
            &nbsp;&middot;&nbsp;WHO'S&nbsp;BEHIND&nbsp;THIS
          </div>
          <p className="vc-about__deck">Volunteer C2 isn't one person's takes.</p>
          <h1 className="vc-suph__h1 vc-about__h1">
            Different uniforms.<br/>
            <em>Same fundamentals.</em>
          </h1>
        </div>
      </section>

      {/* Dossier body — on paper, two-column. Long-form editorial. */}
      <section className="vc-about">
        <div className="vc-about__inner">
          <aside className="vc-about__side">
            <div className="vc-about__doc">
              <div className="vc-about__doc-row"><span>DOSSIER</span><span>VC&middot;ABT&middot;001</span></div>
              <div className="vc-about__doc-row"><span>SUBJECT</span><span>THE&nbsp;TEAM</span></div>
              <div className="vc-about__doc-row"><span>BYLINE</span><span>COLLECTIVE</span></div>
              <div className="vc-about__doc-row"><span>FILED</span><span>2026&middot;Q2</span></div>
            </div>
            <div className="vc-about__rule" />
            <div className="vc-about__sidehead">UNIFORMS&nbsp;WORN</div>
            <ol className="vc-about__uniforms">
              {UNIFORMS.map(u => (
                <li key={u.cat} className="vc-about__uniform">
                  <div className="vc-about__uniform-cat">{u.cat}</div>
                  <div className="vc-about__uniform-body">{u.body}</div>
                </li>
              ))}
            </ol>
          </aside>

          <article className="vc-about__body">
            <p className="vc-about__lede">
              <span className="vc-about__dropcap">It</span>&rsquo;s a team of people who&rsquo;ve been on every side of the equation. We&rsquo;ve played games our entire lives. We&rsquo;ve climbed leadership chains in clans, guilds, fleets, and orgs. We&rsquo;ve volunteered in real-world organizations: boards, nonprofits, scout troops, civic groups. We&rsquo;ve led teams in the military and in the corporate world.
            </p>

            <p className="vc-about__p">
              What we keep finding is that the lessons travel. The volunteer leader keeping a Star&nbsp;Citizen org alive at 2&nbsp;AM is solving the same problem as the lieutenant running a platoon, the VP running a department, and the board chair trying to keep volunteers from burning out. <em>Different uniforms. Same fundamentals.</em>
            </p>

            <blockquote className="vc-about__pull">
              <span className="vc-about__pull-mark">&ldquo;</span>
              This is the resource we wish had existed when we were figuring it out the first time. We&rsquo;re not theorists. We&rsquo;ve earned the lessons &mdash; and the scars.
            </blockquote>

            <p className="vc-about__p">
              We believe volunteer organizations are some of the most underestimated structures in human life. People show up because they choose to, not because they're paid. That changes everything about how you lead. And the leaders who learn it well don't leave it in their head; they take it into their teams, their families, and their work.
            </p>

            {/* Signature block — collective, no names. */}
            <footer className="vc-about__sig">
              <div className="vc-about__sig-l">
                <div className="vc-about__sig-cs">CALLSIGN&nbsp;&mdash;&nbsp;VC2</div>
                <div className="vc-about__sig-by">SIGNED&nbsp;FOR&nbsp;THE&nbsp;CHANNEL</div>
              </div>
              <div className="vc-about__sig-r">
                <div className="vc-about__sig-stamp" aria-hidden="true">
                  <span className="vc-about__sig-stamp-top">FOR&nbsp;THE</span>
                  <span className="vc-about__sig-stamp-mid">TEAM</span>
                  <span className="vc-about__sig-stamp-bot">VC2</span>
                </div>
              </div>
            </footer>
          </article>
        </div>
      </section>

      {/* Tail CTA — same vocabulary as the home Support block, narrower copy. */}
      <section className="vc-support">
        <div className="vc-support__inner">
          <div className="vc-support__rule" aria-hidden="true" />
          <div className="vc-eyebrow">§ &middot; READER&nbsp;SUPPORTED</div>
          <h2 className="vc-support__h2">If the work earns a place on your wall, return the favor.</h2>
          <p className="vc-support__lede">
            No sponsors. No ads. One Patreon. The doctrine, the field notes, and the ledger stay free, ad-free, and citation-honest because patrons keep it that way.
          </p>
          <div className="vc-support__row">
            <a className="vc-cta vc-cta--lg" href="https://www.patreon.com/cw/VolunteerC2" target="_blank" rel="noopener">
              SUPPORT&nbsp;ON&nbsp;PATREON&nbsp;&rarr;
            </a>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}
window.AboutPage = AboutPage;