// KineSuite landing — root app with Tweaks panel.

const { useState: useStateL, useEffect: useEffectL } = React;

const LANDING_DEFAULTS = /*EDITMODE-BEGIN*/{
  "language": "es",
  "theme": "light",
  "heroVariant": "split",
  "heroAnimated": true,
  "showStrip": true,
  "showCatalog": true,
  "showHow": true,
  "showCategories": true,
  "showCompare": true,
  "showPdf": true,
  "showPrivacy": true,
  "showClinics": true,
  "showTeam": true,
  "showFaq": true,
  "showNotify": true,
  "showChangelog": true,
  "showFinal": true,
  "showCookies": true
}/*EDITMODE-END*/;

function LandingTweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks · Landing">
      <TweakSection label="Idioma & modo">
        <TweakRadio
          label="Idioma"
          value={t.language}
          options={[
            { value: 'es', label: 'ES' },
            { value: 'en', label: 'EN' },
          ]}
          onChange={(v) => setTweak('language', v)}
        />
        <TweakRadio
          label="Modo"
          value={t.theme}
          options={[
            { value: 'light', label: 'Claro' },
            { value: 'dark',  label: 'Oscuro' },
          ]}
          onChange={(v) => setTweak('theme', v)}
        />
      </TweakSection>

      <TweakSection label="Hero">
        <TweakSelect
          label="Variante"
          value={t.heroVariant}
          options={[
            { value: 'split',     label: 'Split — copy izq / teléfono der' },
            { value: 'centered',  label: 'Centrado — copy arriba, teléfono debajo' },
            { value: 'editorial', label: 'Editorial — headline gigante, teléfono offset' },
          ]}
          onChange={(v) => setTweak('heroVariant', v)}
        />
        <TweakToggle
          label="Teléfono animado (video del flow)"
          value={t.heroAnimated}
          onChange={(v) => setTweak('heroAnimated', v)}
        />
      </TweakSection>

      <TweakSection label="Mostrar secciones">
        <TweakToggle label="Strip de credenciales"  value={t.showStrip}      onChange={(v) => setTweak('showStrip', v)} />
        <TweakToggle label="Catálogo de escalas"    value={t.showCatalog}    onChange={(v) => setTweak('showCatalog', v)} />
        <TweakToggle label="Cómo funciona"          value={t.showHow}        onChange={(v) => setTweak('showHow', v)} />
        <TweakToggle label="Áreas clínicas"         value={t.showCategories} onChange={(v) => setTweak('showCategories', v)} />
        <TweakToggle label="Comparativa Papel/Excel" value={t.showCompare}   onChange={(v) => setTweak('showCompare', v)} />
        <TweakToggle label="Reporte PDF"            value={t.showPdf}        onChange={(v) => setTweak('showPdf', v)} />
        <TweakToggle label="Privacidad"             value={t.showPrivacy}    onChange={(v) => setTweak('showPrivacy', v)} />
        <TweakToggle label="Para clínicas (B2B)"    value={t.showClinics}    onChange={(v) => setTweak('showClinics', v)} />
        <TweakToggle label="Equipo & créditos"      value={t.showTeam}       onChange={(v) => setTweak('showTeam', v)} />
        <TweakToggle label="FAQ"                    value={t.showFaq}        onChange={(v) => setTweak('showFaq', v)} />
        <TweakToggle label="Notify-me · próximas"   value={t.showNotify}     onChange={(v) => setTweak('showNotify', v)} />
        <TweakToggle label="Changelog"              value={t.showChangelog}  onChange={(v) => setTweak('showChangelog', v)} />
        <TweakToggle label="CTA final"              value={t.showFinal}      onChange={(v) => setTweak('showFinal', v)} />
      </TweakSection>

      <TweakSection label="Extras">
        <TweakToggle label="Banner de cookies"      value={t.showCookies}    onChange={(v) => setTweak('showCookies', v)} />
        <TweakButton
          label="Resetear cookies / notify-me"
          secondary
          onClick={() => {
            try {
              localStorage.removeItem('kinesuite-cookies');
              localStorage.removeItem('kinesuite-notify');
            } catch {}
            window.location.reload();
          }}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

function LandingApp() {
  const [t, setTweak] = useTweaks(LANDING_DEFAULTS);
  const copy = LANDING_COPY[t.language];

  useEffectL(() => {
    document.documentElement.setAttribute('data-theme', t.theme);
    try { localStorage.setItem('kinesuite-theme', t.theme); } catch {}
  }, [t.theme]);

  useEffectL(() => {
    document.documentElement.setAttribute('lang', t.language);
    try { localStorage.setItem('kinesuite-lang', t.language); } catch {}
    if (window.KineSuiteSEO) window.KineSuiteSEO.apply(t.language);
  }, [t.language]);

  return (
    <React.Fragment>
      <div className="page-wrap">
        <LandingNav
          t={copy}
          lang={t.language}
          setLang={(v) => setTweak('language', v)}
          theme={t.theme}
          setTheme={(v) => setTweak('theme', v)}
        />

        <HeroSection
          variant={t.heroVariant}
          t={copy}
          lang={t.language}
          animated={t.heroAnimated}
        />

        {t.showStrip      && <StripSection      t={copy} />}
        {t.showCatalog    && <CatalogSection    t={copy} lang={t.language} />}
        {t.showHow        && <HowSection        t={copy} />}
        {t.showCategories && <CategoriesSection t={copy} lang={t.language} />}
        {t.showCompare    && <ComparisonSection t={copy} />}
        {t.showPdf        && <PdfSection        t={copy} lang={t.language} />}
        {t.showPrivacy    && <PrivacySection    t={copy} />}
        {t.showClinics    && <ClinicsSection    t={copy} lang={t.language} />}
        {t.showTeam       && <TeamSection       t={copy} />}
        {t.showFaq        && <FaqSection        t={copy} />}
        {t.showNotify     && <NotifySection     t={copy} />}
        {t.showChangelog  && <ChangelogSection  t={copy} />}
        {t.showFinal      && <FinalCtaSection   t={copy} lang={t.language} />}

        <FooterSection t={copy} lang={t.language} setLang={(v) => setTweak('language', v)} />
      </div>

      {t.showCookies && <CookieBanner t={copy} />}

      {window.__TWEAKS_ENABLED && <LandingTweaks t={t} setTweak={setTweak} />}
    </React.Fragment>
  );
}

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