/* global React, ReactDOM */
const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "totem",
  "accentMode": "blue",
  "showMetrics": true
}/*EDITMODE-END*/;

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

  // accent mode: change CSS vars on body
  useEffectA(() => {
    const root = document.documentElement;
    if (t.accentMode === 'blue') {
      root.style.setProperty('--blue', '#3FB8EE');
      root.style.setProperty('--blue-600', '#1FA1DC');
      root.style.setProperty('--blue-700', '#0E86C0');
      root.style.setProperty('--blue-50', '#EAF6FD');
      root.style.setProperty('--blue-100', '#D4ECFA');
    } else if (t.accentMode === 'teal') {
      root.style.setProperty('--blue', '#3FD4D9');
      root.style.setProperty('--blue-600', '#1FB8BD');
      root.style.setProperty('--blue-700', '#0E9499');
      root.style.setProperty('--blue-50', '#E6FAFB');
      root.style.setProperty('--blue-100', '#CCF3F5');
    } else if (t.accentMode === 'cobalt') {
      root.style.setProperty('--blue', '#4F7BFF');
      root.style.setProperty('--blue-600', '#3360E8');
      root.style.setProperty('--blue-700', '#1F47C0');
      root.style.setProperty('--blue-50', '#EBF0FF');
      root.style.setProperty('--blue-100', '#D7E0FF');
    }
  }, [t.accentMode]);

  return (
    <>
      <Nav />
      <Hero heroVariant={t.heroVariant} />
      <Produtos />
      <Segmentos />
      <ApiSection />
      <Seguranca />
      <CtaBanner />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero">
          <TweakRadio
            label="Mockup destacado"
            value={t.heroVariant}
            onChange={v => setTweak('heroVariant', v)}
            options={[
              { value: 'totem', label: 'Totem' },
              { value: 'phone', label: 'Celular' },
              { value: 'flow',  label: 'Fluxo' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Identidade visual">
          <TweakRadio
            label="Tom do azul"
            value={t.accentMode}
            onChange={v => setTweak('accentMode', v)}
            options={[
              { value: 'blue',   label: 'Marca' },
              { value: 'teal',   label: 'Ciano' },
              { value: 'cobalt', label: 'Cobalto' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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