// Top-level App + Tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#ff3a2e",
  "ambient": "vivid",
  "showChatbot": true
}/*EDITMODE-END*/;

function ThemedApp() {
  const { theme, setTheme, lang, setLang } = useI18n();
  const [tw, setTw] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks: accent color + ambient intensity
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--red", tw.accent);
    // ambient intensity → adjusts orb opacity by multiplying current vars
    const mult = { subtle: 0.55, vivid: 1.0, bold: 1.4 }[tw.ambient] || 1.0;
    // Use inline overrides — keep theme defaults but multiply
    const base = theme === "dark"
      ? { red: 0.55, navy: 0.50, cyan: 0.18, red2: 0.35 }
      : { red: 0.40, navy: 0.18, cyan: 0.22, red2: 0.30 };
    root.style.setProperty("--orb-red-opacity",  Math.min(0.95, base.red  * mult));
    root.style.setProperty("--orb-navy-opacity", Math.min(0.85, base.navy * mult));
    root.style.setProperty("--orb-cyan-opacity", Math.min(0.55, base.cyan * mult));
    root.style.setProperty("--orb-red2-opacity",Math.min(0.85, base.red2 * mult));
  }, [tw.accent, tw.ambient, theme]);

  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Services />
        <AMCPackages />
        <Platform />
        <WhyCESPRO />
        <Testimonials />
        <AppCTA />
        <FAQ />
        <BigCTA />
      </main>
      <Footer />
      {tw.showChatbot && <ChatBubble />}

      <TweaksPanel>
        <TweakSection label="Appearance" />
        <TweakRadio label="Theme" value={theme}
          options={["dark", "light"]}
          onChange={(v) => setTheme(v)} />
        <TweakRadio label="Language" value={lang}
          options={["en", "ar"]}
          onChange={(v) => setLang(v)} />

        <TweakSection label="Brand" />
        <TweakColor label="Accent" value={tw.accent}
          options={["#ff3a2e", "#e8261e", "#ea580c", "#0a8f5a", "#7a5af8", "#1e3aff"]}
          onChange={(v) => setTw("accent", v)} />
        <TweakRadio label="Ambient" value={tw.ambient}
          options={["subtle", "vivid", "bold"]}
          onChange={(v) => setTw("ambient", v)} />

        <TweakSection label="Page" />
        <TweakToggle label="AI chatbot bubble" value={tw.showChatbot}
          onChange={(v) => setTw("showChatbot", v)} />
      </TweaksPanel>
    </>
  );
}

function App() {
  return (
    <I18nProvider>
      <ThemedApp />
    </I18nProvider>
  );
}

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