// WebbIA™ Tech — root app + router + Tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#5B4BCC",
  "density": "comfortable"
}/*EDITMODE-END*/;

const ACCENT_PALETTES = {
  '#5B4BCC': { primary: '#5B4BCC', light: '#7C6EE0', glow: '#9B8FF2', deep: '#1F1644' }, // Roxo (default)
  '#22D3A0': { primary: '#0FA47A', light: '#22D3A0', glow: '#5EEBBE', deep: '#0E3A2C' }, // Teal
  '#E26A4D': { primary: '#D9542F', light: '#E8825F', glow: '#F2A185', deep: '#3A1A0E' }, // Coral
  '#3B82F6': { primary: '#2F6FE6', light: '#5B96FA', glow: '#8AB6FE', deep: '#0E1F3F' }, // Azul
};

function applyTweaks(t) {
  document.documentElement.dataset.theme = t.theme;
  const p = ACCENT_PALETTES[t.accent] || ACCENT_PALETTES['#5B4BCC'];
  const r = document.documentElement;
  r.style.setProperty('--brand-primary', p.primary);
  r.style.setProperty('--brand-light', p.light);
  r.style.setProperty('--brand-glow', p.glow);
  r.style.setProperty('--brand-deep', p.deep);
  r.style.setProperty('--border-glow', p.primary + '40');
  if (t.density === 'compact') {
    r.style.setProperty('--maxw', '1140px');
    r.style.setProperty('--pad-x', 'clamp(20px, 3vw, 40px)');
  } else {
    r.style.setProperty('--maxw', '1240px');
    r.style.setProperty('--pad-x', 'clamp(20px, 4vw, 56px)');
  }
}

const App = () => {
  const [page, setPage] = React.useState(() => {
    const h = window.location.hash.replace('#','');
    return ['home','produto','sobre','contato'].includes(h) ? h : 'home';
  });
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { applyTweaks(t); }, [t]);

  const navigate = (p) => {
    setPage(p);
    window.location.hash = p;
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
  React.useEffect(() => {
    window.navigate = navigate;
    const onHash = () => {
      const h = window.location.hash.replace('#','');
      if (['home','produto','sobre','contato'].includes(h)) setPage(h);
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const Page = { home: HomePage, produto: ProdutoPage, sobre: SobrePage, contato: ContatoPage }[page];

  return (
    <>
      <Aurora />
      <NavBar current={page} onNav={navigate} />
      <main key={page} className="page-anim" data-screen-label={page}>
        <Page />
      </main>
      <Footer onNav={navigate} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Tema">
          <TweakRadio
            value={t.theme}
            onChange={(v) => setTweak('theme', v)}
            options={[
              { value: 'dark', label: 'Dark' },
              { value: 'light', label: 'Light' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Cor de destaque">
          <TweakColor
            value={t.accent}
            onChange={(v) => setTweak('accent', v)}
            options={['#5B4BCC', '#22D3A0', '#E26A4D', '#3B82F6']}
          />
        </TweakSection>
        <TweakSection title="Densidade">
          <TweakRadio
            value={t.density}
            onChange={(v) => setTweak('density', v)}
            options={[
              { value: 'comfortable', label: 'Confortável' },
              { value: 'compact', label: 'Compacto' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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