// Main app

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": true,
  "accent": "#2ea4ff"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = React.useState('pt');

  // Theme
  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.dark ? 'dark' : 'light');
    document.documentElement.lang = lang === 'pt' ? 'pt-BR' : 'en';
  }, [t.dark, lang]);

  // Accent color
  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    // derive glow
    const hex = t.accent.replace('#', '');
    const r = parseInt(hex.slice(0,2), 16);
    const g = parseInt(hex.slice(2,4), 16);
    const b = parseInt(hex.slice(4,6), 16);
    document.documentElement.style.setProperty('--accent-glow', `rgba(${r}, ${g}, ${b}, 0.32)`);
  }, [t.accent]);

  useReveal();

  const copy = COPY[lang];

  return (
    <>
      <Nav lang={lang} setLang={setLang} t={copy} />
      <Hero t={copy} />
      <Marquee items={copy.marquee} />
      <Sobre t={copy} />
      <Services t={copy} />
      <Salus t={copy} />
      <Footer t={copy} lang={lang} />

      {/* Quick theme toggle (always visible, separate from Tweaks) */}
      <button
        className="theme-toggle"
        onClick={() => setTweak('dark', !t.dark)}
        aria-label="Toggle theme"
        title={t.dark ? 'Light mode' : 'Dark mode'}
      >
        {t.dark ? <Icon.Sun /> : <Icon.Moon />}
      </button>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Tema" />
        <TweakToggle label="Modo escuro" value={t.dark}
                     onChange={(v) => setTweak('dark', v)} />
        <TweakColor label="Cor de destaque" value={t.accent}
                    options={['#2ea4ff', '#6c8cff', '#10b981', '#f97316', '#e11d48']}
                    onChange={(v) => setTweak('accent', v)} />
      </TweaksPanel>
    </>
  );
}

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