/* JETX — TEMPORARY shared chrome (review build)
   Temp Nav + Footer + Shell with every inter-page link removed except Contact.
   Loaded by the temp home and temp contact pages. */
const { useState: useStateTS, useEffect: useEffectTS } = React;

/* ---------- Temp Nav: brand + Contact only ---------- */
function TempNav() {
  const [scrolled, setScrolled] = useStateTS(false);
  useEffectTS(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`nav ${scrolled ? "scrolled" : ""}`}>
      <a href="index.html" className="nav-brand" aria-label="JETX">
        <img src="assets/logos/jetx-white.png" alt="JETX" className="nav-logo" />
      </a>
      <div className="nav-right">
        <a href="contactus.html" className="nav-cta">
          <span>Get in touch</span><span className="arrow">→</span>
        </a>
      </div>
    </header>
  );
}

/* ---------- Inline social icons ---------- */
function TempSocialIcon({ name }) {
  const p = { width: 18, height: 18, viewBox: "0 0 24 24", fill: "currentColor" };
  if (name === "X") return (
    <svg {...p}><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25h6.83l4.713 6.231 5.447-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77Z"/></svg>
  );
  if (name === "LinkedIn") return (
    <svg {...p}><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28ZM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14ZM7.12 20.45H3.55V9h3.57v11.45ZM22.22 0H1.77C.8 0 0 .78 0 1.74v20.52C0 23.22.8 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.74V1.74C24 .78 23.2 0 22.22 0Z"/></svg>
  );
  if (name === "YouTube") return (
    <svg {...p}><path d="M23.5 6.2a3.02 3.02 0 0 0-2.12-2.14C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.51A3.02 3.02 0 0 0 .5 6.2 31.6 31.6 0 0 0 0 12a31.6 31.6 0 0 0 .5 5.8 3.02 3.02 0 0 0 2.12 2.14C4.5 20.45 12 20.45 12 20.45s7.5 0 9.38-.51a3.02 3.02 0 0 0 2.12-2.14A31.6 31.6 0 0 0 24 12a31.6 31.6 0 0 0-.5-5.8ZM9.6 15.57V8.43L15.82 12 9.6 15.57Z"/></svg>
  );
  if (name === "Instagram") return (
    <svg {...p}><path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.72 3.72 0 0 1-1.38-.9 3.72 3.72 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16ZM12 0C8.74 0 8.33.01 7.05.07c-1.28.06-2.15.26-2.91.56-.79.3-1.46.72-2.12 1.38A5.88 5.88 0 0 0 .63 4.14c-.3.76-.5 1.63-.56 2.91C.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.28.26 2.15.56 2.91.3.79.72 1.46 1.38 2.12.66.66 1.33 1.08 2.12 1.38.76.3 1.63.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.28-.06 2.15-.26 2.91-.56a5.88 5.88 0 0 0 2.12-1.38 5.88 5.88 0 0 0 1.38-2.12c.3-.76.5-1.63.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.28-.26-2.15-.56-2.91a5.88 5.88 0 0 0-1.38-2.12A5.88 5.88 0 0 0 19.86.63c-.76-.3-1.63-.5-2.91-.56C15.67.01 15.26 0 12 0Zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32ZM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm6.41-10.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88Z"/></svg>
  );
  return null;
}

/* ---------- Temp Footer: contact only ---------- */
function TempFooter() {
  const socials = [
    { l: "X", href: "https://twitter.com/JETXAERO" },
    { l: "LinkedIn", href: "https://www.linkedin.com/company/jetxus/" },
    { l: "YouTube", href: "https://www.youtube.com/channel/UC3EqOdS30VVZnpXG4Lb_88Q" },
    { l: "Instagram", href: "https://www.instagram.com/jetx_us/" },
  ];
  return (
    <footer className="footer">
      <div className="footer-grid" style={{ gridTemplateColumns: "1.6fr 1fr" }}>
        <div>
          <img src="assets/logos/jetx-white.png" alt="JETX" className="footer-logo" />
          <div className="footer-tag">
            Sustainable, low-cost vector-thrust solutions for the Advanced Air Mobility
            ecosystem — civil and military.
          </div>
        </div>
        <div className="footer-connect">
          <h5>Connect</h5>
          <div className="footer-links">
            <a href="mailto:brywelcel@jetxus.com">brywelcel@jetxus.com</a>
            <a href="mailto:nelsalas@jetxus.com">nelsalas@jetxus.com</a>
            <a href="tel:+14075058473">(407) 505-8473</a>
            <a href="contactus.html">Contact</a>
          </div>
          <div className="footer-socials">
            {socials.map((s) => (
              <a key={s.l} href={s.href} aria-label={s.l} target="_blank" rel="noreferrer">
                <TempSocialIcon name={s.l} />
              </a>
            ))}
          </div>
        </div>
      </div>
      <div className="footer-bottom">
        <div>COPYRIGHT © 2020–{new Date().getFullYear()} JETX LLC · ORLANDO, FL · CAGE 97ZJ9 · ALL RIGHTS RESERVED</div>
      </div>
    </footer>
  );
}

/* ---------- Temp shell (own nav + footer, keeps tweaks) ---------- */
const JETX_TEMP_TWEAK_DEFAULTS = { accent: "#FFFFFF", density: "comfort" };

function TempShell({ children, withCTA = true }) {
  const [t, setTweak] = window.useTweaks(JETX_TEMP_TWEAK_DEFAULTS);
  useEffectTS(() => {
    const map = { "#FFFFFF": "white", "#E40521": "red", "#1A66D6": "blue" };
    document.body.dataset.accent = map[t.accent] || "white";
    document.body.dataset.density = t.density === "tight" ? "tight" : "comfortable";
  }, [t]);
  return (
    <React.Fragment>
      <TempNav />
      <main>{children}</main>
      {withCTA ? <window.InvestorCTA /> : null}
      <TempFooter />
      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Identity" />
        <window.TweakColor label="Accent" value={t.accent} options={["#FFFFFF", "#E40521", "#1A66D6"]} onChange={(v) => setTweak("accent", v)} />
        <window.TweakSection label="Layout" />
        <window.TweakRadio label="Density" value={t.density} options={["comfort", "tight"]} onChange={(v) => setTweak("density", v)} />
      </window.TweaksPanel>
    </React.Fragment>
  );
}

Object.assign(window, { TempNav, TempFooter, TempSocialIcon, TempShell });