// pages-usecases.jsx — Mission Sets page

function PageUseCases() {
  // Segment keys are an array per case: a case can serve several customers.
  const useCases = [
    // Search and Rescue
    { seg: ['SC', 'CF'], name: 'Personnel recovery (CSAR)', profile: 'Search and Rescue',
      blurb: 'An isolated service member down in denied territory, and a clock that\'s already running. ADOS coordinates the fleet to search where they\'re most likely to be — reading terrain and behavior, tightening the picture as sensors report back — so the recovery force moves to a location, not a guess.' },
    { seg: ['CE'], name: 'Wilderness search', profile: 'Search and Rescue',
      blurb: 'A hiker overdue, a child lost off a trail, weather closing in. ADOS searches the ground the way an experienced team would — weighting where a lost person actually tends to go — and covers in an afternoon what a ground search would take days to cross.' },
    { seg: ['CE'], name: 'Coast Guard maritime search', profile: 'Search and Rescue',
      blurb: 'Someone in the water, and a search area that\'s drifting with the current. ADOS accounts for how the water moves the target over time and coordinates the fleet across an expanse no single aircraft could cover before the window closes.' },
    { seg: ['LE'], name: 'Fugitive / missing person search', profile: 'Search and Rescue',
      blurb: 'A subject on foot in terrain that could hide them a dozen ways. ADOS coordinates a systematic search across the area — urban, suburban, or open ground — covering every place they could be faster than a line of searchers on the ground.' },

    // ISR
    { seg: ['SC', 'LE'], name: 'Pre-mission surveillance', profile: 'ISR',
      blurb: 'A target that needs watching before anyone moves on it. ADOS holds persistent eyes on a compound or site, building the pattern of who comes and goes and when, so the plan is built on what the place actually does — not on a single snapshot.' },
    { seg: ['CF', 'SC'], name: 'Forward area reconnaissance', profile: 'ISR',
      blurb: 'Ground ahead of the main body that no one\'s laid eyes on yet. ADOS coordinates the fleet to map what\'s out there — threat positions, terrain, routes — and gets it back before the element commits, not after.' },
    { seg: ['LE'], name: 'Pursuit tracking', profile: 'ISR',
      blurb: 'A subject running, and a chase that outpaces any single aircraft. ADOS hands the track from asset to asset as the subject moves, keeping unbroken eyes-on across the pursuit so the ground units always know where it\'s going.' },
    { seg: ['CE', 'CF'], name: 'Maritime domain awareness', profile: 'ISR',
      blurb: 'A stretch of open water that has to be watched — shipping lanes, a coastline, an approach. ADOS holds persistent coverage across an area no single asset could cover, tracks what\'s moving through it, and flags the vessel that\'s behaving wrong. Continuity over hours, across a fleet, without an operator tied to each aircraft.' },

    // Force Protection
    { seg: ['SC', 'LE', 'CF'], name: 'Small-unit overwatch', profile: 'Force Protection',
      blurb: 'A small team on the move — a patrol, an assault element, a tactical unit pushing into a structure. ADOS keeps eyes overhead as they go, watching the ground ahead and the flanks, flagging movement before it becomes a problem. The team gets early warning without pulling anyone off the mission to fly it.' },
    { seg: ['SC'], name: 'Objective isolation', profile: 'Force Protection',
      blurb: 'A target being worked, and a boundary that can\'t leak. ADOS holds coverage around the objective, watching for anyone slipping out across the line and flagging it to the assault element in time to matter.' },
    { seg: ['CF', 'SC'], name: 'CASEVAC overwatch', profile: 'Force Protection',
      blurb: 'A casualty being moved, a route and a landing zone that have to stay clear, and no time to spare. ADOS covers the corridor and the LZ as the evacuation runs — eyes on the ground the wounded are moving through, so the team can focus on the wounded.' },
    { seg: ['CF'], name: 'Area security / digital OP line', profile: 'Force Protection + ISR',
      blurb: 'Key terrain that has to be held under watch — intersections, chokepoints, high ground — more points than a team can man. ADOS keeps persistent coverage across all of them at once, a line of observation posts flown instead of manned.' },

    // Reality Capture
    { seg: ['CE'], name: 'Disaster damage assessment', profile: 'Reality Capture',
      blurb: 'A disaster zone where the first question is how bad, and where. ADOS runs systematic coverage across the affected area and brings back complete, current imagery — the picture response teams need to put resources where they\'ll matter most.' },
    { seg: ['CE'], name: 'Critical infrastructure inspection', profile: 'Reality Capture',
      blurb: 'The dams, bridges, pipelines, and power sites that have to be checked on a schedule, most of them awkward or dangerous to reach. ADOS surveys them systematically from the air — thorough, repeatable, and without putting an inspector somewhere risky.' },
    { seg: ['CF', 'SC'], name: 'Battle damage assessment', profile: 'Reality Capture',
      blurb: 'After an action, the question is what the effect actually was. ADOS runs systematic coverage of the area and brings back the imagery to answer it — complete, current, and organized for the tools that turn it into an assessment.' },
    { seg: ['SC', 'CF'], name: 'Route & zone reconnaissance', profile: 'Reality Capture',
      blurb: 'Ground nobody\'s characterized yet — a route the element has to move through, terrain that has to be crossed, a strip that might take aircraft or a site for an austere airfield. ADOS surveys it from the air and reports what it\'ll actually support: where\'s passable, what\'s changed, whether that patch of ground can take what you need to put on it. The picture builds as the fleet flies it, not from a map that may be years old.' },

    // Multi-Domain
    { seg: ['CE'], name: 'Disaster response', profile: 'Search and Rescue + Reality Capture',
      blurb: 'A disaster is two problems at once: find the people, and map the damage. ADOS runs both from the same fleet — searching for survivors where they\'re likely to be while systematically capturing the state of the ground for the teams coordinating the response.' },
    { seg: ['CF', 'SC'], name: 'Urban clearance support', profile: 'Force Protection + Reality Capture',
      blurb: 'Infantry moving building to building through terrain that hides threats in three dimensions. ADOS scans ahead and above as they clear — rooftops, windows, alleys — while building the map of what\'s been covered, so the element always knows what\'s at their back.' },
    { seg: ['CE'], name: 'Wildfire', profile: 'Reality Capture + ISR',
      blurb: 'A fire that\'s moving and changing by the hour. ADOS maps the fire\'s edge, finds new hotspots as they flare, and reads the terrain the fire is moving into — feeding incident command a live picture instead of a report that\'s already stale. It works the active fight and the longer management effort the same way.' },
    { seg: ['LE', 'CE', 'CF'], name: 'Area & boundary monitoring', profile: 'Force Protection + ISR',
      blurb: 'A place or a line that has to stay watched — a public event, a port, a stretch of border, a fixed site. ADOS holds persistent coverage across the whole area, spots what crosses or doesn\'t belong, and alerts the team when something needs a look. One operator watches ground that would otherwise take a line of them.' },
  ];

  const segLabel = {
    SC: 'Special & Clandestine',
    CF: 'Conventional Forces',
    LE: 'Law Enforcement',
    CE: 'Civil & Emergency',
  };
  const segOrder = ['SC', 'CF', 'LE', 'CE'];

  // Case numbers are assigned once from the master array, before grouping, so a
  // case keeps the same UC number wherever it is rendered.
  const numbered = useCases.map((u, i) => ({ ...u, uc: String(i + 1).padStart(2, '0') }));
  const caseAt = (n) => numbered[n - 1];

  // Cases run under their primary mission set. A case that composes two sets
  // sits in Multi-Domain, with the composition shown in its "Mission sets" line.
  const sections = [
    {
      k: 'sar', name: 'Search and Rescue',
      cases: [1, 2, 3, 4],
      intro: 'Search and rescue is a race against probability. A person is somewhere in a wide area, the odds fall with every hour, and the search has to cover the ground that matters before the window closes. ADOS coordinates the fleet to search where the subject is most likely to be, reading terrain and how people move, and sharpening the picture as it goes.',
    },
    {
      k: 'isr', name: 'ISR',
      cases: [5, 6, 7, 8],
      intro: 'Some missions aren\'t about finding one thing — they\'re about watching. A target, a route, a stretch of ground, held under observation long enough to learn its pattern and catch what changes. ADOS keeps persistent eyes across an area over hours, tracking what moves through it and flagging what\'s different from the last look, so nothing important happens unseen.',
    },
    {
      k: 'fp', name: 'Force Protection',
      cases: [9, 10, 11, 12],
      intro: 'Force protection is about seeing the threat before it arrives. Something has to be kept safe, the danger can come from any direction, and the warning is only useful if it comes in time to act. ADOS holds continuous coverage around what\'s being protected and watches the ground for what shouldn\'t be there — early warning across more space than a team could watch on its own.',
    },
    {
      k: 'rc', name: 'Reality Capture',
      cases: [13, 14, 15, 16],
      intro: 'Sometimes the deliverable is the picture itself — a complete, current record of a place, captured thoroughly enough to make decisions from. ADOS coordinates the fleet to cover an area completely, missing nothing, and organizes what it gathers for the people and tools that turn it into maps and assessments. It builds the record; the record drives the decision.',
    },
    {
      k: 'md', name: 'Multi-Domain',
      cases: [17, 18, 19, 20],
      intro: 'Some missions don\'t fit in one box — they need two mission sets running at once, on the same fleet, at the same time. That\'s the payoff of building a platform instead of a product: the pieces compose. When a job spans domains, ADOS doesn\'t reach for a second system. It runs both together.',
    },
  ];

  const [seg, setSeg] = React.useState('all');
  const filtered = numbered.filter((u) => u.seg.indexOf(seg) !== -1);

  const UseCaseCard = ({ u }) => (
    <div className="uc">
      <div className="uc-l">
        <div className="meta" style={{ color: 'var(--wp)' }}>
          {u.seg.join(' · ')} · UC-{u.uc}
        </div>
        <div className="uc-name">{u.name}</div>
        <p className="muted">{u.blurb}</p>
      </div>
      <div className="uc-r">
        <div className="uc-row">
          <span className="k">{u.profile.indexOf('+') === -1 ? 'Mission set' : 'Mission sets'}</span>
          <span className="v">{u.profile}</span>
        </div>
        <div className="uc-row">
          <span className="k">Segment</span>
          <span className="v">{u.seg.map((s) => segLabel[s]).join(' · ')}</span>
        </div>
      </div>
    </div>
  );

  return (
    <div data-screen-label="03 Mission Sets">
      {/* HERO */}
      <section className="section page-intro" data-screen-label="03.A Hero">
        <div className="wrap">
          <div className="eyebrow eyebrow--muted">/ Mission sets</div>
          <h1 className="display" style={{ fontSize: 'clamp(48px, 7vw, 112px)', marginTop: 16, marginBottom: 28 }}>
            One platform. Every mission.
          </h1>
          <p className="lede">
            ADOS runs the coordination; a mission set points it at the job. The
            same core extends across every mission set on the platform. Find
            yours below, or filter by who you are.
          </p>

          <div className="filter-bar" style={{ marginTop: 36, marginBottom: 0 }}>
            <button className={seg === 'all' ? 'on' : ''} onClick={() => setSeg('all')}>All</button>
            {segOrder.map((k) => (
              <button key={k} className={seg === k ? 'on' : ''} onClick={() => setSeg(k)}>
                {segLabel[k]}
              </button>
            ))}
          </div>

          {/* Same state, same options — CSS shows the buttons above 720px and
              this below, where five of them wrap to four rows. */}
          <select
            className="filter-select"
            aria-label="Filter by customer segment"
            value={seg}
            onChange={(e) => setSeg(e.target.value)}
            style={{ marginTop: 36, marginBottom: 0 }}
          >
            <option value="all">All</option>
            {segOrder.map((k) => <option key={k} value={k}>{segLabel[k]}</option>)}
          </select>
        </div>
      </section>

      {seg === 'all' ? (
        /* GROUPED VIEW — five collapsible mission-set groups */
        sections.map((s, si) => (
          <section
            key={s.k}
            className={si === 0 ? 'section section--tight' : 'section'}
            data-screen-label={'03.' + 'BCDEF'[si] + ' ' + s.name}
          >
            <div className="wrap">
              <details open className="ms-group">
                <summary className="ms-summary">
                  <span>
                    <span className="eyebrow" style={{ marginRight: 16 }}>0{si + 1}</span>
                    {s.name}
                  </span>
                  <span className="meta vignette-toggle" />
                </summary>
                <div style={{ padding: '0 32px 32px' }}>
                  <p className="lede" style={{ maxWidth: '70ch', marginBottom: 32 }}>{s.intro}</p>
                  <div className="g-2">
                    {s.cases.map((n) => <UseCaseCard key={n} u={caseAt(n)} />)}
                  </div>
                </div>
              </details>
            </div>
          </section>
        ))
      ) : (
        /* FILTERED VIEW — one segment's cards, standalone */
        <section className="section section--tight" data-screen-label={'03.B ' + segLabel[seg]}>
          <div className="wrap">
            <div className="g-2">
              {filtered.map((u) => <UseCaseCard key={u.uc} u={u} />)}
            </div>
          </div>
        </section>
      )}

      {/* BY REQUEST */}
      <section className="section section--tight" data-screen-label="03.G Validation">
        <div className="wrap">
          <div className="card card--ticked req-card">
            <div>
              <div className="eyebrow">/ 06 — Validation</div>
              <div className="h2" style={{ marginTop: 10 }}>The full Search and Rescue validation</div>
              <p className="muted" style={{ marginTop: 12, maxWidth: '52ch' }}>
                Methodology, terrain and fleet-size breakdowns, and complete
                results from the 1,080-trial validation — the detail behind the
                summary on the home page. Available on request.
              </p>
            </div>
            <a className="btn btn--primary" href="mailto:info@erganesystems.com?subject=SAROS%20validation">Request validation data <span className="arr">→</span></a>
          </div>
        </div>
      </section>
    </div>
  );
}

window.PageUseCases = PageUseCases;
