// ============================================================================
// MOVA RELOCATION — App principal
// ============================================================================

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "gold": "#B8944C",
  "goldLight": "#D4B470",
  "cream": "#F5F0E6",
  "black": "#0A0A0A",
  "muted": "#8A8378",
  "fontSerif": "Cormorant Garamond",
  "fontSans": "Outfit",
  "heroHeight": "100vh",
  "showCorner": true,
  "headerScrollThreshold": 80
}/*EDITMODE-END*/;

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

  const [scrolled, setScrolled] = useState(false);
  const [pastHero, setPastHero] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  // Applique les variables CSS depuis Tweaks
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--mova-gold", tw.gold);
    root.style.setProperty("--mova-gold-light", tw.goldLight);
    root.style.setProperty("--mova-cream", tw.cream);
    root.style.setProperty("--mova-black", tw.black);
    root.style.setProperty("--mova-muted", tw.muted);
    root.style.setProperty("--font-serif", `"${tw.fontSerif}", "Cormorant Garamond", serif`);
    root.style.setProperty("--font-sans", `"${tw.fontSans}", "Outfit", system-ui, sans-serif`);
    document.body.style.background = tw.cream;
  }, [tw.gold, tw.goldLight, tw.cream, tw.black, tw.muted, tw.fontSerif, tw.fontSans]);

  // Scroll handlers
  useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      setScrolled(y > tw.headerScrollThreshold);
      setPastHero(y > window.innerHeight * 0.4);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [tw.headerScrollThreshold]);

  return (
    <React.Fragment>
      <Header scrolled={scrolled} onOpenMenu={() => setMenuOpen(true)} />
      <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)} />

      <main>
        {/* 1 — Hero */}
        <HeroSection />

        {/* 2 — Conviction */}
        <ConvictionSection />

        {/* 3 — Athlètes */}
        <SplitSection
          id="athletes"
          label="03 Athlètes"
          eyebrow={t("athletes.eyebrow")}
          title={t("athletes.title")}
          body={t("athletes.body")}
          pull={t("athletes.pull")}
          indexLabel="01"
          visual={<AthleteVisual />}
          detailSrc="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=600&q=80&auto=format&fit=crop"
          detailCaption={t("athletes.detailCaption")}
        />

        {/* 4 — Dirigeants */}
        <SplitSection
          id="dirigeants"
          label="04 Dirigeants"
          eyebrow={t("dirigeants.eyebrow")}
          title={t("dirigeants.title")}
          body={t("dirigeants.body")}
          indexLabel="02"
          reverse
          visual={<DirigeantVisual />}
          detailSrc="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&q=80&auto=format&fit=crop"
          detailCaption={t("dirigeants.detailCaption")}
          background="#0d0c08"
        />

        {/* 5 — Familles */}
        <SplitSection
          id="familles"
          label="05 Familles"
          eyebrow={t("familles.eyebrow")}
          title={t("familles.title")}
          body={t("familles.body")}
          indexLabel="03"
          visual={<FamilleVisual />}
          detailSrc="https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=600&q=80&auto=format&fit=crop"
          detailCaption={t("familles.detailCaption")}
        />

        {/* 6 — Services */}
        <ServicesSection />

        {/* 7 — Process */}
        <ProcessSection />

        {/* 8 — Destinations */}
        <DestinationsSection />

        {/* 9 — Témoignages */}
        <TestimonialsSection />

        {/* 10 — Fondateur */}
        <FounderSection />

        {/* 11 — Contact */}
        <ContactSection />
      </main>

      {/* 12 — Footer */}
      <Footer />

      {/* WhatsApp flottant */}
      <FloatingWhatsapp visible={pastHero} />
    </React.Fragment>
  );
}

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