// planos-app.jsx — root da página Planos
const { useEffect, useState } = React;

const PLANOS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "blue",
  "font": "PP Neue Montreal",
  "density": "roomy"
}/*EDITMODE-END*/;

const PLANOS_ACCENTS = {
  blue:   '#1C80FA',
  lime:   'oklch(0.88 0.18 128)',
  violet: 'oklch(0.72 0.22 300)',
  orange: 'oklch(0.75 0.18 55)',
};

const PlanosApp = () => {
  const [tweaks, setTweak] = useTweaks(PLANOS_DEFAULTS);

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', PLANOS_ACCENTS[tweaks.accent] || PLANOS_ACCENTS.blue);
    root.style.setProperty('--accent-fg', tweaks.accent === 'lime' ? '#0A0A0A' : '#FFFFFF');
    root.setAttribute('data-density', tweaks.density === 'compact' ? 'compact' : 'roomy');
    if (tweaks.font === 'System') {
      root.style.setProperty('--font-display', 'system-ui, -apple-system, "Helvetica Neue", sans-serif');
    } else {
      root.style.removeProperty('--font-display');
    }
  }, [tweaks]);

  // reveal on scroll
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      for (const e of entries) {
        if (e.isIntersecting) e.target.classList.add('is-in');
      }
    }, { threshold: 0.1 });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Header />
      <main>
        <PlanosHero />
        <PlanosPillars />
        <PlanosCards />
        <PlanosTable />
        <PlanosFAQ />
        <PlanosClose />
        <Final />
      </main>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Visual">
          <TweakRadio label="Accent" value={tweaks.accent} onChange={v => setTweak('accent', v)}
            options={[
              {value: 'blue', label: 'Azul'},
              {value: 'lime', label: 'Lime'},
              {value: 'violet', label: 'Violeta'},
              {value: 'orange', label: 'Laranja'},
            ]} />
          <TweakRadio label="Fonte" value={tweaks.font} onChange={v => setTweak('font', v)}
            options={[
              {value: 'PP Neue Montreal', label: 'PP Neue'},
              {value: 'System', label: 'Sistema'},
            ]} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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