// pages-platform.jsx — Platform (ADOS core) scaffold with real content sections

function PagePlatform() {
  const services = [
    { name: 'Adaptive Mission Execution', desc: 'The operator sets what matters — the area, the objective, the priorities — and ADOS keeps the whole fleet working toward it, deciding moment to moment which asset should be where. As the situation changes and new information comes in, it re-decides on its own: shifting assets, re-prioritizing, closing the gaps. The operator directs the mission; ADOS runs it.' },
    { name: 'Sensor Fusion',              desc: 'Every asset sees something different — a thermal signature, a radio emission, movement against a treeline. ADOS merges those inputs into a single picture and marks how confident it is in each. Add an asset, swap the sensor mix mid-mission, bring hardware that\'s never flown together — the operator still works from one consistent picture. The fleet gets more complex underneath; the view on top stays the same.' },
    { name: 'Fleet Coordination',         desc: 'A mixed fleet is a coordination problem: fast assets and slow ones, wide sensors and narrow, full batteries and nearly empty. ADOS assigns each asset the work it\'s actually suited for, keeps them clear of each other in the air, and cycles them home to recharge on a schedule that never lets coverage drop to zero. Add or lose an asset mid-mission and the fleet re-balances around it. From one asset to fifty, the operator runs it the same way.' },
    { name: 'Mesh & C2 Integration',      desc: 'ADOS runs on the radios and the command software a unit already fields. It adds no new RF link and demands no new hardware — asset positions, detections, and status show up on the same tactical picture the team already uses. Pull a live video feed from any asset when you need eyes on something; leave it off when you don\'t, and it costs you nothing. It fits the kit you already trust, not the other way around.' },
    { name: 'Terrain & Geospatial Services', desc: 'Every mission happens over terrain, and terrain drives everything — where an asset can see from, where a subject is likely to be, what\'s reachable and what isn\'t. ADOS builds that terrain picture into how it plans, so the fleet works with the ground instead of against it. Bring maps if you have them. Go in blind — no maps, no prep — and the fleet maps the ground as it flies. You\'re working off what\'s actually there, not what a map assumed. Any terrain, any mission, mapped or not.' },
  ];

  const nodes = [
    { name: 'Asset Node',      coordinates: 'Nothing — onboard perception on the asset it rides', mounting: 'On-asset payload module',                          compute: 'Orin Nano-class, 10–15 W',       scale: 'Self' },
    { name: 'Fleet Node',      coordinates: 'A fleet of assets directly',                         mounting: 'Worn/carried · transit case · vehicle · aircraft', compute: 'ARM+NPU to Orin-class, 12–25 W', scale: '1–50+ assets' },
    { name: 'Federation Node', coordinates: 'Fleet Nodes',                                        mounting: 'Transit case · fixed mount · aircraft',            compute: 'Orin-class, 15–25 W+',           scale: 'Multiple fleets' },
  ];

  return (
    <div data-screen-label="02 Platform">
      {/* HERO */}
      <section className="section page-intro" data-screen-label="02.A Hero">
        <div className="wrap">
          <div className="eyebrow eyebrow--muted">/ Platform</div>
          <h1 className="display" style={{ fontSize: 'clamp(48px, 7vw, 112px)', marginTop: 16, marginBottom: 28 }}>
            ADOS — Autonomous Distributed<br/>Orchestration System.
          </h1>
          <p className="lede" style={{ maxWidth: '62ch' }}>
            ADOS is the mission-intelligence layer between the operator and the
            fleet. It turns one operator's intent into the coordinated action of
            every asset in the air — and holds that coordination together through
            lost comms, downed nodes, and changing tasking.
          </p>
          <div style={{ marginTop: 36, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <span className="pill"><span className="d" />Edge-deployed</span>
            <span className="pill"><span className="d" />Vehicle-agnostic</span>
          </div>
        </div>
      </section>

      {/* WHAT ADOS DOES */}
      <section className="section section--tight" data-screen-label="02.B What ADOS does">
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="sec-num">/ 01 — Intent</div>
              <h2 className="h2 sec-title">Command intent,<br/>not aircraft.</h2>
            </div>
            <div className="sec-lede lede">
              An operator says <em>scout ahead over that ridge.</em>{' '}
              <em>Don't let anything flank us.</em> <em>Find our man.</em> Those
              are intentions, not instructions — each one implies a hundred small
              decisions about which asset goes where, what to cover first, when to
              adjust. ADOS makes those decisions and keeps making them as the
              situation moves, so the operator commands the mission instead of
              flying the machines.
            </div>
          </div>
        </div>
      </section>

      {/* CORE SERVICES — 2x2+1 grid */}
      <section className="section" data-screen-label="02.C Core services">
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="sec-num">/ 02 — Services</div>
              <h2 className="h2 sec-title">Five core services.</h2>
            </div>
            <div className="sec-lede lede">
              The platform decomposes into a small number of services that compose
              into every mission ADOS runs.
            </div>
          </div>

          <div className="svc-grid">
            {services.map((s, i) => {
              const isLast = i === services.length - 1;
              return (
                <div
                  key={s.name}
                  className={'card card--clean svc' + (isLast ? ' svc--wide' : '')}
                >
                  <div className="meta" style={{ color: 'var(--wp)' }}>S-0{i + 1}</div>
                  <div className="h3" style={{ marginTop: 10 }}>{s.name}</div>
                  <p className="muted svc-desc" style={{ marginTop: 14 }}>{s.desc}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* AUTONOMY PATTERNS */}
      <section className="section" data-screen-label="02.D Autonomy patterns">
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="sec-num">/ 03 — Patterns</div>
              <h2 className="h2 sec-title">Tactics the fleet<br/>already knows.</h2>
            </div>
            <div className="sec-lede lede">
              ADOS composes fleet behavior from the tactics operators already use
              — the standard plays for screening, searching, securing, and
              covering an advance. A mission calls the plays; ADOS runs them
              across the fleet, several at once when the situation calls for it.
            </div>
          </div>
        </div>
      </section>

      {/* NODE FAMILY TABLE */}
      <section className="section" data-screen-label="02.E Node family">
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="sec-num">/ 04 — Nodes</div>
              <h2 className="h2 sec-title">The node family.</h2>
            </div>
            <div className="sec-lede lede">
              The same ADOS coordination runs across every node — the difference
              is what each one coordinates, and where it's mounted. Larger nodes
              federate the smaller ones beneath them.
            </div>
          </div>

          <div style={{ overflowX: 'auto', border: '1px solid var(--line)' }}>
            <table className="tbl">
              <thead>
                <tr>
                  <th>Node</th>
                  <th>Coordinates</th>
                  <th>Mounting configurations</th>
                  <th>Compute class</th>
                  <th>Fleet scale</th>
                </tr>
              </thead>
              <tbody>
                {nodes.map((n) => (
                  <tr key={n.name}>
                    <td data-label="Node" style={{ color: 'var(--text)' }}>{n.name}</td>
                    <td data-label="Coordinates">{n.coordinates}</td>
                    <td data-label="Mounting">{n.mounting}</td>
                    <td data-label="Compute">{n.compute}</td>
                    <td data-label="Fleet scale" style={{ color: 'var(--wp)' }}>{n.scale}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="meta muted-2" style={{ marginTop: 16, maxWidth: '78ch', textTransform: 'none', letterSpacing: '0.02em', lineHeight: 1.6 }}>
            Nodes are classified by coordination role — Asset, Fleet,
            Federation — not by where they're mounted. A Fleet Node worn by a
            dismounted operator and one in a vehicle transit case are the same
            tier in different mounting configurations. Fleet size scales
            continuously; it is not fixed per tier.
          </div>
        </div>
      </section>

      {/* FEDERATION */}
      <section className="section" data-screen-label="02.F Federation">
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="sec-num">/ 05 — Federation</div>
              <h2 className="h2 sec-title">Nodes work together,<br/>or alone.</h2>
            </div>
            <div className="sec-lede lede">
              When several nodes operate in the same area, they coordinate —
              sharing what each one sees, dividing coverage so no one doubles up,
              and handing one node the lead when the mission needs a single
              picture. No central server, no single point to knock out. Any node
              can step up or step back as the situation demands.
            </div>
          </div>
        </div>
      </section>

      {/* INTEGRATION */}
      <section className="section" data-screen-label="02.G Integration">
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="sec-num">/ 06 — Integration</div>
              <h2 className="h2 sec-title">Plugs into the stack<br/>you already run.</h2>
            </div>
            <div className="sec-lede lede">
              ADOS sits between your command software and your aircraft, and
              speaks to both in what they already use — up to the common
              operating picture, down to the flight controls. No new radio, no
              new ground station.
            </div>
          </div>

          <div className="g-3">
            <div className="card">
              <div className="card-eyebrow"><span className="dot" />Up · to the COP</div>
              <div className="h3">TAK / Lattice</div>
              <p className="muted" style={{ marginTop: 12 }}>
                Cursor-on-Target (CoT) messages into TAK / ATAK. Lattice entity
                publishing via SDK where the host hardware supports it.
              </p>
              <div className="tag-list" style={{ marginTop: 18 }}>
                <span className="tag">CoT</span>
                <span className="tag">TAK / ATAK</span>
                <span className="tag">Lattice SDK</span>
              </div>
            </div>
            <div className="card">
              <div className="card-eyebrow"><span className="dot" />Down · to flight control</div>
              <div className="h3">MAVLink / DDS</div>
              <p className="muted" style={{ marginTop: 12 }}>
                MAVLink 2.0 component discovery and command. DDS service discovery
                for ROS 2 integration. RAS-A Interoperability Profile compliance
                target.
              </p>
              <div className="tag-list" style={{ marginTop: 18 }}>
                <span className="tag">MAVLink 2.0</span>
                <span className="tag">DDS / ROS 2</span>
                <span className="tag">RAS-A IOP</span>
              </div>
            </div>
            <div className="card">
              <div className="card-eyebrow"><span className="dot" />Hardware interface</div>
              <div className="h3">Four-tier depth</div>
              <p className="muted" style={{ marginTop: 12 }}>
                T1 Blue UAS / MAVLink native · T2 companion compute with SDK ·
                T3 closed vendor stacks (integration path varies by vendor) ·
                T4 large-airframe sensor feeds (Group 4–5 / manned ISR).
              </p>
              <div className="tag-list" style={{ marginTop: 18 }}>
                <span className="tag">T1–T4</span>
                <span className="tag">Blue UAS</span>
                <span className="tag">Group 1–5</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* VALIDATION POINTER */}
      <section className="section section--tight" data-screen-label="02.H Validation">
        <div className="wrap">
          <p className="lede">
            Search and Rescue is validated — <a className="lnk" href="mailto:info@erganesystems.com?subject=SAROS%20validation">request the data <span className="arr">→</span></a>
          </p>
        </div>
      </section>
    </div>
  );
}

window.PagePlatform = PagePlatform;