/* eslint-disable */
// MS BRIDGE — Site v2 (restyle) master app
// One React root, one shared Tweaks panel. Composes the restyled sections
// (HeroV2 dark, ManifestoV2 light) and will grow as sections are added.

;(function () {

const SITE_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E8291C",
  "ghost": false,
  "gridOpacity": 1,
  "showNote": true,
  "manifestoLayout": "split",
  "painsLayout": "fuites",
  "painsDark": true,
  "howLayout": "bento",
  "whoLayout": "groupes",
  "timelineLayout": "stepper",
  "timelineBg": "#0B0B0C",
  "proofLayout": "marquee",
  "whyLayout": "table"
}/*EDITMODE-END*/;

function SiteV2() {
  const [t, setTweak] = useTweaks(SITE_DEFAULTS);

  React.useEffect(() => {
    const handleHashScroll = () => {
      if (window.location.hash) {
        const id = window.location.hash.substring(1);
        const element = document.getElementById(id);
        if (element) {
          element.scrollIntoView({ behavior: 'smooth' });
        }
      }
    };

    // Attendre que le DOM soit rendu pour effectuer le défilement
    const timer = setTimeout(handleHashScroll, 300);
    return () => clearTimeout(timer);
  }, []);

  return (
    <>
      <section id="hero" data-screen-label="01 Hero">
        <HeroV2 accentKey={t.accent} gridOpacity={t.gridOpacity} ghost={t.ghost} />
      </section>
      <section id="manifesto" data-screen-label="02 Manifesto">
        <ManifestoV2 accentKey={t.accent} ghost={t.ghost} showNote={t.showNote} layout={t.manifestoLayout} />
      </section>
      <section id="pains" data-screen-label="03 Pains">
        <PainsV2 accentKey={t.accent} ghost={t.ghost} showNote={t.showNote} layout={t.painsLayout} dark={t.painsDark} />
      </section>
      <section id="how" data-screen-label="04 How">
        <HowV2 accentKey={t.accent} ghost={t.ghost} layout={t.howLayout} />
      </section>
      <section id="who" data-screen-label="05 Who">
        <WhoV2 />
      </section>
      <section id="timeline" data-screen-label="06 Timeline">
        <TimelineV2 accentKey={t.accent} ghost={t.ghost} layout={t.timelineLayout} bg={t.timelineBg} />
      </section>
      <section id="proof" data-screen-label="07 Proof">
        <ProofV2 accentKey={t.accent} layout={t.proofLayout} />
      </section>
      <section id="why" data-screen-label="08 Why">
        <WhyV2 accentKey={t.accent} ghost={t.ghost} layout="table" />
      </section>
      <section id="podcast" data-screen-label="09 Podcast">
        <PodcastV2 accentKey={t.accent} ghost={t.ghost} />
      </section>
      <section id="beta" data-screen-label="10 Bêta">
        <BetaV2 accentKey={t.accent} />
      </section>
      <section id="faq" data-screen-label="11 FAQ">
        <FaqV2 accentKey={t.accent} ghost={t.ghost} />
      </section>
      <section id="footer" data-screen-label="12 Footer">
        <FooterV2 accentKey={t.accent} />
      </section>

      <TweaksPanel>
        <TweakSection label="Accent" />
        <TweakColor label="Couleur" value={t.accent}
          options={["#E8291C", "#FF6200"]}
          onChange={(v) => setTweak("accent", v)} />

        <TweakSection label="Style global" />
        <TweakToggle label="Titres fantômes (contour)" value={t.ghost}
          onChange={(v) => setTweak("ghost", v)} />

        <TweakSection label="Hero" />
        <TweakSlider label="Grille" value={t.gridOpacity} min={0} max={1} step={0.05}
          onChange={(v) => setTweak("gridOpacity", v)} />

        <TweakSection label="Manifesto" />
        <TweakRadio label="Mise en page" value={t.manifestoLayout}
          options={["editorial", "centre", "split"]}
          onChange={(v) => setTweak("manifestoLayout", v)} />
        <TweakToggle label="Annotation manuscrite" value={t.showNote}
          onChange={(v) => setTweak("showNote", v)} />
        <TweakSection label="Pains" />
        <TweakSelect label="Mise en page" value={t.painsLayout}
          options={["agitation", "capacites", "hybride", "fuites"]}
          onChange={(v) => setTweak("painsLayout", v)} />
        <TweakToggle label="Fond sombre" value={t.painsDark}
          onChange={(v) => setTweak("painsDark", v)} />

        <TweakSection label="How" />
        <TweakRadio label="Mise en page" value={t.howLayout}
          options={["bento", "schema", "etapes"]}
          onChange={(v) => setTweak("howLayout", v)} />

        <TweakSection label="Timeline" />
        <TweakRadio label="Mise en page" value={t.timelineLayout}
          options={["vertical", "stepper", "phases"]}
          onChange={(v) => setTweak("timelineLayout", v)} />
        <TweakColor label="Fond de section" value={t.timelineBg}
          options={["#0B0B0C", "#F1ECE3", "#F6EDE8", "#ECEFF3", "#FFFFFF"]}
          onChange={(v) => setTweak("timelineBg", v)} />

        <TweakSection label="Proof" />
        <TweakRadio label="Mise en page" value={t.proofLayout}
          options={["marquee", "grille", "spotlight"]}
          onChange={(v) => setTweak("proofLayout", v)} />

        <TweakSection label="Why" />
        <TweakRadio label="Mise en page" value={t.whyLayout}
          options={["table", "duo", "lignes"]}
          onChange={(v) => setTweak("whyLayout", v)} />
      </TweaksPanel>
    </>
  );
}

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

})();