function HomePage({ tweaks }) {
  // Wire pointer-tracking on platform cards for the radial cursor glow.
  React.useEffect(() => {
    const cards = document.querySelectorAll('.platform-card');
    const handlers = [];
    cards.forEach((el) => {
      const onMove = (e) => {
        const r = el.getBoundingClientRect();
        el.style.setProperty('--mx', `${(e.clientX - r.left) / r.width * 100}%`);
        el.style.setProperty('--my', `${(e.clientY - r.top) / r.height * 100}%`);
      };
      el.addEventListener('pointermove', onMove);
      handlers.push([el, onMove]);
    });
    return () => handlers.forEach(([el, fn]) => el.removeEventListener('pointermove', fn));
  }, []);
  return (
    <div data-screen-label="01 Home">
      {/* HERO */}
      <section className="hero" data-screen-label="Hero">
        <div className="hero-img">
          <img src={window.__resources && window.__resources.heroImg || "assets/hero.png"} alt="" />
        </div>

        <div className="hero-meta-strip" style={{ display: tweaks?.showStatus === false ? "none" : undefined }}>
          <div>
            <div className="k">Sortie</div>
            <div className="v">AFD–001</div>
          </div>
          <div>
            <div className="k">Origin</div>
            <div className="v">NPS · NCSU</div>
          </div>
          <div>
            <div className="k">Domain</div>
            <div className="v">Air · Ground · Subsurface</div>
          </div>
          <div>
            <div className="k">Status</div>
            <div className="v live" style={{ color: "#7fd99a" }}>OPERATIONAL</div>
          </div>
        </div>

        <div className="hero-body">
          <div className="container hero-content">
            <Reveal delay={80}>
              <h1 className="hero-h" style={{ fontFamily: "Newsreader", fontWeight: "300" }}>
                Defense systems<br />
                <span className="em-italic">born here</span>,{" "}
                <span className="em-crimson em-italic" style={{ fontWeight: "300", fontFamily: "Newsreader" }}>built here</span>,<br />
                <span className="em-italic" style={{ color: "#c8c1b2" }}>owned</span> <span className="em-italic">here</span>.
              </h1>
            </Reveal>
            <Reveal delay={160}>
              <div className="hero-sub">
                <p>
                  Next-generation airborne counter-drone systems and biomimetic
                  soft robotics. American IP. American institutions.
                  Engineered for the conflicts of the next decade.
                </p>
              </div>
            </Reveal>
            <Reveal delay={240}>
              <div className="hero-actions">
                <a href="#/contact" className={tweaks.accent === "crimson" ? "btn btn-crimson" : "btn"}>
                  Contact Us <Arr />
                </a>
                <a href="#/mission" className="btn btn-ghost">
                  Our Mission <Arr />
                </a>
              </div>
            </Reveal>
          </div>
        </div>

        <div className="hero-bottom">
          <div className="hero-platforms">
            <a href="#/counter-drone" className="hero-platform">
              <div className="ix">// 01</div>
              <div>
                <div className="nm">Detachable Drone Hijacker</div>
                <small>Air Domain · Counter-UAS</small>
              </div>
              <div className="arr-w">
                <Arr size={12} />
              </div>
            </a>
            <a href="#/soft-robotics" className="hero-platform">
              <div className="ix">// 02</div>
              <div>
                <div className="nm">Thermally Actuated Soft Robotics</div>
                <small>Ground · Subsurface</small>
              </div>
              <div className="arr-w">
                <Arr size={12} />
              </div>
            </a>
          </div>
        </div>
      </section>

      {/* MARQUEE */}
      {tweaks?.showMarquee !== false &&
      <div className="marquee">
        <div className="marquee-track">
          {[..."abcd"].map((k) =>
          <React.Fragment key={k}>
              <div className="marquee-item"><span className="star">★</span> American-Owned</div>
              <div className="marquee-item"><span className="star">★</span> American-Made</div>
              <div className="marquee-item"><span className="star">★</span> Built for America</div>
              <div className="marquee-item"><span className="star">★</span> Naval Postgraduate School</div>
              <div className="marquee-item"><span className="star">★</span> NC State University</div>
            </React.Fragment>
          )}
        </div>
      </div>
      }

      {/* CREED — bone background */}
      <section className={window.sClass("home-creed", tweaks)} data-section-id="home-creed" data-screen-label="Creed">
        <div className="container">
          <Reveal className="creed">
            <h3>
              Defending America requires technology that is{" "}
              <span className="em" style={{ color: "var(--navy-flag)", fontWeight: "400" }}>born here</span>,{" "}
              <span className="em-c" style={{ fontFamily: "Newsreader", fontStyle: "italic" }}>built here</span>, and{" "}
              <span className="em" style={{ fontFamily: "Newsreader", fontWeight: "400", color: "var(--navy-flag)" }}>owned here</span>.
            </h3>
            <p style={{
              margin: 0, fontFamily: "var(--font-display)",
              fontWeight: 300, fontSize: "clamp(18px, 1.6vw, 22px)",
              lineHeight: 1.5, color: "#3a3527", maxWidth: 780
            }}>
              We build advanced defense systems — airborne counter-drone technology
              and biomimetic soft robotics — developed at America's leading research
              institutions. Engineered for real deployment, not demonstration.
            </p>
            <div className="creed-meta">
              <div>Origin<strong>Naval Postgraduate School · NC State University</strong></div>
              <div>Domain<strong>Air · Ground · Subsurface</strong></div>
              <div>Stewardship<strong>100% American-Owned IP</strong></div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* PLATFORMS */}
      <section className={window.sClass("home-platforms", tweaks)} data-section-id="home-platforms" data-screen-label="Platforms">
        <div className="container">
          <SHead id="" eyebrow="">
            Two systems.<br />
            <span className="em" style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 300, color: "var(--bone-dim)" }}>
              All-domain coverage.
            </span>
          </SHead>
        </div>

        <div className="platforms-grid">
          <Reveal className="platform-card crimson">
            <div className="pc-sheen" />
            <div className="pc-head">
              <div>
                <div className="pc-domain">Air Domain · Counter-UAS</div>
                <h3>Detachable<br />Drone Hijacker</h3>
              </div>
              <div className="pc-id"></div>
            </div>
            <p className="pc-desc">
              Airborne electronic warfare payload that attaches to friendly drones
              and neutralizes hostile UAVs through protocol-level cyber attacks.
            </p>
            <div className="pc-stats">
              <div className="pc-stat">
                <div className="k">Power</div>
                <div className="v">&lt;1W</div>
              </div>
              <div className="pc-stat">
                <div className="k">Effective Range</div>
                <div className="v">&gt;1.8km</div>
              </div>
            </div>
            <ul className="pc-bullets">
              <li><span>Air-to-air engagement</span></li>
              <li><span>Protocol-based — no collateral jamming</span></li>
              <li><span>Naval Postgraduate School</span></li>
            </ul>
            <div className="pc-foot">
              <a href="#/counter-drone" className="pc-cta">Explore Platform <Arr /></a>
              <span className="h-mono"></span>
            </div>
          </Reveal>

          <Reveal delay={120} className="platform-card">
            <div className="pc-sheen" />
            <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 using liquid crystal elastomer technology.
              Move like organisms, not machines. Evade sonar. Navigate where rigid
              systems can't.
            </p>
            <div className="pc-stats">
              <div className="pc-stat">
                <div className="k">Ground Ops</div>
                <div className="v">Crawling</div>
              </div>
              <div className="pc-stat">
                <div className="k">Subsurface</div>
                <div className="v">Swimming</div>
              </div>
            </div>
            <ul className="pc-bullets">
              <li><span>Low sonar cross-section</span></li>
              <li><span>Biomimetic movement</span></li>
              <li><span>NC State University research</span></li>
            </ul>
            <div className="pc-foot">
              <a href="#/soft-robotics" className="pc-cta">Explore Platform <Arr /></a>
              <span className="h-mono"></span>
            </div>
          </Reveal>
        </div>
      </section>

      {/* THREATS */}
      <section className={window.sClass("home-threats", tweaks)} data-section-id="home-threats" data-screen-label="Threats">
        <div className="container">
          <SHead id="" eyebrow="">
            America's adversaries{" "}
            <span style={{ color: "var(--crimson)" }}>aren't waiting</span>.
          </SHead>
          <Reveal>
            <p style={{
              fontFamily: "var(--font-display)", fontWeight: 300,
              fontSize: "clamp(17px, 1.5vw, 21px)", lineHeight: 1.55,
              color: "var(--bone-dim)", maxWidth: 880, margin: "0 0 60px"
            }}>
              Drone swarms are overwhelming traditional defenses. Hostile nations
              are deploying autonomous systems faster than we can counter them.
              The old playbook doesn't work anymore. We need systems that are
              cost-effective at scale, precise in their targeting, and
              American-built for national security.
            </p>
          </Reveal>

          <div className="threats">
            {[
            ["//", "Swarm Proliferation",
            "Commercial drone tech has created asymmetric threats existing systems can't handle.",
            "AIR · ASYMMETRIC"],
            ["//", "Collateral Jamming",
            "Broadband jammers disable friendly communications alongside hostile targets.",
            "EW · LEGACY"],
            ["//", "Detection Vulnerability",
            "Rigid robots are easily spotted by sonar and visual surveillance.",
            "GROUND · SIGINT"]].
            map(([ix, nm, ds, tag], i) =>
            <Reveal key={i} className="threat-row">
                <div className="ix">{ix}</div>
                <div className="nm">{nm}</div>
                <div className="ds">{ds}</div>
                <div className="tag">{tag}</div>
              </Reveal>
            )}
          </div>
        </div>
      </section>

      {/* MARKET STATS */}
      <section className={window.sClass("home-market", tweaks)} data-section-id="home-market" data-screen-label="Market" style={{ textAlign: "center", paddingBottom: 32 }}>
        <div className="container">
          <SHead id="" eyebrow="">
            The market is{" "}
            <span className="em" style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 300, color: "rgb(10, 14, 20)" }}>
              moving fast
            </span>.
          </SHead>
        </div>
        <div className="stats-grid">
          {[
          ["", "Federal Funding", "Expanding"],
          ["", "Market Demand", "Accelerating"],
          ["", "Industry Opportunity", "Growing"]].
          map(([ix, k, v], i) =>
          <Reveal key={i} className="stat-cell" style={{ fontWeight: 600 }}>
              <div className="ix">{ix}</div>
              <div className="k" style={{ fontWeight: "600" }}>{k}</div>
              <div className="v" style={{ fontWeight: "500" }}>{v}<span className="em">.</span></div>
            </Reveal>
          )}
        </div>
        <div className="container" style={{ marginTop: 40 }}>
          <Reveal>
            <p style={{
              fontFamily: "var(--font-display)", fontWeight: 300,
              lineHeight: 1.55,
              maxWidth: 720, margin: "0 auto", textAlign: "center", color: "rgb(54, 46, 37)", fontSize: "20px"
            }}>
              Counter-UAS is one of the fastest-growing defense segments. DoD, DHS,
              and critical infrastructure operators are actively seeking
              American-made solutions.
            </p>
          </Reveal>
          <div style={{ width: 80, height: 3, background: "var(--navy, #1b2c4a)", margin: "20px auto 0" }}></div>
        </div>
      </section>

      {/* PRINCIPLES — WHY US */}
      <section className={window.sClass("home-whyus", tweaks)} data-section-id="home-whyus" data-screen-label="Why Us" style={{ paddingTop: 8, paddingBottom: 80, padding: "8px 0px 80px" }}>
        <div className="container">
          <SHead id="" eyebrow="">
            <span style={{ display: "inline-block", transform: "translateX(-0.4em)" }}>Built by Americans.</span><br />
            <span style={{ color: "var(--crimson)", display: "inline-block", transform: "translateX(0.4em)", marginTop: "-0.18em" }}>Built for America.</span>
          </SHead>
        </div>
        <div className="principles">
          {[
          ["", "100% American",
          "Developed at Naval Postgraduate School and NC State University. American institutions. American IP. American ownership."],
          ["", "Expendable Scale",
          "Systems priced for real deployment. Tens of thousands, not millions. Built to field in quantity against mass threats."],
          ["", "Surgical Precision",
          "Protocol-based attacks and biomimetic stealth. Neutralize threats without disrupting friendly operations."]].
          map(([ix, h, p], i) =>
          <Reveal key={i} className="principle">
              <div className="ix">{ix}</div>
              <h4>{h}</h4>
              <p>{p}</p>
            </Reveal>
          )}
        </div>
      </section>

      {/* APPLICATIONS */}
      <section className={window.sClass("home-applications", tweaks)} data-section-id="home-applications" data-screen-label="Applications">
        <div className="container apps-v2">
          <div className="apps-head">
            <Reveal>
              <h2 className="big-section-title" style={{ fontFamily: "\"Inter Tight\"", fontSize: "60px", marginTop: 12 }}>
                Applications.
              </h2>
              <p style={{
                fontFamily: "var(--font-display)", fontWeight: 300,
                fontSize: 17, lineHeight: 1.55, color: "var(--bone-dim)",
                maxWidth: 560, marginTop: 20
              }}>
                Air, ground, subsurface. Designed for the missions American operators run today —
                not theoretical scenarios written for a press release.
              </p>
            </Reveal>
          </div>

          <div className="apps-grid">
            {[
            {
              code: "A.01", domain: "AIR · GROUND",
              title: "Military Operations",
              desc: "Forward operating bases, convoy protection, expeditionary force coverage. Drone-borne hijackers neutralize hostile UAS at the edge — without disabling friendly comms.",
              tag: "DoD"
            },
            {
              code: "A.02", domain: "AIR · GROUND",
              title: "Border Security",
              desc: "DHS and CBP operations across thousands of miles of land border. Persistent counter-UAS coverage scaled for line-of-sight enforcement and rapid redeployment.",
              tag: "DHS · CBP"
            },
            {
              code: "A.03", domain: "AIR · GROUND",
              title: "Critical Infrastructure",
              desc: "Power generation, refineries, data centers, water systems. Detection and intercept hardware sized for fixed-site defense of high-value civilian assets.",
              tag: "DoE · Operators"
            },
            {
              code: "A.04", domain: "AIR · SUBSURFACE",
              title: "Maritime Security",
              desc: "Harbors, littoral zones, port approaches. Biomimetic platforms operate where rigid systems are spotted — soft robotics paired with airborne intercept.",
              tag: "USN · USCG"
            }].
            map((a, i) =>
            <Reveal key={a.code} delay={i * 60} className="apps-card">
                <div className="apps-card-meta">
                  <span className="apps-card-domain">{a.domain}</span>
                </div>
                <h4>{a.title}</h4>
                <p>{a.desc}</p>
              </Reveal>
            )}
          </div>
        </div>
      </section>

            <section className={window.ctaClass("home-cta", tweaks)} data-section-id="home-cta">
        <div className="topo-bg" />
        <div className="container" style={{ textAlign: "center" }}>
          <div className="cta-inner" style={{ marginTop: 8, 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, { HomePage });