// Main App
const { useState, useEffect } = React;

function App() {
  const t0 = window.LEON_TWEAKS;
  const [tweaks, setTweaksState] = useState(t0);
  const [lang, setLang] = useState("fr");
  const [scrolled, setScrolled] = useState(false);
  const [overHero, setOverHero] = useState(true);
  const [showTweaks, setShowTweaks] = useState(false);

  const setTweak = (k, v) => {
    const upd = typeof k === "object" ? { ...tweaks, ...k } : { ...tweaks, [k]: v };
    setTweaksState(upd);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: typeof k === "object" ? k : { [k]: v } }, "*");
  };

  // Apply theme
  useEffect(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme || "light");
  }, [tweaks.theme]);

  // Apply accent
  useEffect(() => {
    document.documentElement.style.setProperty("--accent", tweaks.accent);
    // derive a deeper accent
    document.documentElement.style.setProperty("--accent-deep", tweaks.accent + "d0");
  }, [tweaks.accent]);

  // Apply typo
  useEffect(() => {
    const map = {
      instrument: ["'Instrument Serif', Georgia, serif", "'Geist', sans-serif"],
      cormorant: ["'Cormorant Garamond', Georgia, serif", "'Manrope', sans-serif"],
      sansonly: ["'Geist', sans-serif", "'Geist', sans-serif"]
    };
    const [s, sa] = map[tweaks.typo] || map.instrument;
    document.documentElement.style.setProperty("--serif", s);
    document.documentElement.style.setProperty("--sans", sa);
  }, [tweaks.typo]);

  // Scroll
  useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 40);
      setOverHero(window.scrollY < window.innerHeight - 80);
    };
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Tweaks panel availability
  useEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === "__activate_edit_mode") setShowTweaks(true);
      if (e.data?.type === "__deactivate_edit_mode") setShowTweaks(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  const t = window.LEON_CONTENT[lang];
  const Hero = { cinematic: HeroA, editorial: HeroB, minimal: HeroC }[tweaks.heroVariant] || HeroA;
  const isCinematic = tweaks.heroVariant === "cinematic";

  return (
    <>
      <Header t={t} lang={lang} setLang={setLang} overHero={isCinematic && overHero} scrolled={scrolled} />
      <Hero t={t} lang={lang} />
      <TrustedBy t={t} />
      <Services t={t} />
      <PromiseSection t={t} />
      <AppSection t={t} variant={tweaks.appVariant || "new"} introPhoto={tweaks.appIntroPhoto !== false} />
      <Testimonials t={t} />
      <B2B t={t} />
      <Footer t={t} />

      {showTweaks && (
        <TweaksPanel title="Tweaks" onClose={() => { setShowTweaks(false); window.parent.postMessage({type:"__edit_mode_dismissed"},"*"); }}>
          <TweakSection title="Hero">
            <TweakRadio label="Variante" value={tweaks.heroVariant} onChange={v => setTweak("heroVariant", v)}
              options={[{value:"cinematic",label:"Ciné"},{value:"editorial",label:"Éditorial"},{value:"minimal",label:"Minimal"}]} />
          </TweakSection>

          <TweakSection title="Section App">
            <TweakRadio label="Mockups" value={tweaks.appVariant || "new"} onChange={v => setTweak("appVariant", v)}
              options={[{value:"new",label:"Nouveau"},{value:"legacy",label:"Ancien"}]} />
            <TweakRadio label="Écran 1" value={tweaks.appIntroPhoto !== false ? "photo" : "typo"} onChange={v => setTweak("appIntroPhoto", v === "photo")}
              options={[{value:"photo",label:"Photo"},{value:"typo",label:"Typo"}]} />
          </TweakSection>

          <TweakSection title="Apparence">
            <TweakRadio label="Mode" value={tweaks.theme} onChange={v => setTweak("theme", v)}
              options={[{value:"light",label:"Clair"},{value:"dark",label:"Sombre"}]} />
            <TweakColor label="Accent" value={tweaks.accent} onChange={v => setTweak("accent", v)}
              options={["#0A76BA","#1F2937","#B8945F","#0E5E3A"]} />
          </TweakSection>
          <TweakSection title="Typographie">
            <TweakSelect label="Pairing" value={tweaks.typo} onChange={v => setTweak("typo", v)}
              options={[
                {value:"instrument", label:"Instrument Serif + Geist"},
                {value:"cormorant", label:"Cormorant + Manrope"},
                {value:"sansonly", label:"Geist (sans uniquement)"}
              ]} />
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

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