/* global React, ReactDOM
   Nav, StickyCTA, Hero, Credibility,
   Solutions, Process, Calculator,
   Dashboard, Cases, PublicSector,
   Team, Resources, FinalCTA, Footer, CalendarModal, WhatsAppFloat,
   DesignSystemPanel,
   useTweaks, TweaksPanel, TweakSection, TweakToggle, TweakColor, TweakButton */

const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "showStickyCTA": true,
  "showWhatsappFloat": true,
  "showDensity": "high",
  "accentColor": "#FFB800",
  "darkMode": false
}/*EDITMODE-END*/;

function App() {
  const [calOpen, setCalOpen] = useStateApp(false);
  const [dsOpen, setDsOpen] = useStateApp(false);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply dark mode
  useEffectApp(() => {
    if (t.darkMode) {
      document.documentElement.setAttribute('data-theme', 'dark');
    } else {
      document.documentElement.removeAttribute('data-theme');
    }
  }, [t.darkMode]);

  // Apply accent color
  useEffectApp(() => {
    document.documentElement.style.setProperty('--solar', t.accentColor);
  }, [t.accentColor]);

  return (
    <>
      <Nav onOpenCalendar={() => setCalOpen(true)} />
      {t.showStickyCTA && <StickyCTA onOpenCalendar={() => setCalOpen(true)} />}
      <Hero onOpenCalendar={() => setCalOpen(true)} />
      <Credibility />
      <Solutions />
      <Process />
      <Calculator onRequestPreFactibility={() => setCalOpen(true)} />
      <Dashboard />
      <Cases />
      <PublicSector />
      <Team />
      <Resources />
      <FinalCTA onOpenCalendar={() => setCalOpen(true)} />
      <Footer />

      {t.showWhatsappFloat && <WhatsAppFloat />}

      <CalendarModal open={calOpen} onClose={() => setCalOpen(false)} />
      <DesignSystemPanel open={dsOpen} onClose={() => setDsOpen(false)} />

      <TweaksPanel title="Tweaks · SLF">
        <TweakSection label="Modo">
          <TweakToggle label="Modo oscuro" value={t.darkMode} onChange={(v) => setTweak('darkMode', v)} />
        </TweakSection>
        <TweakSection label="Chrome">
          <TweakToggle label="Sticky CTA al hacer scroll" value={t.showStickyCTA} onChange={(v) => setTweak('showStickyCTA', v)} />
          <TweakToggle label="WhatsApp flotante" value={t.showWhatsappFloat} onChange={(v) => setTweak('showWhatsappFloat', v)} />
        </TweakSection>
        <TweakSection label="Acento solar">
          <TweakColor
            label="Color de acento"
            value={t.accentColor}
            onChange={(v) => setTweak('accentColor', v)}
            options={['#FFB800', '#FF9900', '#F2B233', '#FFD55A']}
          />
        </TweakSection>
        <TweakSection label="Design System">
          <TweakButton label="Ver panel de design system" onClick={() => setDsOpen(true)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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