/* global React, ReactDOM, SectionsTop, SectionsMid, SectionsBottom, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle, TweakSelect */

const { Hero, OuNousTrouver, NosAutresServices, Accompagnement } = SectionsTop;
const { CarteInteractive, ChiffresCles, GaleriePhotos } = SectionsMid;
const { NotreEquipe, ContactezNous, NosPartenaires, Footer, StickyNav } = SectionsBottom;
const { Lightbox } = Ornaments;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "pinkVariant": "framboise",
  "heroDensity": "comfortable",
  "showOrnaments": true,
  "headingFont": "caveat-brush",
  "scriptColor": "olive"
}/*EDITMODE-END*/;

/* Apply tweaks via CSS vars */
const applyTweaks = (t) => {
  const root = document.documentElement;
  // Pink variant (AA-compliant fallback)
  if (t.pinkVariant === "aa") {
    root.style.setProperty("--vp-pink", "#D8345B");
  } else {
    root.style.setProperty("--vp-pink", "#F2527D");
  }
  // Heading font
  const fontMap = {
    "caveat-brush": "'Petit Cochon', cursive",
    "permanent-marker": "'Petit Cochon', cursive",
    "shrikhand": "'Petit Cochon', cursive",
  };
  document.querySelectorAll(".font-brush").forEach(el => {
    el.style.fontFamily = fontMap[t.headingFont] || fontMap["caveat-brush"];
  });
  // Hide ornaments
  document.documentElement.style.setProperty(
    "--ornament-display",
    t.showOrnaments ? "block" : "none"
  );
};

const App = () => {
  const [tweaks, setTweak] = useTweaks(DEFAULTS);

  React.useEffect(() => { applyTweaks(tweaks); }, [tweaks]);

  // Scroll-triggered fade-in
  React.useEffect(() => {
    const els = document.querySelectorAll(".fade-in");
    const io = new IntersectionObserver(
      (entries) => entries.forEach(e => e.isIntersecting && e.target.classList.add("visible")),
      { threshold: 0.08, rootMargin: "0px 0px -60px 0px" }
    );
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <StickyNav />

      <main>
        <Hero />
        <div className="fade-in"><ChiffresCles /></div>
        <div className="fade-in"><GaleriePhotos /></div>
        <div className="fade-in"><CarteInteractive /></div>
        <div className="fade-in"><Accompagnement /></div>
        <div className="fade-in"><NosAutresServices /></div>
        <div className="fade-in"><NotreEquipe /></div>
        <div className="fade-in"><OuNousTrouver /></div>
        <div className="fade-in"><ContactezNous /></div>
        <div className="fade-in"><NosPartenaires /></div>
      </main>

      <Footer />

      <Lightbox />

      <TweaksPanel title="Tweaks · Vilaine Pousse">
        <TweakSection label="Couleurs" />
        <TweakRadio
          label="Rose"
          value={tweaks.pinkVariant}
          options={[
            { value: "framboise", label: "Framboise" },
            { value: "aa", label: "AA contrast" },
          ]}
          onChange={(v) => setTweak("pinkVariant", v)}
        />

        <TweakSection label="Typographie" />
        <TweakSelect
          label="Police titres"
          value={tweaks.headingFont}
          options={[
            { value: "caveat-brush", label: "Caveat Brush (défaut)" },
            { value: "permanent-marker", label: "Permanent Marker" },
            { value: "shrikhand", label: "Shrikhand" },
          ]}
          onChange={(v) => setTweak("headingFont", v)}
        />

        <TweakSection label="Décor" />
        <TweakToggle
          label="Ornements botaniques"
          value={tweaks.showOrnaments}
          onChange={(v) => setTweak("showOrnaments", v)}
        />
      </TweaksPanel>
    </>
  );
};

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