const { useEffect: useEffect2, useState: useState2 } = React;

function App() {
  const [tweaks, setTweak] = useTweaks(window.__TWEAKS);
  const [scrolled, setScrolled] = useState2(false);

  useEffect2(() => {
    const hexToAccent = {
      '#c8782e': 'amber',
      '#2774e6': 'cyan',
      '#8e6dd6': 'violet',
      '#2f9e6a': 'green',
    };
    const accentName = hexToAccent[tweaks.accent] || tweaks.accent || 'amber';
    document.body.dataset.accent = accentName;
  }, [tweaks.accent]);

  useEffect2(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useEffect2(() => {
    const nav = document.getElementById('nav');
    if (nav) nav.classList.toggle('scrolled', scrolled);
  }, [scrolled]);

  return (
    <>
      <Hero />
      <Problem />
      <Demo />
      <How />
      <Compare />
      <ROI />
      <Integrations />
      <CTA />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Acento de marca">
          <TweakColor
            label="Acento"
            value={tweaks.accent}
            onChange={(v) => setTweak('accent', v)}
            options={['#c8782e', '#2774e6', '#8e6dd6', '#2f9e6a']}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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