/* ============================================================
   APIQO — App root + Tweaks
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "es",
  "primaryAccent": "#CD3266",
  "showOrbs": true,
  "compact": false
}/*EDITMODE-END*/;

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLangLocal] = React.useState(tweaks.lang || 'es');

  React.useEffect(() => {
    document.documentElement.style.setProperty('--brand-magenta', tweaks.primaryAccent);
    document.documentElement.classList.toggle('no-orbs', !tweaks.showOrbs);
    document.documentElement.classList.toggle('compact', tweaks.compact);
  }, [tweaks]);

  const setLang = (l) => { setLangLocal(l); setTweak('lang', l); };

  const t = window.I18N[lang];

  return (
    <>
      <Hero t={t} lang={lang} setLang={setLang} />
      <SectionWhat t={t} />
      <SectionCatalog t={t} />
      <SectionVibe t={t} lang={lang} />
      <SectionFleet t={t} />
      <SectionStack t={t} />
      <SectionROI t={t} />
      <SectionProcess t={t} />
      <SectionFAQ t={t} />
      <SectionCTA t={t} />
      <Footer t={t} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Idioma">
          <TweakRadio
            value={lang}
            onChange={setLang}
            options={[{ value:'es', label:'ES' }, { value:'en', label:'EN' }]}
          />
        </TweakSection>
        <TweakSection title="Acento de marca">
          <TweakColor value={tweaks.primaryAccent} onChange={v => setTweak('primaryAccent', v)} label="Magenta primario" />
          <div style={{ display:'flex', gap:8, marginTop:8 }}>
            {['#CD3266','#0439D9','#54AFBC','#7C3AED','#16A34A'].map(c => (
              <button key={c}
                onClick={() => setTweak('primaryAccent', c)}
                style={{ width:24, height:24, borderRadius:'50%', background:c, border: tweaks.primaryAccent===c?'2px solid #0A0B0E':'1px solid #ddd', cursor:'pointer' }}
              />
            ))}
          </div>
        </TweakSection>
        <TweakSection title="Visual">
          <TweakToggle value={tweaks.showOrbs} onChange={v => setTweak('showOrbs', v)} label="Orbes en hero" />
          <TweakToggle value={tweaks.compact} onChange={v => setTweak('compact', v)} label="Modo compacto" />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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