// Main app: composes all sections, wires scroll-reveal observer + Tweaks panel.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "annotations": true,
  "accent": "#1d3a8a",
  "density": "generous",
  "showHeroBadge": true
}/*EDITMODE-END*/;

function useScrollReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    if (!('IntersectionObserver' in window)) {
      els.forEach(el => el.classList.add('in'));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { rootMargin: '0px 0px -60px 0px', threshold: 0.08 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
}

function useHashScroll() {
  React.useEffect(() => {
    const hash = window.location.hash;
    if (!hash) return;
    // Wait for React to finish rendering all sections, then scroll
    const id = hash.replace('#', '');
    const attempt = (tries) => {
      const el = document.getElementById(id);
      if (el) {
        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      } else if (tries > 0) {
        setTimeout(() => attempt(tries - 1), 120);
      }
    };
    setTimeout(() => attempt(8), 200);
  }, []);
}

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

  // Apply accent live via CSS var on body
  React.useEffect(() => {
    document.documentElement.style.setProperty('--navy', t.accent);
    // Recompute soft variant
    document.documentElement.style.setProperty('--navy-soft', `${t.accent}14`);
  }, [t.accent]);

  React.useEffect(() => {
    const padScale = t.density === 'compact' ? 0.78 : 1;
    document.documentElement.style.setProperty('--pad-x', `clamp(${20 * padScale}px, ${4 * padScale}vw, ${56 * padScale}px)`);
  }, [t.density]);

  return (
    <React.Fragment>
      <Header />
      <main>
        <HeroEditorial tweaks={t} />
        <ScreenshotsShowcase />
        <Sovereignty />
        <Anticipation />
        <Blog />
        <FAQ />
        <Pricing />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakToggle label="Annotation manuscrite" value={t.annotations}
          onChange={(v) => setTweak('annotations', v)} />
        <TweakSection label="Couleur d'accent" />
        <TweakColor label="Navy" value={t.accent}
          options={['#1d3a8a', '#0f1f4a', '#2e54b8', '#4a3a8a']}
          onChange={(v) => setTweak('accent', v)} />
        <TweakSection label="Densité" />
        <TweakRadio label="Espacements" value={t.density}
          options={['generous', 'compact']}
          onChange={(v) => setTweak('density', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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