/* NEXABOT — app root + tweaks */
const { Nav, Hero, Services, Portfolio, About, Contact, Footer, useReveal } = window.NexaSections;
const { LangProvider } = window.NEXA_I18N;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#3b82f6", "#06b6d4"],
  "anim": "full",
  "grain": true
}/*EDITMODE-END*/;

const ANIM_SCALE = { off: 0.0001, subtle: 0.6, full: 1 };
const ANIM_INTENSITY = { off: 0.55, subtle: 0.8, full: 1 };

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

  React.useEffect(() => {
    const root = document.documentElement;
    const [a, b] = t.accent;
    root.style.setProperty("--accent", a);
    root.style.setProperty("--accent-2", b);
    root.style.setProperty("--accent-soft", hexA(a, 0.14));
    root.style.setProperty("--anim-scale", String(ANIM_SCALE[t.anim] ?? 1));
    document.body.classList.toggle("no-anim", t.anim === "off");
    document.body.classList.toggle("grain-on", !!t.grain);
  }, [t.accent, t.anim, t.grain]);

  function hexA(hex, a) {
    const h = hex.replace("#", "");
    const r = parseInt(h.slice(0, 2), 16), g = parseInt(h.slice(2, 4), 16), b = parseInt(h.slice(4, 6), 16);
    return `rgba(${r}, ${g}, ${b}, ${a})`;
  }

  return (
    <React.Fragment>
      <Nav />
      <main>
        <Hero intensity={ANIM_INTENSITY[t.anim] ?? 1} />
        <Services />
        <Portfolio />
        <About />
        <Contact />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Couleur d'accent" />
        <TweakColor
          label="Palette néon"
          value={t.accent}
          options={[
            ["#3b82f6", "#06b6d4"],
            ["#8b5cf6", "#ec4899"],
            ["#10b981", "#34d399"],
            ["#f59e0b", "#fbbf24"],
          ]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="Mouvement" />
        <TweakRadio
          label="Animations"
          value={t.anim}
          options={["off", "subtle", "full"]}
          onChange={(v) => setTweak("anim", v)}
        />
        <TweakToggle label="Grain léger" value={t.grain} onChange={(v) => setTweak("grain", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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