function App() {
  const [mode, setMode] = React.useState(window.TWEAK_DEFAULTS?.accentMode || 'rose');
  const [display, setDisplay] = React.useState(window.TWEAK_DEFAULTS?.displayFont || 'outfit');
  const [tweaksOpen, setTweaksOpen] = React.useState(false);
  const accent = getAccent(mode);

  // Sync CSS custom properties
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', accent.accent);
    root.style.setProperty('--accent-soft', accent.accentSoft);
  }, [accent]);

  React.useEffect(() => {
    document.documentElement.setAttribute('data-display', display);
  }, [display]);

  const onDemo = () => {
    document.getElementById('contact')?.scrollIntoView?.({ behavior: 'smooth' });
  };

  return (
    <div>
      <Nav accent={accent} />
      <div className="app">
        <Hero accent={accent} onDemo={onDemo} />
      </div>
      <TrustBand accent={accent} />
      <Themes accent={accent} />
      <Products accent={accent} />
      <KometaAI accent={accent} />
      <Clients accent={accent} />
      <Audiences accent={accent} />
      <Method accent={accent} />
      <Contact accent={accent} />
      <Footer accent={accent} />

      {/* Tweaks toggle button */}
      {tweaksOpen && (
        <button className="tweaks-toggle" onClick={() => setTweaksOpen(true)} title="Tweaks">
          ⚙
        </button>
      )}

      {tweaksOpen && (
        <div className="tweaks-panel">
          <h4>
            ⚙ Tweaks
            <button onClick={() => setTweaksOpen(false)}
              style={{ marginLeft: 'auto', background: 'none', border: 'none', cursor: 'pointer', fontSize: 16, color: '#6B6482' }}>
              ✕
            </button>
          </h4>
          <div className="tweak-row">
            <label>Accent dominant</label>
            <div className="tweak-opts">
              <button className={mode === 'rose' ? 'on' : ''} onClick={() => setMode('rose')}>
                Rose Komète
              </button>
              <button className={mode === 'navy' ? 'on' : ''} onClick={() => setMode('navy')}>
                Bleu KYU
              </button>
            </div>
          </div>
          <div className="tweak-row">
            <label>Police des titres</label>
            <div className="tweak-opts tweak-opts-2">
              <button className={display === 'outfit' ? 'on' : ''} onClick={() => setDisplay('outfit')}>
                <span style={{ fontFamily: 'Outfit, sans-serif', fontSize: 18, fontWeight: 600 }}>Outfit</span>
                <em style={{ fontSize: 10, color: '#999', display: 'block' }}>Sans-serif neutre · actuel</em>
              </button>
              <button className={display === 'instrument' ? 'on' : ''} onClick={() => setDisplay('instrument')}>
                <span style={{ fontFamily: 'Instrument Serif, serif', fontSize: 18 }}>Instrument Serif</span>
                <em style={{ fontSize: 10, color: '#999', display: 'block' }}>Serif éditorial</em>
              </button>
              <button className={display === 'fraunces' ? 'on' : ''} onClick={() => setDisplay('fraunces')}>
                <span style={{ fontFamily: 'Fraunces, serif', fontSize: 18, fontWeight: 500 }}>Fraunces</span>
                <em style={{ fontSize: 10, color: '#999', display: 'block' }}>Serif moderne / tech</em>
              </button>
              <button className={display === 'space' ? 'on' : ''} onClick={() => setDisplay('space')}>
                <span style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 18, fontWeight: 500 }}>Space Grotesk</span>
                <em style={{ fontSize: 10, color: '#999', display: 'block' }}>Sans-serif data/fintech</em>
              </button>
              <button className={display === 'poppins' ? 'on' : ''} onClick={() => setDisplay('poppins')}>
                <span style={{ fontFamily: 'Poppins, sans-serif', fontSize: 18, fontWeight: 600 }}>Poppins</span>
                <em style={{ fontSize: 10, color: '#999', display: 'block' }}>Sans-serif géométrique</em>
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

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