/* Squol landing — app shell + Tweaks */
const { useState: useStateA } = React;

function SquolTweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Marca">
        <TweakColor
          label="Color de acento"
          value={t.accent}
          onChange={(v) => {
            setTweak('accent', v);
            document.documentElement.style.setProperty('--accent', v);
          }}
          options={['#FF8A1F', '#E0B43B', '#2A6F86', '#D14A3F', '#1657F0']}
        />
      </TweakSection>
      <TweakSection label="Hero">
        <TweakRadio
          label="Fondo del hero"
          value={t.heroVariant}
          onChange={(v) => {
            setTweak('heroVariant', v);
            const hero = document.querySelector('.hero');
            if (!hero) return;
            if (v === 'solid') {
              hero.style.background = 'linear-gradient(180deg, #0E2330 0%, #1B3A4B 100%)';
            } else if (v === 'gradient') {
              hero.style.background = '';
            } else {
              hero.style.background = 'radial-gradient(900px 600px at 80% 0%, rgba(255,138,31,0.18), transparent 60%), radial-gradient(800px 600px at 0% 100%, rgba(255,255,255,0.12), transparent 60%), linear-gradient(180deg, #000 0%, #0B1A23 100%)';
            }
          }}
          options={[
            { label: 'Gradiente', value: 'gradient' },
            { label: 'Sólido', value: 'solid' },
            { label: 'Noche', value: 'night' },
          ]}
        />
        <TweakToggle
          label="Mostrar segundo iPhone flotante"
          value={t.showSecondaryPhone}
          onChange={(v) => setTweak('showSecondaryPhone', v)}
        />
      </TweakSection>
      <TweakSection label="Funciones">
        <TweakSelect
          label="Persona activa al cargar"
          value={t.personaInitial}
          onChange={(v) => setTweak('personaInitial', v)}
          options={[
            { label: '🏫 Directores', value: 'directores' },
            { label: '👨‍👩‍👧 Padres', value: 'padres' },
            { label: '👩‍🏫 Docentes', value: 'docentes' },
            { label: '🎓 Alumnos', value: 'alumnos' },
          ]}
        />
        <TweakToggle
          label="Mostrar sección de credencial QR"
          value={t.showQrSection}
          onChange={(v) => setTweak('showQrSection', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  const [legalModal, setLegalModal] = React.useState({ isOpen: false, activeTab: 'terms' });

  // Apply accent on first paint
  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
  }, [t.accent]);

  return (
    <>
      <TopNav />
      <Hero showSecondary={t.showSecondaryPhone} />
      <HowItWorks />
      <PersonaFeatures initial={t.personaInitial} key={t.personaInitial} />
      {t.showQrSection && <QrSection />}
      <Platforms />
      <Pricing />
      <Testimonials />
      <FinalCta />
      <Footer onOpenLegal={(tab) => setLegalModal({ isOpen: true, activeTab: tab })} />
      <TermsPrivacyModal
        isOpen={legalModal.isOpen}
        activeTab={legalModal.activeTab}
        onClose={() => setLegalModal((prev) => ({ ...prev, isOpen: false }))}
      />
      <SquolTweaks t={t} setTweak={setTweak} />
    </>
  );
}

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