// App + Tweaks

const { useState, useEffect: useEffect2 } = React;

const PALETTES = {
  taupe: {
    "--cream":  "#FAF7F2",
    "--sage":   "#B7BFAE",
    "--rose":   "#E8C7BD",
    "--sand":   "#E6D7C2",
    "--taupe":  "#8A7A69",
    "--ink":    "#2F2A24",
    "--accent": "#8A7A69",
  },
  sage: {
    "--cream":  "#F4F6F0",
    "--sage":   "#9DAA8E",
    "--rose":   "#E8C7BD",
    "--sand":   "#E6D7C2",
    "--taupe":  "#6E7A60",
    "--ink":    "#2A2E26",
    "--accent": "#6E7A60",
  },
  rose: {
    "--cream":  "#FBF4F0",
    "--sage":   "#B7BFAE",
    "--rose":   "#D9A99B",
    "--sand":   "#E6D7C2",
    "--taupe":  "#A87767",
    "--ink":    "#33201A",
    "--accent": "#A87767",
  },
};

const DARK = {
  "--cream":  "#1A1612",
  "--sage":   "#5A6353",
  "--rose":   "#A87767",
  "--sand":   "#3A3329",
  "--taupe":  "#D9C9B5",
  "--ink":    "#F2EBE0",
  "--line":   "rgba(217, 201, 181, 0.18)",
};

function applyTheme(t) {
  const root = document.documentElement;
  const pal = t.darkMode ? DARK : (PALETTES[t.palette] || PALETTES.taupe);
  Object.entries(pal).forEach(([k, v]) => root.style.setProperty(k, v));
  if (!t.darkMode) root.style.setProperty("--line", "rgba(138, 122, 105, 0.22)");
}

function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  useEffect2(() => { applyTheme(t); }, [t]);

  // Global scroll-reveal — added via JS so content stays visible without JS.
  useEffect2(() => {
    const prefersReduced = window.matchMedia &&
      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (prefersReduced) return;

    const targets = [];
    const tag = (sel, stagger) => {
      document.querySelectorAll(sel).forEach((el) => {
        if (el.classList.contains("reveal")) return;
        el.classList.add("reveal");
        targets.push(el);
      });
      if (stagger) {
        // stagger siblings within each parent group
        const groups = new Set();
        document.querySelectorAll(sel).forEach((el) => groups.add(el.parentElement));
        groups.forEach((g) => {
          [...g.children].filter((c) => c.classList.contains("reveal"))
            .forEach((c, i) => { c.style.transitionDelay = (i * 90) + "ms"; });
        });
      }
    };

    tag(".section-head");
    tag(".manifesto-visual");
    tag(".ribbon");
    tag(".universe", true);
    tag(".step", true);
    tag(".place", true);
    tag(".faq-item", true);
    tag(".devis-intro");
    tag(".form");
    tag(".foot-grid");

    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
      });
    }, { threshold: 0.1, rootMargin: "0px 0px -8% 0px" });

    targets.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav />
      <Hero image={IMG.hero} />
      <Ribbon />
      <Manifesto />
      <Services />
      <Process />
      <Locations />
      <FaqSection />
      <Devis />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette dominante">
          <TweakRadio
            label="Direction"
            value={t.palette}
            options={["taupe", "sage", "rose"]}
            onChange={(v) => setTweak("palette", v)}
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, marginTop: 10 }}>
            {[
              { name: "taupe", colors: ["#FAF7F2", "#E6D7C2", "#8A7A69"] },
              { name: "sage",  colors: ["#F4F6F0", "#9DAA8E", "#6E7A60"] },
              { name: "rose",  colors: ["#FBF4F0", "#D9A99B", "#A87767"] },
            ].map((p) => (
              <button
                key={p.name}
                onClick={() => setTweak("palette", p.name)}
                style={{
                  display: "flex", height: 28, overflow: "hidden",
                  border: t.palette === p.name ? "1.5px solid #fff" : "1px solid rgba(255,255,255,0.15)",
                  borderRadius: 4, cursor: "pointer", padding: 0,
                }}
                title={p.name}
              >
                {p.colors.map((c, i) => (
                  <div key={i} style={{ flex: 1, background: c }} />
                ))}
              </button>
            ))}
          </div>
        </TweakSection>

        <TweakSection label="Mode">
          <TweakToggle
            label="Mode sombre"
            value={t.darkMode}
            onChange={(v) => setTweak("darkMode", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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