// Main app — Logos / Stats / Testimonials retirés.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#ff3324",
  "heroVariant": "plasma",
  "animIntensity": 65
}/*EDITMODE-END*/;

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

  // Global scroll-reveal: calm, reliable entrance for every reveal element.
  React.useEffect(() => {
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const touchLike = window.matchMedia("(hover: none), (pointer: coarse)").matches;

    if (reduced) {
      document.querySelectorAll(".reveal").forEach(el => el.classList.add("in"));
      return;
    }

    const cardRevealLine = touchLike ? 0.84 : 0.8;
    const standardRevealLine = touchLike ? 0.92 : 0.88;

    const shouldRevealNow = (el) => {
      const r = el.getBoundingClientRect();
      if (r.width === 0 && r.height === 0) return false;
      const revealLine = el.classList.contains("interactive-card")
        ? cardRevealLine
        : standardRevealLine;
      return r.bottom < 0 || r.top < window.innerHeight * revealLine;
    };

    const reveal = (el) => {
      if (el.classList.contains("in")) return;
      requestAnimationFrame(() => el.classList.add("in"));
      io.unobserve(el);
    };

    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) reveal(e.target);
      });
    }, {
      threshold: 0.01,
      rootMargin: touchLike ? "0px 0px -16% 0px" : "0px 0px -20% 0px",
    });

    const scan = () => {
      document.querySelectorAll(".reveal:not(.in)").forEach(el => {
        if (shouldRevealNow(el)) reveal(el);
        else io.observe(el);
      });
    };

    const timeouts = [0, 120, 400, 900].map(delay => window.setTimeout(scan, delay));
    document.fonts?.ready?.then(scan);

    return () => {
      timeouts.forEach(window.clearTimeout);
      io.disconnect();
    };
  }, []);

  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", t.theme);
  }, [t.theme]);

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accent);
    root.style.setProperty("--accent-glow", hexToRgba(t.accent, 0.45));
    root.style.setProperty("--accent-soft", lighten(t.accent, 0.12));
    root.style.setProperty("--accent-deep", darken(t.accent, 0.15));
  }, [t.accent]);

  return (
    <>
      <Nav theme={t.theme} onThemeToggle={() => setTweak("theme", t.theme === "dark" ? "light" : "dark")} />
      <main>
        <Hero variant={t.heroVariant} intensity={t.animIntensity} accent={t.accent} />
        <Services />
        <Process />
        <Cases />
        <Booking />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks · PULSE">
        <TweakSection label="Theme">
          <TweakRadio label="Mode" value={t.theme} options={["dark", "light"]}
            onChange={(v) => setTweak("theme", v)} />
          <TweakColor label="Accent" value={t.accent}
            options={["#ff3324", "#e84033", "#ff6b35", "#7c5cff", "#00d4a8"]}
            onChange={(v) => setTweak("accent", v)} />
        </TweakSection>
        <TweakSection label="Hero 3D">
          <TweakSelect label="Visuel" value={t.heroVariant}
            options={[
              { value: "plasma",    label: "Plasma · WebGL ✨" },
              { value: "orbital",   label: "Orbital · sphère + anneaux" },
              { value: "wireframe", label: "Sphère wireframe" },
            ]}
            onChange={(v) => setTweak("heroVariant", v)} />
          <TweakSlider label="Intensité" value={t.animIntensity}
            min={0} max={100} step={5}
            onChange={(v) => setTweak("animIntensity", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

function hexToRgba(hex, a) {
  const h = hex.replace("#", "");
  const n = parseInt(h.length === 3 ? h.split("").map(c => c + c).join("") : h, 16);
  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`;
}
function lighten(hex, amt) {
  const h = hex.replace("#", "");
  const n = parseInt(h.length === 3 ? h.split("").map(c => c + c).join("") : h, 16);
  const r = Math.min(255, ((n >> 16) & 255) + 255 * amt);
  const g = Math.min(255, ((n >> 8) & 255)  + 255 * amt);
  const b = Math.min(255, (n & 255)         + 255 * amt);
  return `rgb(${r}, ${g}, ${b})`;
}
function darken(hex, amt) {
  const h = hex.replace("#", "");
  const n = parseInt(h.length === 3 ? h.split("").map(c => c + c).join("") : h, 16);
  const r = Math.max(0, ((n >> 16) & 255) - 255 * amt);
  const g = Math.max(0, ((n >> 8) & 255)  - 255 * amt);
  const b = Math.max(0, (n & 255)         - 255 * amt);
  return `rgb(${r}, ${g}, ${b})`;
}

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