/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSlider, TweakSelect */
const { useState, useCallback, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "left",
  "diagramVariant": "network",
  "marqueeSpeed": 55
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [toasts, setToasts] = useState([]);

  useEffect(() => {
    const { gsap, ScrollTrigger } = window;
    if (!gsap || !ScrollTrigger) return;
    gsap.registerPlugin(ScrollTrigger);
  }, []);

  const pushToast = useCallback((message) => {
    const id = Math.random().toString(36).slice(2);
    setToasts((t) => [...t, { id, message }]);
    setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 3800);
  }, []);

  const navigate = useCallback((id) => {
    if (id === 'top') {
      window.scrollTo({ top: 0, behavior: 'smooth' });
      return;
    }
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }, []);

  return (
    <React.Fragment>
      <window.FlowArtEffect />
      <window.Navbar onNavigate={navigate} />
      <main>
        <window.Hero layout={tweaks.heroLayout} />
        <window.Capacidades />

        <window.SectionTitle
          id="nosotros"
          label="¿Quiénes somos?"
          lines={[
            { text: 'La estructura invisible', accent: false },
            { text: 'hecha tangible.', accent: true },
          ]}
        />
        <window.Nosotros />

        <window.SectionTitle
          id="problema"
          label="La Realidad"
          lines={[
            { text: 'Tu negocio creció.', accent: false },
            { text: 'Tu operación, no.', accent: true },
            { text: 'Con cada herramienta nueva', accent: false },
            { text: 'se vuelve más caro decidir.', accent: false },
          ]}
          size="clamp(36px, 4.5vw, 64px)"
        />
        <window.Problema />

        <window.SectionTitle
          id="sistema"
          label="El Sistema"
          lines={[
            { text: 'Un solo motor para', accent: false },
            { text: 'marca, datos y producto.', accent: false },
          ]}
        />
        <window.Sistema diagramVariant={tweaks.diagramVariant} />

        <window.SectionTitle
          id="proceso"
          label="Proceso"
          lines={[
            { text: 'Cuatro pasos. Sin ruido.', accent: false },
            { text: 'Sin reuniones que no', accent: false },
            { text: 'llegan a nada.', accent: true },
          ]}
          size="clamp(36px, 4.5vw, 64px)"
        />
        <window.Proceso />

        <window.SectionTitle
          id="servicios"
          label="Servicios"
          lines={[
            { text: 'Seis paquetes.', accent: false },
            { text: 'Un mismo sistema.', accent: true },
            { text: 'Elige por dónde entrar.', accent: false },
          ]}
        />
        <window.Servicios />

        <window.Marquee speed={Number(tweaks.marqueeSpeed)} />
        <window.Contacto pushToast={pushToast} />
      </main>
      <window.Footer />
      <window.ToastHost toasts={toasts} />

      {false && <TweaksPanel>
        <TweakSection label="Hero">
          <TweakRadio label="Alignment"
            value={tweaks.heroLayout}
            onChange={(v) => setTweak('heroLayout', v)}
            options={[
              { value: 'left',   label: 'Izquierda' },
              { value: 'center', label: 'Centrado' },
            ]} />
        </TweakSection>

        <TweakSection label="Diagrama de sistema">
          <TweakSelect label="Variant"
            value={tweaks.diagramVariant}
            onChange={(v) => setTweak('diagramVariant', v)}
            options={[
              { value: 'network',       label: 'Network · hub-and-spoke' },
              { value: 'radial',        label: 'Radial · anillos' },
              { value: 'constellation', label: 'Constellation · star map' },
            ]} />
        </TweakSection>

        <TweakSection label="Marquee">
          <TweakSlider label="Speed (s per loop)"
            min={4} max={32} step={1}
            value={Number(tweaks.marqueeSpeed)}
            onChange={(v) => setTweak('marqueeSpeed', v)} />
          <div style={{ fontFamily: 'var(--font-arimo)', fontSize: 11, color: 'var(--color-text-tertiary)', marginTop: -4 }}>
            Más bajo = más rápido. 12s es el default.
          </div>
        </TweakSection>
      </TweaksPanel>}
    </React.Fragment>
  );
}

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