/* Performance 8M — Root app */

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

  // Apply CSS variables from tweaks
  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    // Derive supporting tones
    const hex = t.accent.replace('#', '');
    const r = parseInt(hex.substring(0, 2), 16);
    const g = parseInt(hex.substring(2, 4), 16);
    const b = parseInt(hex.substring(4, 6), 16);
    document.documentElement.style.setProperty('--accent-glow', `rgba(${r}, ${g}, ${b}, 0.35)`);
    // pick black or white ink based on luminance
    const lum = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
    document.documentElement.style.setProperty('--accent-ink', lum > 0.6 ? '#0a0f00' : '#f4f4ef');

    // density
    if (t.density === 'compact') {
      document.documentElement.style.setProperty('--gap-section', 'clamp(60px, 8vw, 110px)');
    } else {
      document.documentElement.style.setProperty('--gap-section', 'clamp(80px, 12vw, 160px)');
    }
  }, [t.accent, t.density]);

  return (
    <React.Fragment>
      <window.DuotoneDefs accent={t.accent} />
      <window.Nav />
      <window.Hero />
      <window.CoachCard />
      <window.Intro />
      <window.Athletes />
      <window.Pain />
      <window.MethodIntro />
      <window.ModulesCarousel />
      <window.Solution />
      <window.Transformation />
      <window.Transition />
      <window.Offer />
      <window.FAQ />
      <window.Close />
      <window.Footer />
      <window.StickyCTA enabled={t.stickyCta} />

      <window.TweaksPanel title="Tweaks · Performance 8M">
        <window.TweakSection label="Visual">
          <window.TweakColor
            label="Cor de destaque"
            value={t.accent}
            onChange={(v) => setTweak('accent', v)}
            options={['#d4ff3a', '#39ff88', '#ff4d2e', '#3aa3ff', '#ffd23a']}
          />
          <window.TweakRadio
            label="Densidade"
            value={t.density}
            onChange={(v) => setTweak('density', v)}
            options={[
              { value: 'default', label: 'Arejado' },
              { value: 'compact', label: 'Compacto' },
            ]}
          />
        </window.TweakSection>
        <window.TweakSection label="Interface">
          <window.TweakToggle
            label="CTA flutuante"
            value={t.stickyCta}
            onChange={(v) => setTweak('stickyCta', v)}
          />
        </window.TweakSection>
        <window.TweakSection label="Atalhos">
          <window.TweakButton label="Ir aos 8 módulos" onClick={() => document.getElementById('modulos').scrollIntoView({ behavior: 'smooth' })} />
          <window.TweakButton label="Ir à oferta" onClick={() => document.getElementById('oferta').scrollIntoView({ behavior: 'smooth' })} />
        </window.TweakSection>
      </window.TweaksPanel>
    </React.Fragment>
  );
}

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