// AEQ Landing — root app (Simplified Homepage)
const { useState, useEffect, useRef, useMemo, useCallback } = React;

const TWEAK_DEFAULTS = {
  "palette": "dark",
  "motion": true,
  "hueShift": 0
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply palette + motion to <html>
  useEffect(() => {
    const root = document.documentElement;
    if (t.palette === "light") root.setAttribute("data-theme","light");
    else root.removeAttribute("data-theme");
    document.body.classList.toggle("no-motion", !t.motion);
    root.style.setProperty("--hue-shift", `${t.hueShift}deg`);
  }, [t.palette, t.motion, t.hueShift]);

  return (
    <GlobalEffects>
      <Nav t={t} />
      <Hero t={t} />

      {/* Hero to About AEQ */}
      <GradientBlend fromColor="#1a1a1a" toColor="#0a0f1a" height={60} />

      <AboutAEQ t={t} data-reveal="up" />

      <GlobeSection t={t} />

      {/* Globe to Testimonials */}
      <GradientBlend fromColor="#000000" toColor="#0f172a" height={60} />

      <Testimonials t={t} />

      {/* Testimonials to Footer */}
      <GradientBlend fromColor="#172554" toColor="#030712" height={40} />

      <SiteFooter t={t} />
    </GlobalEffects>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
