/* app.jsx — composition, login modal state, tweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "showDashboard": true,
  "showLogoCloud": true,
  "showBeneficios": true,
  "showModes": true,
  "showComparativa": true,
  "showSeguridad": true,
  "showPricing": true,
  "showCta": true,
  "ctaCopy": "antes de redactar.",
  "googleClientId": "525582855260-8a44ivfa6h93atld3f61ohsc8qjnroqm.apps.googleusercontent.com"
}/*EDITMODE-END*/;

function App() {
  const [loginOpen, setLoginOpen] = useState(false);
  const [savedQuery, setSavedQuery] = useState('');
  const [savedMode, setSavedMode] = useState('general');

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

  const openLogin = (q, m) => {
    setSavedQuery(q || '');
    setSavedMode(m || 'general');
    setLoginOpen(true);
  };

  return (
    <>
      <Navbar onLogin={() => openLogin('', 'general')} />
      <main className="relative">
        <div id="hero" />
        <Hero onLoginRequired={openLogin} />
        {t.showDashboard   && <DashboardMockup />}
        {t.showLogoCloud   && <LogoCloud />}
        {t.showBeneficios  && <Beneficios />}
        {t.showModes       && <ModesGrid onLoginRequired={openLogin} />}
        {t.showComparativa && <Comparativa />}
        {t.showSeguridad   && <Seguridad />}
        {t.showPricing     && <Pricing onLoginRequired={openLogin} />}
        {t.showCta         && <CtaAurora onLoginRequired={openLogin} ctaCopy={t.ctaCopy} />}
        <Footer />
      </main>

      <LoginModal open={loginOpen} onClose={() => setLoginOpen(false)} query={savedQuery} mode={savedMode} googleClientId={t.googleClientId} />

      <TweaksPanel title="Tweaks · Mentaly">
        <TweakSection label="Google Sign-In">
          <TweakText
            label="Google Client ID"
            value={t.googleClientId}
            placeholder="Introduce tu Client ID"
            onChange={v => setTweak('googleClientId', v)}
          />
        </TweakSection>

        <TweakSection label="Copy">
          <TweakText
            label="CTA final (línea italic)"
            value={t.ctaCopy}
            placeholder="antes de redactar."
            onChange={v => setTweak('ctaCopy', v)}
          />
        </TweakSection>

        <TweakSection label="Secciones visibles">
          <TweakToggle label="Dashboard mockup"        value={t.showDashboard}   onChange={v => setTweak('showDashboard', v)} />
          <TweakToggle label="Fuentes oficiales"       value={t.showLogoCloud}   onChange={v => setTweak('showLogoCloud', v)} />
          <TweakToggle label="Beneficios (4 cards)"    value={t.showBeneficios}  onChange={v => setTweak('showBeneficios', v)} />
          <TweakToggle label="4 Modos"                 value={t.showModes}       onChange={v => setTweak('showModes', v)} />
          <TweakToggle label="Comparativa"             value={t.showComparativa} onChange={v => setTweak('showComparativa', v)} />
          <TweakToggle label="Seguridad"               value={t.showSeguridad}   onChange={v => setTweak('showSeguridad', v)} />
          <TweakToggle label="Precios"                 value={t.showPricing}     onChange={v => setTweak('showPricing', v)} />
          <TweakToggle label="CTA Aurora"              value={t.showCta}         onChange={v => setTweak('showCta', v)} />
        </TweakSection>

        <TweakSection label="Demo">
          <TweakButton
            label="Resetear contador de consultas"
            onClick={() => {
              try {
                localStorage.removeItem('mentaly_anon_count');
                localStorage.removeItem('mentaly_anon_used');
                localStorage.removeItem('mentaly_welcomed_v2');
                localStorage.removeItem('mentaly_settings_v1');
              } catch (e) {}
              location.reload();
            }}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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