/* global React, ReactDOM, SLNav, SLHero, SLNosotros, SLStats, SLServicios, SLProceso, SLEmpresas, SLFAQ, SLContacto, SLFooter, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "blue",
  "density": "comfortable"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const root = document.documentElement;
    if (tweaks.accent === "green") {
      root.style.setProperty("--brand", "#0d8c72");
      root.style.setProperty("--brand-deep", "#0a6f5a");
      root.style.setProperty("--brand-soft", "#e6f4f0");
      root.style.setProperty("--brand-tint", "#f3faf7");
    } else {
      root.style.setProperty("--brand", "#1d4596");
      root.style.setProperty("--brand-deep", "#143372");
      root.style.setProperty("--brand-soft", "#eaf0fa");
      root.style.setProperty("--brand-tint", "#f4f7fc");
    }
    if (tweaks.density === "compact") {
      root.style.setProperty("--container", "1180px");
    } else {
      root.style.setProperty("--container", "1240px");
    }
  }, [tweaks]);

  return (
    <>
      <SLNav />
      <SLHero variant={tweaks.heroVariant} />
      <SLNosotros />
      <SLStats />
      <SLServicios />
      <SLServiciosCorp />
      <SLProceso />
      <SLEmpresas />
      <SLFAQ />
      <SLContacto />
      <SLFooter />

      <TweaksPanel title="Tweaks · Salud Laboral">
        <TweakSection title="Color dominante">
          <TweakRadio
            label="Acento principal"
            value={tweaks.accent}
            options={[
              { value: "blue", label: "Azul (logo)" },
              { value: "green", label: "Verde" },
            ]}
            onChange={(v) => setTweak("accent", v)}
          />
        </TweakSection>
        <TweakSection title="Layout">
          <TweakRadio
            label="Densidad"
            value={tweaks.density}
            options={[
              { value: "comfortable", label: "Amplio" },
              { value: "compact", label: "Compacto" },
            ]}
            onChange={(v) => setTweak("density", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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