// pages-about.jsx — About page

function PageAbout() {
  return (
    <div data-screen-label="05 About">
      {/* HERO */}
      <section className="section page-intro" data-screen-label="05.A Hero">
        <div className="wrap">
          <div className="eyebrow eyebrow--muted">/ About</div>
          <h1 className="display" style={{ fontSize: 'clamp(48px, 7vw, 112px)', marginTop: 16, marginBottom: 28 }}>
            In service of the mission.
          </h1>
          <p className="lede">
            Search and rescue. Personnel recovery. Area security. Disaster
            response. These missions have nothing in common on the surface, but
            they share a shape: they're difficult, they run against the clock,
            and there's something real on the line — often a life. The
            environments are unforgiving and the margin for error is thin.
            That's the work we build for. Not the version that behaves on a test
            range, but the one that has to hold up when conditions are at their
            worst and it matters most.
          </p>
        </div>
      </section>

      {/* 01 — REACH */}
      <section className="section section--tight" data-screen-label="05.B Reach">
        <div className="wrap">
          <div className="eyebrow">/ 01 — Reach</div>
          <h2 className="h2" style={{ marginTop: 14, marginBottom: 28 }}>Reach.</h2>
          <p className="lede" style={{ maxWidth: '64ch' }}>
            There's a reason these missions put machines in the air. A person on
            the ground can only be in one place, see so far, cover so much
            before the clock runs out. An asset overhead lifts that ceiling — it
            sees what the operator can't, reaches ground that would put a person
            at risk, and covers in minutes what a team on foot covers in hours.
            It turns searching into finding and guesswork into knowing. Every
            drone in the sky is there for the same reason: to extend what a
            person is capable of contributing to a mission that matters. The
            machine is an instrument of the operator's intent, and its whole
            value is measured by how much further that intent can reach because
            of it.
          </p>
        </div>
      </section>

      {/* 02 — THE COORDINATION LIMIT */}
      <section className="section" data-screen-label="05.C The coordination limit">
        <div className="wrap">
          <div className="eyebrow">/ 02 — The Coordination Limit</div>
          <h2 className="h2" style={{ marginTop: 14, marginBottom: 28 }}>The coordination limit.</h2>
          <p className="lede" style={{ maxWidth: '64ch' }}>
            But reach has a cost, and the cost is attention. Every asset in the
            air is one more thing to fly, watch, and account for, and a single
            operator can only hold so many at once. Adding people doesn't
            cleanly solve it — more aircraft sharing the same airspace means
            more paths to keep from crossing and more assignments to track, and
            the coordination burden climbs faster than headcount can answer it.
            It isn't a problem you can divide into smaller pieces and hand out;
            the whole picture has to live somewhere, and past a certain fleet
            size it stops fitting in any number of heads at once. The reach was
            supposed to free the operator to run the mission. Instead it buries
            them in the machinery of keeping the fleet aloft.
          </p>
        </div>
      </section>

      {/* 03 — BEYOND THE LIMIT */}
      <section className="section" data-screen-label="05.D Beyond the limit">
        <div className="wrap">
          <div className="eyebrow">/ 03 — Beyond the Limit</div>
          <h2 className="h2" style={{ marginTop: 14, marginBottom: 28 }}>Beyond the limit.</h2>
          <p className="lede" style={{ maxWidth: '64ch' }}>
            This is the work ADOS takes off their hands. It runs the
            coordination itself — assigning assets, working the sensor returns,
            deconflicting the airspace, and adapting as the situation moves —
            and it does it for ten aircraft as readily as one. The operator
            stops flying machines and goes back to running the mission. What
            comes back isn't just the same job with less strain, though it's
            that too. The fleet covers more ground and covers it faster, reports
            back as a single coherent picture instead of a dozen disconnected
            feeds, and holds steady at a size no team could manage by hand. And
            past the point where coordination would simply break down for
            people, it opens missions that couldn't have been run at all — not a
            better version of the old work, but work that wasn't on the table
            before.
          </p>
        </div>
      </section>

      {/* BELIEFS — interstitial block, not a numbered section */}
      <section className="section section--tight" data-screen-label="05 Beliefs">
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 28 }}>/ 04 — What we hold to</div>

          <div className="g-2">
            <div className="card lift">
              <div className="card-eyebrow"><span className="dot" />Belief</div>
              <div className="h3">It survives contact.</div>
              <p className="muted" style={{ marginTop: 12 }}>
                Coordination that needs full comms and a stable fleet isn't
                coordination — it's a demo. We build the version that holds when
                the network drops, a node fails, and the plan changes
                mid-mission.
              </p>
            </div>
            <div className="card lift">
              <div className="card-eyebrow"><span className="dot" />Belief</div>
              <div className="h3">It speaks the operator's language.</div>
              <p className="muted" style={{ marginTop: 12 }}>
                The doctrine already exists. We build the substrate that lets a
                fleet execute it, so the system fits the way people already work
                instead of asking them to work its way.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* 04 — THE HUMAN ELEMENT */}
      <section className="section" data-screen-label="05.E The human element">
        <div className="wrap">
          <div className="eyebrow">/ 05 — The Human Element</div>
          <h2 className="h2" style={{ marginTop: 14, marginBottom: 28 }}>The human element.</h2>
          <p className="lede" style={{ maxWidth: '64ch' }}>
            None of this is about taking the person out. It's about what the
            person is left free to do. Judgment, the call that carries weight,
            the decision that shouldn't be automated and the responsibility that
            can't be handed off — that's the part of the mission only a human
            can hold, and it's exactly the part that gets crowded out when the
            operator is heads-down managing machines. Automating the
            coordination is how you give that attention back. The machines do
            the coordinating. The people do the deciding. That's the arrangement
            worth building toward, and it's the one we build for.
          </p>

          <div style={{ marginTop: 36 }}>
            <a className="btn btn--primary" href="mailto:info@erganesystems.com">
              info@erganesystems.com <span className="arr">→</span>
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

window.PageAbout = PageAbout;
