// diag-app.jsx — /diagnosticos app shell (reveal + tweaks)

const DIAG_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#F85406",
  "displayFont": "Bricolage Grotesque",
  "bodyFont": "Hanken Grotesk",
  "motion": true
}/*EDITMODE-END*/;

function useScrollReveal(deps) {
  const revealed = React.useRef(new Set());
  const locked = React.useRef(new Set());
  const lockSoon = (e) => {
    if (e._lockT) return;
    e._lockT = setTimeout(() => { locked.current.add(e); e.classList.add('shown'); }, 1000);
  };
  const sweep = () => {
    const vh = window.innerHeight || document.documentElement.clientHeight;
    document.querySelectorAll('[data-reveal]').forEach((e) => {
      if (locked.current.has(e)) { e.classList.add('in', 'shown'); return; }
      const r = e.getBoundingClientRect();
      if (revealed.current.has(e) || (r.top < vh * 0.92 && r.bottom > -40)) {
        revealed.current.add(e); e.classList.add('in'); lockSoon(e);
      }
    });
  };
  React.useLayoutEffect(() => { sweep(); });
  React.useEffect(() => {
    const onScroll = () => sweep();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll, { passive: true });
    const iv = setInterval(() => {
      sweep();
      const total = document.querySelectorAll('[data-reveal]').length;
      if (total > 0 && locked.current.size >= total) clearInterval(iv);
    }, 250);
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); clearInterval(iv); };
  }, deps);
}

function DiagApp() {
  const [t, setTweak] = useTweaks(DIAG_DEFAULTS);
  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--accent', t.accent);
    r.style.setProperty('--font-display', `'${t.displayFont}', system-ui, sans-serif`);
    r.style.setProperty('--font-body', `'${t.bodyFont}', system-ui, sans-serif`);
  }, [t.accent, t.displayFont, t.bodyFont]);
  React.useEffect(() => {
    document.body.classList.toggle('motion-on', !!t.motion);
    document.body.classList.toggle('motion-off', !t.motion);
  }, [t.motion]);
  useScrollReveal([t.motion]);

  return (
    <React.Fragment>
      <AnnouncementBar />
      <Header />
      <main>
        <DiagHero />
        <ParaQuem />
        <Tipos />
        <ComoFunciona />
        <OQueRecebe />
        <DiagCTA />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Marca" />
        <TweakColor label="Cor de destaque" value={t.accent}
          options={['#F85406', '#FB6E1E', '#E03E00', '#2A6FDB']}
          onChange={(v) => setTweak('accent', v)} />
        <TweakSection label="Tipografia" />
        <TweakSelect label="Display" value={t.displayFont}
          options={['Bricolage Grotesque', 'Sora', 'Space Grotesk', 'Archivo']}
          onChange={(v) => setTweak('displayFont', v)} />
        <TweakSelect label="Corpo" value={t.bodyFont}
          options={['Hanken Grotesk', 'Manrope', 'IBM Plex Sans']}
          onChange={(v) => setTweak('bodyFont', v)} />
        <TweakSection label="Movimento" />
        <TweakToggle label="Animações" value={t.motion} onChange={(v) => setTweak('motion', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<DiagApp />);