// App entrypoint with tweaks integration.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mode": "dark",
  "accent": "#FF5C28",
  "headline": "speed",
  "heroVisual": "workflow"
}/*EDITMODE-END*/;

const ACCENT_PRESETS = {
  "#FF5C28": { soft: "rgba(255,92,40,0.12)", glow: "rgba(255,92,40,0.35)" },
  "#E8E337": { soft: "rgba(232,227,55,0.14)", glow: "rgba(232,227,55,0.35)" },
  "#4D8DFF": { soft: "rgba(77,141,255,0.14)", glow: "rgba(77,141,255,0.4)" },
};

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

  React.useEffect(() => {
    document.documentElement.dataset.mode = tweaks.mode;
    const presets = ACCENT_PRESETS[tweaks.accent] || ACCENT_PRESETS["#FF5C28"];
    document.documentElement.style.setProperty("--accent", tweaks.accent);
    document.documentElement.style.setProperty("--accent-soft", presets.soft);
    document.documentElement.style.setProperty("--accent-glow", presets.glow);
  }, [tweaks.mode, tweaks.accent]);

  return (
    <>
      <Nav mode={tweaks.mode} setMode={(m) => setTweak("mode", m)} />
      <Hero headlineKey={tweaks.headline} heroVisualVariant={tweaks.heroVisual} />
      <ClientLogos />
      <LogoBar />
      <Methode />
      <Packages />
      <UseCases />
      <Testimonials />
      <FAQ />
      <ContactForm />
      <FinalCTA />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Apparence">
          <TweakRadio label="Mode" value={tweaks.mode}
            options={[{ value: "dark", label: "Dark" }, { value: "light", label: "Light" }]}
            onChange={(v) => setTweak("mode", v)} />
          <TweakColor label="Accent"
            value={tweaks.accent}
            options={["#FF5C28", "#E8E337", "#4D8DFF"]}
            onChange={(v) => setTweak("accent", v)} />
        </TweakSection>
        <TweakSection label="Hero">
          <TweakSelect label="Phrase"
            value={tweaks.headline}
            options={[
              { value: "speed", label: "10× plus rapide" },
              { value: "execute", label: "L'IA exécute" },
              { value: "focus", label: "Automatisez ce qui ralentit" },
            ]}
            onChange={(v) => setTweak("headline", v)} />
          <TweakSelect label="Visuel"
            value={tweaks.heroVisual}
            options={[
              { value: "workflow", label: "Workflow nodes" },
              { value: "metrics", label: "Métriques live" },
              { value: "geometric", label: "Géométrique" },
            ]}
            onChange={(v) => setTweak("heroVisual", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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