/* ===== App + Tweaks ===== */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "split",
  "accent": "#2f6bff",
  "neon": "#2ad6ff",
  "corners": "arrondis",
  "fontScale": 18,
  "plan": "Tranquillité",
  "sparkle": true,
  "stickyBar": true
}/*EDITMODE-END*/;

const HERO_LABELS = { split: "Split", centre: "Centré", plein: "Plein écran" };

function applyTweaks(t) {
  const r = document.documentElement.style;
  r.setProperty("--accent", t.accent);
  r.setProperty("--neon", t.neon);
  // pick a complementary second neon
  const second = t.neon.toLowerCase() === "#ff2d78" ? "#2ad6ff"
    : t.neon.toLowerCase() === "#7c5cff" ? "#2ad6ff" : "#ff2d78";
  r.setProperty("--neon-2", second);
  const sharp = t.corners === "nets";
  r.setProperty("--radius", sharp ? "4px" : "18px");
  r.setProperty("--radius-sm", sharp ? "3px" : "12px");
  r.setProperty("--fs", t.fontScale + "px");
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [modal, setModal] = useState(false);
  useEffect(() => { applyTweaks(t); }, [t.accent, t.neon, t.corners, t.fontScale]);

  const onCall = () => setModal(true);

  return (
    <React.Fragment>
      <Nav onCall={onCall} />
      <main>
        <Hero hero={t.hero} onCall={onCall} />
        <Process onCall={onCall} />
        <Services onCall={onCall} />
        <TrustBand />
        <Testimonials />
        <Formation onCall={onCall} />
        <Abonnement onCall={onCall} featured={t.plan} sparkle={t.sparkle} />
        <Gamer onCall={onCall} />
        <Engagements onCall={onCall} />
        <Contact />
      </main>
      <Footer />
      <CallbackModal open={modal} onClose={() => setModal(false)} />
      <StickyCTA onCall={onCall} enabled={t.stickyBar} />

      <TweaksPanel>
        <TweakSection label="Direction du site" />
        <TweakRadio label="Mise en page du hero" value={HERO_LABELS[t.hero]}
          options={["Split", "Centré", "Plein écran"]}
          onChange={(v) => setTweak("hero", Object.keys(HERO_LABELS).find(k => HERO_LABELS[k] === v))} />
        <TweakRadio label="Coins" value={t.corners}
          options={["arrondis", "nets"]}
          onChange={(v) => setTweak("corners", v)} />

        <TweakSection label="Couleurs" />
        <TweakColor label="Accent (grand public)" value={t.accent}
          options={["#2f6bff", "#0ea5e9", "#4f46e5", "#0f766e"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakColor label="Néon (zone gamer)" value={t.neon}
          options={["#2ad6ff", "#ff2d78", "#7c5cff", "#39ff8b"]}
          onChange={(v) => setTweak("neon", v)} />

        <TweakSection label="Abonnement" />
        <TweakRadio label="Forfait mis en avant" value={t.plan}
          options={["Essentiel", "Tranquillité", "Famille"]}
          onChange={(v) => setTweak("plan", v)} />
        <TweakToggle label="Effet étincelant" value={t.sparkle}
          onChange={(v) => setTweak("sparkle", v)} />
        <TweakToggle label="Barre de rappel flottante" value={t.stickyBar}
          onChange={(v) => setTweak("stickyBar", v)} />

        <TweakSection label="Accessibilité" />
        <TweakSlider label="Taille du texte" value={t.fontScale} min={16} max={21} step={1} unit="px"
          onChange={(v) => setTweak("fontScale", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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