// app.jsx — Composition principale + Tweaks panel
// Choisit la variation HERO selon les Tweaks, anime les sections au scroll.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "constellation",
  "showLabels": "few",
  "accentGold": "#F5B544",
  "navStyle": "floating"
}/*EDITMODE-END*/;

function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.in)");
    if (!("IntersectionObserver" in window)) {
      els.forEach(el => el.classList.add("in"));
      return;
    }
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add("in");
          obs.unobserve(entry.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -10% 0px" });
    els.forEach(el => obs.observe(el));
    return () => obs.disconnect();
  });
}

function Nav() {
  return (
    <nav className="nav">
      <div className="nav-brand">
        <span className="nav-brand-mark" aria-hidden="true"></span>
        <span>La Pévèle Augmentée</span>
      </div>
      <div className="nav-links">
        <a href="#comment">Comment ça marche</a>
        <a href="#cofondateurs">Cofondateurs</a>
        <a href="#sponsors">Sponsors</a>
      </div>
      <a href="#" className="nav-cta">Faire un vœu</a>
    </nav>
  );
}

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

  // Re-trigger reveal on hero variant change
  React.useEffect(() => {
    requestAnimationFrame(() => {
      document.querySelectorAll(".hero .reveal").forEach(el => el.classList.add("in"));
    });
  }, [t.heroVariant]);

  const Hero =
    t.heroVariant === "typographic" ? HeroTypographic :
    t.heroVariant === "immersive"   ? HeroImmersive  :
                                       HeroConstellation;

  return (
    <>
      <Nav />
      <main>
        <Hero key={t.heroVariant} />
        <CommentCaMarche />
        <UniversGrid />
        <div id="sponsors">
          <SponsorsBlock />
        </div>
        <Cofondateurs />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero" />
        <TweakRadio
          label="Variation"
          value={t.heroVariant}
          options={[
            { value: "constellation", label: "Constellation" },
            { value: "typographic",   label: "Typographie" },
            { value: "immersive",     label: "Immersive" },
          ]}
          onChange={(v) => setTweak("heroVariant", v)}
        />
        <TweakSection label="Carte" />
        <TweakRadio
          label="Étiquettes des communes"
          value={t.showLabels}
          options={[
            { value: "none", label: "Aucune" },
            { value: "few",  label: "Principales" },
            { value: "all",  label: "Toutes" },
          ]}
          onChange={(v) => setTweak("showLabels", v)}
        />
      </TweaksPanel>
    </>
  );
}

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