/* global React, ReactDOM, Nav, Ticker, Hero, Services, Marquee, Kpis, MapSection, Process, Clients, Faq, CtaBand, Contact, Footer, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor, TweakSelect */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light-pro",
  "accent": "#C41E1E",
  "accent2": "#8B9D5A",
  "display": "grotesk"
}/*EDITMODE-END*/;

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

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.theme);
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.style.setProperty('--accent-2', t.accent2);
    const displays = {
      fraunces: "'Fraunces', 'Space Grotesk', Georgia, serif",
      grotesk:  "'Space Grotesk', 'Inter', sans-serif",
    };
    document.documentElement.style.setProperty('--f-display', displays[t.display] || displays.fraunces);
  }, [t]);

  return (
    <>
      <div className="grid-bg"/>
      <Nav/>
      <Ticker/>
      <Hero/>
      <Services/>
      <Marquee/>
      <Kpis/>
      <MapSection/>
      <Process/>
      <Faq/>
      <CtaBand/>
      <Contact/>
      <Footer/>

      <TweaksPanel title="Tweaks · MexiCarrier">
        <TweakSection title="Tema visual">
          <TweakRadio value={t.theme} onChange={v => setT({ theme: v })}
            options={[
              { value: 'crema', label: 'Crema editorial' },
              { value: 'light-pro', label: 'Light pro' },
              { value: 'dark-terminal', label: 'Dark terminal' },
            ]}/>
        </TweakSection>
        <TweakSection title="Tipografía display">
          <TweakRadio value={t.display} onChange={v => setT({ display: v })}
            options={[
              { value: 'fraunces', label: 'Fraunces italic (editorial)' },
              { value: 'grotesk', label: 'Space Grotesk (técnico)' },
            ]}/>
        </TweakSection>
        <TweakSection title="Color acento">
          <TweakColor value={t.accent} onChange={v => setT({ accent: v })}/>
        </TweakSection>
        <TweakSection title="Color acento secundario">
          <TweakColor value={t.accent2} onChange={v => setT({ accent2: v })}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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