// app.jsx — root
// (useState/useEffect already destructured from React in components.jsx; don't redeclare)

function applyAccent(accent) {
  const root = document.documentElement;
  if (accent === "mono") {
    root.style.setProperty("--accent", "#e5e5e5");
    root.style.setProperty("--accent-soft", "rgba(229,229,229,0.15)");
  } else if (accent === "greige") {
    root.style.setProperty("--accent", "#b8a48a");
    root.style.setProperty("--accent-soft", "rgba(184,164,138,0.15)");
  } else {
    root.style.setProperty("--accent", "#c8102e");
    root.style.setProperty("--accent-soft", "rgba(200,16,46,0.16)");
  }
}

function applyTheme(theme) {
  const root = document.documentElement;
  if (theme === "light") {
    root.style.setProperty("--bg", "#f6f4ef");
    root.style.setProperty("--bg-2", "#efece5");
    root.style.setProperty("--ink", "#171717");
    root.style.setProperty("--ink-dim", "rgba(23,23,23,0.65)");
    root.style.setProperty("--ink-dimmer", "rgba(23,23,23,0.38)");
    root.style.setProperty("--hair", "rgba(0,0,0,0.08)");
    root.style.setProperty("--hair-strong", "rgba(0,0,0,0.16)");
    document.body.style.background = "#f6f4ef";
    document.body.style.color = "#171717";
  } else {
    root.style.setProperty("--bg", "#0c0c0c");
    root.style.setProperty("--bg-2", "#111111");
    root.style.setProperty("--ink", "#f4f4f4");
    root.style.setProperty("--ink-dim", "rgba(244,244,244,0.62)");
    root.style.setProperty("--ink-dimmer", "rgba(244,244,244,0.38)");
    root.style.setProperty("--hair", "rgba(255,255,255,0.08)");
    root.style.setProperty("--hair-strong", "rgba(255,255,255,0.16)");
    document.body.style.background = "#0c0c0c";
    document.body.style.color = "#f4f4f4";
  }
}

function App() {
  const [state, setState] = useState({ ...window.TWEAK_DEFAULTS });

  useEffect(() => { applyAccent(state.accent); }, [state.accent]);
  useEffect(() => { applyTheme(state.theme); }, [state.theme]);

  return (
    <>
      <div className="grain" aria-hidden="true"></div>
      <Topbar />
      <Header />
      <Hero state={state} />
      <TrustStrip />
      <MarqueeTicker />
      <Features />
      <PullQuote />
      <PBALVideos />
      <PressStrip />
      <Products />
      <LegalVeterans />
      <Credentials />
      <FAQSection />
      <FinalCTA />
      <Footer />
      <StickyCTA />
      <TweaksPanel state={state} setState={setState} />
    </>
  );
}

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