// app.jsx — root composition + Tweaks
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": true,
  "accent": "indigo"
}/*EDITMODE-END*/;

const ACCENTS = {
  indigo: { d: ['#5B8CFF', '#6FE0FF'], l: ['#2A5BE0', '#0AA8D6'], label: 'Indigo' },
  violet: { d: ['#A66CFF', '#FF7AC6'], l: ['#7B3FE4', '#D43F8C'], label: 'Violet' },
  cyan:   { d: ['#22D3EE', '#7DF9D6'], l: ['#0891B2', '#10B981'], label: 'Cyan'   },
  amber:  { d: ['#FBBF24', '#FB7185'], l: ['#D97706', '#DC2626'], label: 'Amber'  },
};

function applyAccent(name, dark) {
  const pair = ACCENTS[name] || ACCENTS.indigo;
  const [a1, a2] = dark ? pair.d : pair.l;
  document.documentElement.style.setProperty('--accent', a1);
  document.documentElement.style.setProperty('--accent-2', a2);
  document.documentElement.style.setProperty('--accent-soft', `color-mix(in srgb, ${a1} 14%, transparent)`);
}

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

  useEffectApp(() => {
    document.documentElement.setAttribute('data-theme', t.dark ? 'dark' : 'light');
    applyAccent(t.accent, t.dark);
  }, [t.dark, t.accent]);

  return (
    <>
      <Nav dark={t.dark} onToggleTheme={() => setTweak('dark', !t.dark)}/>
      <main>
        <Hero/>
        <Games/>
        <Hubs/>
        <ZeroHexHighlight/>
        <ClanesElite/>
        <Rankings/>
        <DiscordSection/>
        <ClanLeaderPreview/>
        <RankSystem/>
        <Directorio/>
        <Modules/>
        <FinalCTA/>
      </main>
      <Footer/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Apariencia"/>
        <TweakToggle  label="Modo oscuro" value={t.dark} onChange={v => setTweak('dark', v)}/>
        <TweakRadio   label="Color de acento"
                      value={t.accent}
                      options={Object.keys(ACCENTS)}
                      onChange={v => setTweak('accent', v)}/>
        <div style={{ display: 'flex', gap: 6, marginTop: 2 }}>
          {Object.entries(ACCENTS).map(([k, v]) => {
            const [a, b] = t.dark ? v.d : v.l;
            const active = t.accent === k;
            return (
              <button key={k} onClick={() => setTweak('accent', k)}
                aria-label={v.label}
                style={{
                  flex: 1, height: 28, borderRadius: 7,
                  background: `linear-gradient(135deg, ${a}, ${b})`,
                  border: active ? '2px solid #fff' : '2px solid transparent',
                  outline: active ? '1px solid rgba(0,0,0,0.4)' : 'none',
                  cursor: 'pointer',
                  transition: 'transform .15s',
                }}/>
            );
          })}
        </div>
      </TweaksPanel>
    </>
  );
}

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