/* JETX — TEMPORARY HOME page (review build)
   Same as home.jsx but every inter-page link is removed except Contact.
   Chrome (nav/footer/shell) lives in shared-temp.jsx. Original files untouched. */
const { useState: useStateT, useEffect: useEffectT, useRef: useRefT } = React;

/* ---------- Temp Hero (links stripped to contact) ---------- */
function TempHero() {
  const bgRef = useRefT(null);
  const setVideoRef = (el) => {
    bgRef.current = el;
    if (el) { el.defaultMuted = true; el.muted = true; el.volume = 0; }
  };
  const [entered, setEntered] = useStateT(false);
  useEffectT(() => { const id = setTimeout(() => setEntered(true), 60); return () => clearTimeout(id); }, []);
  useEffectT(() => {
    const onScroll = () => {
      if (!bgRef.current) return;
      const y = window.scrollY;
      bgRef.current.style.transform = `translate3d(0, ${y * 0.22}px, 0) scale(${1 + Math.min(y / 4000, 0.05)})`;
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <section className="hero" id="top" data-screen-label="Home Hero (temp)">
      <div className="hero-bg">
        <video
          ref={setVideoRef}
          src="assets/jetx-hero.mp4?v=4"
          autoPlay
          muted
          loop
          playsInline
          onPlay={(e) => { e.currentTarget.muted = true; e.currentTarget.volume = 0; }}
          onVolumeChange={(e) => { if (!e.currentTarget.muted) e.currentTarget.muted = true; }}
        ></video>
      </div>
      <div className="hero-scrim"></div>
      <div className="hero-grid"></div>

      <div className={`hero-content ${entered ? "entered" : ""}`}>
        <div style={{ flex: "0 0 auto" }}>
          <div className="hero-eyebrow">
            <span className="bar"></span>
            <span className="eyebrow">Advanced Air Mobility · eVTOL</span>
          </div>
          <h1 className="hero-title">
            <span className="line"><span className="display">Vector</span> <span className="display-outline">Thrust</span></span>
            <span className="line display">No Rotation</span>
          </h1>
          <p className="hero-sub">
            Our core is a patent-pending vector-thrust mechanism that delivers vertical flight
            <em style={{ color: "var(--fg-1)", fontStyle: "normal" }}> without tilting or rotating the propulsion</em>.
            Around it we layer hybrid-electric power, Full Self Flying autonomy and modular platforms —
            a full stack of solutions for advanced air mobility. Validated through $500K+ in U.S.
            Department of War contracts.
          </p>
          <div className="hero-cta-row">
            <a className="btn btn-primary" href="contactus.html">
              <span>Get in touch</span><span className="arrow">→</span>
            </a>
            <a className="btn" href="mailto:nelsalas@jetxus.com?subject=JETX%20inquiry">
              <span>Email us</span><span className="arrow">→</span>
            </a>
          </div>

          <div className="hero-funding">
            <span className="hero-funding-label">Funded &amp; validated by</span>
            <div className="hero-funding-logos">
              <img src="assets/logos/sbir-white.png" alt="SBIR / STTR" />
              <img src="assets/logos/sbir-army-white.png" alt="U.S. Army SBIR / STTR" />
              <img src="assets/logos/xtech-white.png" alt="Army xTech" />
              <img src="assets/logos/afwerx-white.png" alt="AFWERX" />
            </div>
          </div>
        </div>

        <div className="hud" aria-label="At a glance">
          <div className="hud-cell">
            <span className="hud-label">Established</span>
            <span className="hud-value mono">2020</span>
          </div>
          <div className="hud-cell">
            <span className="hud-label">DoW Contracts</span>
            <span className="hud-value mono">$500K+<span className="hud-unit">/ 3 awards</span></span>
          </div>
          <div className="hud-cell">
            <span className="hud-label">Patents</span>
            <span className="hud-value mono">Multiple<span className="hud-unit">pending</span></span>
          </div>
          <div className="hud-cell">
            <span className="hud-label">Headquarters</span>
            <span className="hud-value mono">Orlando<span className="hud-unit">FL · USA</span></span>
          </div>
          <div className="hud-cell">
            <span className="hud-label"><span className="dot"></span>U.S. Army DevX</span>
            <span className="hud-value mono">Award-Ready<span className="hud-unit">May 2026</span></span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Temp Intro (no links) ---------- */
function TempIntro() {
  return (
    <section className="section shell band-light">
      <window.Reveal className="section-head" style={{ marginBottom: 0 }}>
        <div className="index">
          <span className="num">01</span>
          <span>The Idea</span>
        </div>
        <div>
          <span className="eyebrow">JETX LLC · Founded 2020 · Orlando, FL</span>
          <h2 className="mission-statement" style={{ marginTop: 24 }}>
            We build the <em>complete technology stack</em> behind next-generation VTOL aircraft —
            vector-thrust propulsion, hybrid-electric power, Full Self Flying autonomy and modular
            platforms — for civil and military advanced air mobility.
          </h2>
        </div>
      </window.Reveal>
    </section>
  );
}

/* ---------- Temp X2S flagship section (stacked, frameless) ---------- */
function TempX2S() {
  const specs = [
    { v: "300 kg", l: "Modular Payload" },
    { v: "22 min", l: "Silent Low-Signature" },
    { v: "TRL 6", l: "Maturity" },
    { v: "GPS-Deg.", l: "Autonomous Nav" },
  ];
  const slides = [
    "assets/concepts/x2s-group4-tarmac.png",
    "assets/concepts/x2s-desert-armed.png",
  ];
  const [i, setI] = useStateT(0);
  const [paused, setPaused] = useStateT(false);
  useEffectT(() => {
    if (paused) return;
    const id = setInterval(() => setI((p) => (p + 1) % slides.length), 4500);
    return () => clearInterval(id);
  }, [paused, slides.length]);
  return (
    <section className="section shell band" data-screen-label="X2S">
      <window.Reveal className="section-head flush">
        <div className="index"><span className="num">X2S</span><span>Flagship Platform</span></div>
        <div>
          <span className="eyebrow">Submission 4-26-0226 · Awardable · May 28 2026</span>
          <h2 className="h1" style={{ marginTop: 24 }}>
            The X2S.<br /><span style={{ color: "var(--fg-1)" }}>Award-ready for the U.S. Army.</span>
          </h2>
        </div>
      </window.Reveal>

      <window.Reveal className="tx2s">
        <figure
          className="tx2s-media"
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
        >
          <span className="frame-tag">X2S · GROUP IV · NON-ROTATING VECTOR THRUST</span>
          {slides.map((src, idx) => (
            <img
              key={src}
              src={src}
              alt="X2S Group IV defense UAV"
              className={idx === i ? "is-active" : ""}
            />
          ))}
          <div className="tx2s-dots">
            {slides.map((src, idx) => (
              <button
                key={src}
                className={idx === i ? "is-active" : ""}
                onClick={() => setI(idx)}
                aria-label={`Show X2S image ${idx + 1}`}
              ></button>
            ))}
          </div>
        </figure>

        <div className="tx2s-body">
          <div className="tx2s-head">
            <span className="badge-award"><span className="dot"></span>Award-Ready · DevX Autonomy</span>
            <h3 className="tx2s-title">Multi-Mission Defense UAV</h3>
          </div>
          <p className="tx2s-copy">
            A next-generation tactical UAV built around proprietary non-rotating vector thrust —
            redirecting thrust without rotating motors or moving nacelles for fewer failure points
            and greater control authority. It pairs helicopter vertical access with fixed-wing speed,
            powered by a hybrid-electric propulsion system with a multi-fuel turbogenerator,
            supporting ISR, reconnaissance and resupply with autonomous maneuvering in GPS-degraded
            environments. Designated <strong style={{ color: "var(--fg-1)", fontWeight: 600 }}>Awardable</strong> on
            the U.S. Army DevX Autonomy marketplace.
          </p>
        </div>

        <div className="tx2s-specs">
          {specs.map((s) => (
            <div className="tx2s-spec" key={s.l}>
              <div className="v mono">{s.v}</div>
              <div className="l">{s.l}</div>
            </div>
          ))}
        </div>
      </window.Reveal>
    </section>
  );
}

function TempHomePage() {
  return (
    <React.Fragment>
      <TempHero />
      <TempIntro />
      <TempX2S />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(
  <window.TempShell><TempHomePage /></window.TempShell>
);