function MissionPage({ tweaks }) {
  return (
    <div className="page" data-screen-label="02 Mission">
      <section className="ihero">
        <div className="container">
          <div className="breadcrumb">
            <a href="#/"></a>
            <span className="sep"></span>
            <span className="cur">Mission</span>
          </div>
          <div className="ihero-grid ihero-grid--solo">
            <div>
              <Reveal>
                <h1>
                  Defending America<br />
                  <span className="em" style={{ fontFamily: "\"Inter Tight\"", fontWeight: 500, fontStyle: "normal", color: "#ede7da" }}>requires technology</span><br />
                  that's <span style={{ color: "var(--crimson)", fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 300 }}>born here</span>.
                </h1>
              </Reveal>
              <Reveal delay={100}>
                <p className="ihero-sub">
                  We build defense systems that American forces can actually deploy —
                  affordable, precise, and independent of foreign supply chains.
                </p>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      <section className={window.sClass("mission-challenge", tweaks)} data-section-id="mission-challenge">
        <div className="container">
          <div className="two-col" style={{ marginTop: 32, gridTemplateColumns: "1fr minmax(280px, 420px)", gap: 24, alignItems: "center" }}>
            <Reveal delay={80} className="body-text">
              <p className="lead" style={{ fontFamily: "Newsreader", fontSize: "30px", color: "#1b2c4a" }}>America's adversaries aren't waiting.</p>
              <p>
                Commercial drone technology has created asymmetric threats that
                existing defense systems weren't designed to handle. Hostile nations
                are fielding autonomous systems faster than we can counter them — and
                the old playbook doesn't work anymore.
              </p>
              <p>
                Ground-based counter-drone systems are expensive, immobile, and rely
                on brute-force jamming that disables friendly communications alongside
                hostile targets. Rigid robots are easily detected by sonar and visual
                surveillance. The market is full of solutions that cost millions per
                unit and can't scale against mass threats.
              </p>
              <p>
                <strong>We need systems that are cost-effective at scale, precise in
                their targeting, and American-built for national security.</strong>
              </p>
            </Reveal>
            <Reveal>
              <img src={(window.__resources && window.__resources.logoImg) || "assets/logo.png"} alt="America First Defense.AI" style={{ width: "100%", height: "auto", display: "block" }} />
            </Reveal>
          </div>
        </div>
      </section>

      <section className={window.sClass("mission-solution", tweaks)} data-section-id="mission-solution">
        <div className="container">
          <SHead>
            Two platforms.<br />
            <span className="em" style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 300, color: "var(--bone-dim)" }}>
              All-domain coverage.
            </span>
          </SHead>
          <Reveal>
            <p style={{
              fontFamily: "var(--font-display)", fontWeight: 300,
              fontSize: 18, lineHeight: 1.55, color: "var(--bone-dim)",
              maxWidth: 720, margin: "0 auto 40px", textAlign: "center"
            }}>
              Two proprietary defense technologies — developed at America's leading
              research institutions — that address these gaps head-on.
            </p>
          </Reveal>
        </div>
        <div className="platforms-grid">
          <Reveal className="platform-card crimson">
            <div className="pc-head">
              <div>
                <div className="pc-domain">Air Domain</div>
                <h3>Detachable<br />Drone Hijacker</h3>
              </div>
              <div className="pc-id"></div>
            </div>
            <p className="pc-desc">
              Airborne cyber payload that attaches to friendly drones and neutralizes
              hostile UAVs through protocol-level attacks — without disrupting
              friendly communications.
            </p>
            <ul className="pc-bullets">
              <li><span>Sub-watt power output</span></li>
              <li><span>Over 1,800m effective range</span></li>
              <li><span>Developed at Naval Postgraduate School</span></li>
              <li><span>Modular design</span></li>
            </ul>
            <div className="pc-foot">
              <a href="#/counter-drone" className="pc-cta">Learn More <Arr /></a>
            </div>
          </Reveal>
          <Reveal delay={120} className="platform-card">
            <div className="pc-head">
              <div>
                <div className="pc-domain">Ground & Subsurface</div>
                <h3>Soft Robotics<br />Platform</h3>
              </div>
              <div className="pc-id"></div>
            </div>
            <p className="pc-desc">
              Thermally actuated robots that move like organisms, not machines. They
              crawl like caterpillars and swim like fish — evading sonar and
              navigating environments where rigid robots fail.
            </p>
            <ul className="pc-bullets">
              <li><span>Low sonar cross-section</span></li>
              <li><span>Biomimetic locomotion</span></li>
              <li><span>Developed at NC State University</span></li>
              <li><span>Crawling and swimming variants</span></li>
            </ul>
            <div className="pc-foot">
              <a href="#/soft-robotics" className="pc-cta">Learn More <Arr /></a>
            </div>
          </Reveal>
        </div>
      </section>

      <section className={window.sClass("mission-doctrine", tweaks)} data-section-id="mission-doctrine">
        <div className="container">
          <SHead>
            Engineering priorities.
          </SHead>
        </div>
        <div className="principles" style={{ gridTemplateColumns: "repeat(2, 1fr)" }}>
          {[
          ["Low SWaP-C",
          "Size, weight, power, and cost matter. Our systems are designed to be small, light, and affordable — priced for real deployment at scale."],
          ["Precision Over Brute Force",
          "Protocol-level attacks instead of broadband jamming. Biomimetic stealth instead of rigid metal. Take out the enemy, leave friendlies alone."],
          ["Autonomy",
          "Systems that can identify targets and act without requiring a highly trained operator. The DDH autonomously identifies hostile signatures."],
          ["Modularity",
          "Technology that integrates with existing platforms instead of requiring a complete overhaul. The DDH attaches to any drone."]].
          map(([h, p]) =>
          <Reveal key={h} className="principle">
              <h4>{h}</h4>
              <p>{p}</p>
            </Reveal>
          )}
        </div>
      </section>

      <section className={window.sClass("mission-stewardship", tweaks)} data-section-id="mission-stewardship">
        <div className="container">
          <div className="two-col" style={{ display: "grid", gridTemplateColumns: "minmax(280px, 1fr) 1.2fr", gap: 64, alignItems: "start" }}>
            <Reveal delay={80}>
              <h2 style={{
                margin: 0, fontFamily: "var(--font-display)",
                fontWeight: 500, fontSize: "clamp(34px,5vw,64px)",
                letterSpacing: "-0.025em", lineHeight: 0.98, color: "var(--ink)"
              }}>
                Supply chain security<br />
                <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 300 }}>
                  isn't optional.
                </span>
              </h2>
            </Reveal>
            <Reveal delay={140}>
              <p style={{
                fontFamily: "var(--font-display)", fontWeight: 300,
                fontSize: 18, lineHeight: 1.65, color: "#3a3527", margin: "0 0 16px"
              }}>
                When critical components come from foreign sources — especially
                adversary nations — you're betting national security on geopolitical
                stability.
              </p>
              <p style={{
                fontFamily: "var(--font-display)", fontWeight: 300,
                fontSize: 18, lineHeight: 1.65, color: "#3a3527", margin: "0 0 24px"
              }}>
                Both of our platforms were developed at American research
                institutions: the Detachable Drone Hijacker at Naval Postgraduate
                School, and our soft robotics platform at NC State University.
              </p>
              <p style={{
                fontFamily: "var(--font-display)", fontWeight: 500,
                fontSize: 20, lineHeight: 1.5, color: "var(--ink)", margin: 0
              }}>We own the IP. We control the technology. No export complications. American technology for American defense.</p>
            </Reveal>
          </div>
        </div>
      </section>

      <section className={window.sClass("mission-market", tweaks)} data-section-id="mission-market" data-screen-label="Market">
        <div className="container">
          <SHead>
            The opportunity is{" "}
            <span style={{ color: "var(--crimson)" }}>now</span>.
          </SHead>
        </div>
        <div className="stats-grid">
          {[
          ["\n", "Federal Funding", "Expanding"],
          ["\n", "Market Demand", "Accelerating"],
          ["\n", "Industry Opportunity", "Growing"]].
          map(([ix, k, v], i) =>
          <Reveal key={i} className="stat-cell">
              <div className="ix">{ix}</div>
              <div className="k">{k}</div>
              <div className="v">{v}<span className="em">.</span></div>
            </Reveal>
          )}
        </div>
        <div className="container" style={{ marginTop: 40 }}>
          <Reveal>
            <p style={{
              fontFamily: "var(--font-display)", fontWeight: 300,
              fontSize: 17, lineHeight: 1.55, color: "#ffffff", maxWidth: 720, margin: "0 auto", textAlign: "center"
            }}>
              Counter-UAS is one of the fastest-growing defense segments. DoD, DHS,
              and critical infrastructure operators are actively seeking
              American-made solutions that can deploy at scale without breaking the
              budget.
            </p>
          </Reveal>
        </div>
      </section>

            <section className={window.ctaClass("mission-cta", tweaks)} data-section-id="mission-cta">
        <div className="topo-bg" />
        <div className="container" style={{ textAlign: "center" }}>
          <div className="cta-inner" style={{ marginTop: 40, display: "flex", flexDirection: "column", alignItems: "center" }}>
            <Reveal>
              <h2 style={{ color: "rgb(255, 255, 255)" }}>
                Ready to defend America <span className="em" style={{ color: "rgb(241, 241, 241)" }}>together</span>.
              </h2>
              <p style={{
                fontFamily: "var(--font-display)", fontWeight: 300,
                fontSize: 18, lineHeight: 1.5,
                maxWidth: 540, marginTop: 20, marginLeft: "auto", marginRight: "auto", textAlign: "center", color: "rgb(255, 255, 255)"
              }}>
                Partner with America First Defense.AI. Contact us to learn more.
              </p>
            </Reveal>
            <Reveal delay={120}>
              <div className="cta-actions" style={{ marginTop: 12, justifyContent: "center" }}>
                <a href="#/contact" className={tweaks?.accent === "crimson" ? "btn btn-crimson" : "btn"}>
                  Contact <Arr />
                </a>
                <a href="#/mission" className="btn btn-ghost">
                  Read Mission <Arr />
                </a>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </div>);

}

Object.assign(window, { MissionPage });