// App — root + tweaks integration
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primary": "#5B47F5",
  "accent": "#00D27A",
  "bg": "#EEEDF6",
  "ink": "#0E0E12",
  "density": "comfortable",
  "showCodeAccents": true,
  "fontDisplay": "Space Grotesk"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--primary', t.primary);
    root.style.setProperty('--primary-ink', shade(t.primary, -15));
    root.style.setProperty('--primary-soft', tint(t.primary, 88));
    root.style.setProperty('--accent', t.accent);
    root.style.setProperty('--bg', t.bg);
    root.style.setProperty('--bg-warm', tint(t.bg, 50));
    root.style.setProperty('--ink', t.ink);

    const padX = t.density === 'compact' ? 'clamp(16px, 3vw, 40px)'
      : t.density === 'spacious' ? 'clamp(24px, 5vw, 96px)'
      : 'clamp(20px, 4vw, 64px)';
    root.style.setProperty('--pad-x', padX);
  }, [t]);

  return (
    <>
      <style>{`
        .display, h1.display, h2.h-section, h3.display { font-family: '${t.fontDisplay}', sans-serif !important; }
        ${!t.showCodeAccents ? `
          .pill .dot, .eyebrow::before { display: none !important; }
          .mono-hide { display: none !important; }
        ` : ''}
      `}</style>

      <window.Nav density={t.density} />
      <window.Hero />
      <window.Stats />
      <window.Servicos />
      <window.Projetos />
      <window.Processo />
      <window.Sobre />
      <window.Depoimentos />
      <window.Faq />
      <window.Contato />
      <window.Footer />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Cores" />
        <window.TweakColor label="Primária" value={t.primary} onChange={v => setTweak('primary', v)} />
        <window.TweakColor label="Acento" value={t.accent} onChange={v => setTweak('accent', v)} />
        <window.TweakColor label="Fundo" value={t.bg} onChange={v => setTweak('bg', v)} />
        <window.TweakColor label="Texto" value={t.ink} onChange={v => setTweak('ink', v)} />

        <window.TweakSection label="Layout" />
        <window.TweakRadio label="Densidade" value={t.density}
          options={['compact', 'comfortable', 'spacious']}
          onChange={v => setTweak('density', v)} />

        <window.TweakSection label="Tipografia" />
        <window.TweakSelect label="Display" value={t.fontDisplay}
          options={['Space Grotesk', 'Inter', 'JetBrains Mono']}
          onChange={v => setTweak('fontDisplay', v)} />

        <window.TweakSection label="Personalidade" />
        <window.TweakToggle label="Acentos de código" value={t.showCodeAccents}
          onChange={v => setTweak('showCodeAccents', v)} />
      </window.TweaksPanel>
    </>
  );
}

function hexToRgb(h) {
  const m = h.replace('#', '').match(/.{2}/g);
  return m ? m.map(v => parseInt(v, 16)) : [0, 0, 0];
}
function rgbToHex(r, g, b) {
  return '#' + [r, g, b].map(v => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0')).join('');
}
function shade(hex, pct) {
  const [r, g, b] = hexToRgb(hex);
  const f = 1 + pct / 100;
  return rgbToHex(r * f, g * f, b * f);
}
function tint(hex, pct) {
  const [r, g, b] = hexToRgb(hex);
  const f = pct / 100;
  return rgbToHex(r + (255 - r) * f, g + (255 - g) * f, b + (255 - b) * f);
}

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