/* global React, ReactDOM, useReveal,
   Header, Hero, LogosCarousel, DisconnectSection, SpeiGlobalSection, AudiencesSection, CasosUsoSection, TransparencySection, ContinuitySection, FeaturesSection,
   StatsSection, SecuritySection, TestimonialsSection, FAQSection,
   AppSection, OfficesSection, WhatsAppFab,
   FinalCtaSection, Footer,
   TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle, TweakSelect */

const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "intensity": "balanced",
  "heroVariant": "A",
  "navMobile": "menu"
}/*EDITMODE-END*/;

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

  useEffect(() => {
    document.documentElement.setAttribute("data-intensity", t.intensity);
  }, [t.intensity]);

  return (
    <>
      <Header mobileNav={t.navMobile}/>
      <main>
        <Hero variant={t.heroVariant}/>
        <LogosCarousel/>
        <SpeiGlobalSection/>
        <AudiencesSection/>
        <CasosUsoSection/>
        <FeaturesSection/>
        <ContinuitySection/>
        <TransparencySection/>
        <SecuritySection/>
        <TestimonialsSection/>
        <AppSection/>
        <OfficesSection/>
        <FAQSection/>
        <FinalCtaSection/>
      </main>
      <Footer/>

      <WhatsAppFab/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Animación">
          <TweakRadio
            label="Densidad"
            value={t.intensity}
            options={[
              { value: "subtle",   label: "Sutil"   },
              { value: "balanced", label: "Balance" },
              { value: "bold",     label: "Atrevida" },
            ]}
            onChange={(v) => setTweak("intensity", v)}
          />
        </TweakSection>

        <TweakSection label="Hero">
          <TweakRadio
            label="Variante"
            value={t.heroVariant}
            options={[
              { value: "A", label: "A · Cards" },
              { value: "B", label: "B · Live"  },
              { value: "C", label: "C · Mín."  },
            ]}
            onChange={(v) => setTweak("heroVariant", v)}
          />
        </TweakSection>

        <TweakSection label="Nav móvil">
          <TweakRadio
            label="En teléfono"
            value={t.navMobile}
            options={[
              { value: "menu",  label: "Hamburguesa" },
              { value: "fixed", label: "Botón fijo"  },
            ]}
            onChange={(v) => setTweak("navMobile", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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