/* global React, ReactDOM, useReveal, Nav, Hero, Constellation, Credential, MissionControl, Surfaces, How, Final, useTweaks, TweaksPanel, TweakSection, TweakToggle, TweakColor, TweakRadio */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#00f3ff",
  "reduceMotion": false
}/*EDITMODE-END*/;

const ACCENTS = ["#00f3ff", "#00d4b8", "#939aff", "#f8d974"]; // cyan / teal / lavender / gold
const hexToTriplet = (h) => {
  const n = h.replace("#", "");
  return `${parseInt(n.slice(0, 2), 16)} ${parseInt(n.slice(2, 4), 16)} ${parseInt(n.slice(4, 6), 16)}`;
};

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap footer-grid">
        <span style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <img className="ds-logo white" src="../../../../_ds/aaas-design-system-2216a8d1-f354-4115-9de4-7172d50864b1/assets/AaaS_Logo_White.png" alt="AaaS" style={{ height: 18, width: "auto" }} />
          <img className="ds-logo black" src="../../../../_ds/aaas-design-system-2216a8d1-f354-4115-9de4-7172d50864b1/assets/AaaS_Logo_Black.png" alt="AaaS" style={{ height: 18, width: "auto" }} />
          <span className="footer-copy">&#169; 2026 aaas.company</span>
        </span>
        <div className="footer-cols">
          <a href="#surfaces">Surfaces</a>
          <a href="#map">The map</a>
          <a href="#dashboard">Dashboard</a>
          <a href="#how">How it works</a>
        </div>
        <div className="footer-cols">
          <a href="https://aaas.blog" target="_blank" rel="noopener">aaas.blog</a>
          <a href="https://aaas.select" target="_blank" rel="noopener">aaas.select</a>
          <a href="https://aaas.academy" target="_blank" rel="noopener">aaas.academy</a>
        </div>
      </div>
    </footer>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();

  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", t.theme === "light" ? "light" : "dark");
  }, [t.theme]);

  React.useEffect(() => {
    // light theme keeps its own darker cyan unless the user picks a non-default accent
    if (t.theme === "light" && t.accent === "#00f3ff") {
      document.documentElement.style.removeProperty("--circuit-glow");
      document.documentElement.style.removeProperty("--circuit-dim");
      return;
    }
    const trip = hexToTriplet(t.accent);
    document.documentElement.style.setProperty("--circuit-glow", trip);
    document.documentElement.style.setProperty("--circuit-dim", `rgb(${trip} / 0.15)`);
  }, [t.accent, t.theme]);

  React.useEffect(() => {
    document.body.classList.toggle("no-motion", !!t.reduceMotion);
  }, [t.reduceMotion]);

  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Constellation />
        <Credential />
        <MissionControl />
        <Surfaces />
        <How />
        <Final />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio label="Mode" value={t.theme} options={["dark", "light"]}
          onChange={(v) => setTweak("theme", v)} />
        <TweakColor label="Accent" value={t.accent} options={ACCENTS}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Motion" />
        <TweakToggle label="Reduce motion" value={t.reduceMotion}
          onChange={(v) => setTweak("reduceMotion", v)} />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);