// pages-home.jsx — Home page (fully built)

const HomeMissionIcon = ({ name }) => {
  // Simple, original geometric icons — single accent color, line-drawn
  const stroke = "currentColor";
  const sw = 1.25;
  if (name === 'search') {
    return (
      <svg viewBox="0 0 56 56" width="56" height="56" fill="none" stroke={stroke} strokeWidth={sw}>
        <ellipse cx="28" cy="28" rx="22" ry="11" opacity="0.35" />
        <ellipse cx="28" cy="28" rx="14" ry="7"  opacity="0.55" />
        <ellipse cx="28" cy="28" rx="6"  ry="3"  />
        <line x1="3" y1="28" x2="53" y2="28" opacity="0.2" />
        <line x1="28" y1="6" x2="28" y2="50" opacity="0.2" />
      </svg>
    );
  }
  if (name === 'overwatch') {
    return (
      <svg viewBox="0 0 56 56" width="56" height="56" fill="none" stroke={stroke} strokeWidth={sw}>
        <path d="M28 6 L28 34" />
        <path d="M28 34 L14 50" />
        <path d="M28 34 L42 50" />
        <circle cx="28" cy="34" r="3" fill={stroke} stroke="none" />
        <path d="M10 14 L46 14" opacity="0.35" />
        <path d="M14 50 L42 50" opacity="0.25" strokeDasharray="2 3" />
      </svg>
    );
  }
  if (name === 'perimeter') {
    return (
      <svg viewBox="0 0 56 56" width="56" height="56" fill="none" stroke={stroke} strokeWidth={sw}>
        <rect x="8" y="14" width="40" height="28" opacity="0.5" />
        <rect x="8" y="14" width="40" height="28" strokeDasharray="3 4" opacity="0.35" />
        <circle cx="8"  cy="14" r="2.5" fill={stroke} stroke="none" />
        <circle cx="48" cy="14" r="2.5" fill={stroke} stroke="none" />
        <circle cx="48" cy="42" r="2.5" fill={stroke} stroke="none" />
        <circle cx="8"  cy="42" r="2.5" fill={stroke} stroke="none" />
        <circle cx="28" cy="28" r="3" />
      </svg>
    );
  }
  if (name === 'survey') {
    return (
      <svg viewBox="0 0 56 56" width="56" height="56" fill="none" stroke={stroke} strokeWidth={sw}>
        <path d="M6 16 L22 16 L22 28 L34 28 L34 40 L50 40" />
        <path d="M6 22 L26 22 L26 34 L46 34" opacity="0.4" />
        <circle cx="6"  cy="16" r="2" fill={stroke} stroke="none" />
        <circle cx="22" cy="16" r="2" fill={stroke} stroke="none" />
        <circle cx="22" cy="28" r="2" fill={stroke} stroke="none" />
        <circle cx="34" cy="28" r="2" fill={stroke} stroke="none" />
        <circle cx="34" cy="40" r="2" fill={stroke} stroke="none" />
        <circle cx="50" cy="40" r="2" fill={stroke} stroke="none" />
      </svg>
    );
  }
  if (name === 'isr') {
    return (
      <svg viewBox="0 0 56 56" width="56" height="56" fill="none" stroke={stroke} strokeWidth={sw}>
        <path d="M28 8 L28 48" opacity="0.4" />
        <path d="M8 28 L48 28" opacity="0.4" />
        <circle cx="28" cy="28" r="20" opacity="0.25" />
        <circle cx="28" cy="28" r="13" opacity="0.45" />
        <circle cx="28" cy="28" r="6" />
        <circle cx="28" cy="28" r="1.5" fill={stroke} stroke="none" />
        <path d="M28 8 L26 4 L30 4 Z" fill={stroke} stroke="none" />
      </svg>
    );
  }
  return null;
};

function PageHome() {
  const missions = [
    { k: 'search',    name: 'Search and Rescue', status: 'Validated', desc: 'Probability-driven search for a specific subject — lost person, downed aircrew, disaster survivor.' },
    { k: 'isr',       name: 'ISR',               status: 'Scoped',    desc: 'Persistent surveillance and change detection. Pattern-of-life, target tracking, early warning.' },
    { k: 'perimeter', name: 'Force Protection',  status: 'Scoped',    desc: 'Threat detection, area security, route security. Overwatch, perimeter, and route clearance are employment concepts within it.' },
    { k: 'survey',    name: 'Reality Capture',   status: 'Scoped',    desc: 'Systematic collection to build a picture of a physical environment — survey, damage assessment, inspection, monitoring.' },
  ];

  return (
    <div data-screen-label="01 Home">
      {/* HERO */}
      <section className="hero" data-screen-label="01.A Hero">
        <span className="crosshair" style={{ top: 96,  left: 32 }} />
        <span className="crosshair" style={{ top: 96,  right: 32 }} />
        <span className="crosshair" style={{ bottom: 96, left: 32 }} />

        <div className="wrap hero-inner">
          <div className="hero-eyebrow">
            <span className="ln"></span>
            <span>ADOS</span>
          </div>

          <h1 className="hero-wordmark">
            ERGANE<span className="div">/</span>SYSTEMS
          </h1>

          <p className="hero-headline">
            Mission Intelligence for Autonomous Operations.
          </p>

          <p className="hero-sub">
            Coordinate an entire fleet through one operator — turn a collection
            of assets into a single adaptive mission.
          </p>

          <div className="hero-ctas">
            <a className="btn btn--primary" href="#/platform">
              Explore ADOS <span className="arr">→</span>
            </a>
            <a className="btn" href="#/use-cases">
              See use cases
            </a>
          </div>
        </div>

        <div className="hero-foot">
          <div className="coord">
            <span>CAGE 214W5</span>
            <span>UEI UE21AG5NVF11</span>
            <span>CONUS</span>
          </div>
        </div>
        <span className="scroll-cue" />
      </section>

      {/* ADOS OVERVIEW */}
      <section className="section section--tight" data-screen-label="01.B ADOS overview">
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="sec-num">/ 01 — Platform</div>
              <h2 className="h2 sec-title">What ADOS does.</h2>
            </div>
            <div className="sec-lede lede">
              The Autonomous Distributed Orchestration System — ADOS — coordinates
              an unmanned fleet. It takes a given mission, splits it across every
              asset in the air, works their sensor feeds into a single picture, and
              adjusts the plan as the situation moves, running a fleet that would
              otherwise take an operator for every aircraft.
            </div>
          </div>

          <div className="g-3" style={{ gap: 0, border: '1px solid var(--line)' }}>
            <div className="card card--clean" style={{ border: 0, borderRight: '1px solid var(--line)' }}>
              <div className="eyebrow eyebrow--muted">The mission set</div>
              <div className="h3" style={{ marginTop: 10 }}>Defines the objective.</div>
              <p className="muted" style={{ marginTop: 12 }}>
                The mission set is your team's domain knowledge and objectives.
                Search and Rescue, ISR, Force Protection, and Reality Capture run
                on the same core.
              </p>
            </div>
            <div className="card card--clean" style={{ border: 0, borderRight: '1px solid var(--line)' }}>
              <div className="eyebrow">ADOS core</div>
              <div className="h3" style={{ marginTop: 10 }}>Commands the fleet.</div>
              <p className="muted" style={{ marginTop: 12 }}>
                ADOS tasks, retasks, and manages your assets — running a whole
                fleet without a hand on the controls.
              </p>
            </div>
            <div className="card card--clean" style={{ border: 0 }}>
              <div className="eyebrow eyebrow--muted">The asset interface</div>
              <div className="h3" style={{ marginTop: 10 }}>Connects any airframe.</div>
              <p className="muted" style={{ marginTop: 12 }}>
                Any asset connects, from a bare drone flown on direct commands to
                one running its own onboard autonomy. ADOS speaks the standard
                interfaces and coordinates the fleet without replacing what flies
                it.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* MISSION SETS */}
      <section className="section" data-screen-label="01.C Mission sets">
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="sec-num">/ 02 — Missions</div>
              <h2 className="h2 sec-title">Where ADOS works.</h2>
            </div>
            <div className="sec-lede lede">
              Every ADOS deployment composes from the same vocabulary. A platoon
              perimeter and a wildfire search share the same primitives — different
              tasking, same engine. Search and Rescue is validated; the rest are
              scoped.
            </div>
          </div>

          <div className="g-4">
            {missions.map((m, i) => (
              <div key={m.k} className="mission-card lift">
                <span className="num">MS-0{i + 1}</span>
                <div>
                  <div className="icon"><HomeMissionIcon name={m.k} /></div>
                  <div className="name">{m.name}</div>
                  <div className="desc">{m.desc}</div>
                </div>
                <div style={{ marginTop: 20 }}>
                  {m.status === 'Validated'
                    ? <span className="pill pill--ok"><span className="d" />Validated</span>
                    : <span className="pill"><span className="d" />Scoped</span>}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SAROS PROOF */}
      <section className="section" data-screen-label="01.D SAROS proof">
        <div className="wrap">
          <div className="card card--ticked proof" style={{ background: 'rgba(27, 32, 39, 0.85)' }}>
            <div className="eyebrow">/ 03 — Validated mission set</div>
            <h2 className="h2" style={{ marginTop: 14, marginBottom: 18 }}>
              Search and Rescue — the first <em className="serif-it">validated</em> ADOS mission set.
            </h2>
            <p className="lede" style={{ color: 'var(--text-1)' }}>
              Coordinated multi-asset search and rescue, running end to end on
              ADOS. In a 1,080-trial simulation — four terrain types, fleet sizes
              from three assets to twelve — coordinated search substantially
              outperformed uncoordinated effort. No field results are claimed.
            </p>
            <div style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a className="btn" href="mailto:info@erganesystems.com?subject=SAROS%20validation">Request validation data <span className="arr">→</span></a>
            </div>
          </div>
        </div>
      </section>

      {/* CONTACT */}
      <section className="section" data-screen-label="01.E Contact">
        <div className="wrap">
          <div className="divider" style={{ marginBottom: 28 }} />

          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'end' }}>
            <p className="lede">
              If your mission set looks like one of ours — or doesn't yet —
              we'd rather have the conversation than guess.
            </p>
            <a className="btn btn--primary" href="mailto:info@erganesystems.com">
              info@erganesystems.com <span className="arr">→</span>
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

window.PageHome = PageHome;