/* global React, ReactDOM */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "photo",
  "accentPalette": "default",
  "showGovernance": true
}/*EDITMODE-END*/;

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

  // Apply accent palette
  useEffect(() => {
    const root = document.documentElement;
    if (t.accentPalette === "warm") {
      root.style.setProperty("--color-sky-blue", "#ff6d39");
      root.style.setProperty("--color-hint-of-blue", "#fde2d4");
      root.style.setProperty("--color-outline-blue", "#ffb695");
    } else if (t.accentPalette === "green") {
      root.style.setProperty("--color-sky-blue", "#114e0b");
      root.style.setProperty("--color-hint-of-blue", "#d3eccd");
      root.style.setProperty("--color-outline-blue", "#7cbf66");
    } else {
      root.style.removeProperty("--color-sky-blue");
      root.style.removeProperty("--color-hint-of-blue");
      root.style.removeProperty("--color-outline-blue");
    }
  }, [t.accentPalette]);

  return (
    <>
      <Nav />
      <Hero heroVariant={t.heroVariant} shapeStyle="geometric" />
      <Diagnostic />
      <Solutions />
      <Methodology />
      <QualificationForm />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero">
          <TweakRadio
            label="Imagen del hero"
            value={t.heroVariant}
            options={[
              { value: "photo", label: "Retrato" },
              { value: "system", label: "Sistema" }
            ]}
            onChange={(v) => setTweak("heroVariant", v)}
          />
        </TweakSection>

        <TweakSection label="Color de acento">
          <TweakRadio
            label="Paleta"
            value={t.accentPalette}
            options={[
              { value: "default", label: "Azul" },
              { value: "warm", label: "Naranja" },
              { value: "green", label: "Verde" }
            ]}
            onChange={(v) => setTweak("accentPalette", v)}
          />
        </TweakSection>

        <TweakSection label="Secciones">
          <TweakToggle
            label="Mostrar gobernanza"
            value={t.showGovernance}
            onChange={(v) => setTweak("showGovernance", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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