function DDHPage({ tweaks }) {
  return (
    <div className="page" data-screen-label="03 DDH">
      <section className="ihero">
        <div className="container">
          <div className="breadcrumb">
            <a href="#/"></a>
            <span className="sep"></span>
            <a href="#/">Platforms</a>
            <span className="sep">/</span>
            <span className="cur">Detachable Drone Hijacker</span>
          </div>
          <div className="ihero-grid">
            <div className="meta">
              <div><b></b></div>
              <div>Domain<b>Air · Counter-UAS</b></div>
              <div>Origin<b>Naval Postgraduate School</b></div>
            </div>
            <div>
              <Reveal>
                <h1>
                  Detachable<br />
                  Drone <span style={{ color: "var(--crimson)" }}>Hijacker</span>.
                </h1>
              </Reveal>
              <Reveal delay={100}>
                <p className="ihero-sub">
                  A modular, airborne electronic warfare payload for tactical counter-UAS
                  operations. Developed at Naval Postgraduate School.
                </p>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      <section className={window.sClass("ddh-overview", tweaks)} data-section-id="ddh-overview">
        <div className="container">
          <div className="two-col">
            <Reveal>
              <div className="label">What It Does</div>
            </Reveal>
            <Reveal delay={80} className="body-text">
              <p className="lead" style={{ color: "rgb(74, 64, 52)", fontSize: "18px", lineHeight: "1.65", fontWeight: "300" }}>
                A portable electronic warfare payload designed to counter hostile
                unmanned aerial systems.
              </p>
              <p>
                The Detachable Drone Hijacker (DDH) attaches to a friendly drone
                and neutralizes enemy UAVs through targeted cyber attacks.
              </p>
              <p>
                Unlike conventional counter-drone systems that rely on brute-force
                jamming, the DDH uses precision targeting to neutralize threats
                without interfering with friendly communications.
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      <section className={window.sClass("ddh-specs", tweaks)} data-section-id="ddh-specs">
        <div className="container">
          <SHead id="" eyebrow={<>Specifications &amp; Technical Profile</>}>
            Technical specifications.
          </SHead>
        </div>
        <div className="container">
          <Reveal>
            <div className="spec-table">
              {[
              ["Power Output", "<1 W", "Sub-watt operation enables prolonged airborne deployment."],
              ["Effective Range", ">1.8 km", "Extended engagement envelope from drone-mounted carrier."],
              ["Deployment", "Air-to-Air", "Drone-mounted, modular attachment to existing platforms."],
              ["Engagement Mode", "Protocol-Level", "Cyber attack rather than broadband jamming."],
              ["Operator Load", "Autonomous", "Identifies hostile signatures without trained EW operator."],
              ["Cost Profile", "Expendable Scale", "Priced for fielding in quantity, not for demonstrations."]].
              map(([k, v, d]) =>
              <div key={k} className="spec-row">
                  <div className="k">{k}</div>
                  <div className="v">{v}</div>
                  <div className="d">{d}</div>
                </div>
              )}
            </div>
          </Reveal>
        </div>
      </section>

      <section className={window.sClass("ddh-advantages", tweaks)} data-section-id="ddh-advantages">
        <div className="container">
          <SHead id="" eyebrow="">
            Key advantages.
          </SHead>
        </div>
        <div className="principles" style={{ gridTemplateColumns: "repeat(2, 1fr)" }}>
          {[
          ["", "Modular Design", "Attaches to various drone platforms without requiring custom integration."],
          ["", "Precision Targeting", "Neutralizes hostile drones without disrupting friendly communications or GPS."],
          ["", "Autonomous Operation", "Identifies and engages targets without requiring a highly trained operator."],
          ["", "Cost-Effective", "Priced for real-world deployment at scale, not one-off demonstrations."]].
          map(([ix, h, p]) =>
          <Reveal key={ix} className="principle">
              <div className="ix">{ix}</div>
              <h4>{h}</h4>
              <p>{p}</p>
            </Reveal>
          )}
        </div>
      </section>

      <section className={window.sClass("ddh-applications", tweaks)} data-section-id="ddh-applications">
        <div className="container">
          <SHead id="" eyebrow={<>Theatre &amp;<br />Applications</>}>
            Applications.
          </SHead>
        </div>
        <div className="apps">
          {[
          ["", "Base Defense", "Perimeter protection for military installations and forward operating bases."],
          ["", "Critical Infrastructure", "Protection for power plants, refineries, and other high-value facilities."],
          ["", "Mobile Operations", "Deployable protection for convoys and mobile command posts."],
          ["", "Event Security", "Temporary counter-drone coverage for public events and VIP protection."]].
          map(([ix, h, p]) =>
          <Reveal key={ix} className="app-cell">
              <div className="ix">{ix}</div>
              <h4>{h}</h4>
              <p>{p}</p>
            </Reveal>
          )}
        </div>
      </section>

      <section className={window.sClass("ddh-origin", tweaks)} data-section-id="ddh-origin">
        <div className="origin-block" style={{ gridTemplateColumns: "1fr" }}>
          <Reveal className="origin-cell">
            <h3>Developed at the Naval Postgraduate School</h3>
            <div className="loc"></div>
            <p style={{ maxWidth: 720 }}>
              Developed at NPS — the Navy's premier graduate-level research
              institution for defense technology.
            </p>
          </Reveal>
        </div>
      </section>

            <section className={window.ctaClass("ddh-cta", tweaks)} data-section-id="ddh-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, { DDHPage });