const DEFAULT_TWEAKS = /*EDITMODE-BEGIN*/{
  "accent": "verde",
  "theme": "light",
  "headline": "criterio",
  "density": "editorial"
}/*EDITMODE-END*/;

const WA_NUMBER = "5491132373683";
const WA_MSG = "Hola Hey Bots 👋 Vengo de la web y quiero agendar un diagnóstico.";
const waLink = () => `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent(WA_MSG)}`;
const openWhatsApp = () => window.open(waLink(), "_blank", "noopener");

function App() {
  const [values, setTweak] = useTweaks(DEFAULT_TWEAKS);

  React.useEffect(() => {
    const root = document.documentElement;
    if (values.accent === "verde") root.removeAttribute("data-accent");
    else root.setAttribute("data-accent", values.accent);
    root.setAttribute("data-theme", values.theme);
    root.style.setProperty("--density", values.density === "compacto" ? "0.72" : "1");
  }, [values]);

  return (
    <>
      <Nav onWhatsApp={openWhatsApp} />
      <Hero variant={values.headline} onWhatsApp={openWhatsApp} />
      <Problem />
      <Services onWhatsApp={openWhatsApp} />
      <Process />
      <Scenarios />
      <Founder />
      <Faq />
      <CtaFinal onWhatsApp={openWhatsApp} />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Acento de color" />
        <TweakRadio
          label="Acento"
          value={values.accent}
          options={[
            { value: "verde", label: "Verde" },
            { value: "terracota", label: "Terracota" },
            { value: "azul-noche", label: "Azul noche" },
          ]}
          onChange={(v) => setTweak("accent", v)}
        />

        <TweakSection label="Modo" />
        <TweakRadio
          label="Tema"
          value={values.theme}
          options={[
            { value: "light", label: "Claro" },
            { value: "dark", label: "Oscuro" },
          ]}
          onChange={(v) => setTweak("theme", v)}
        />

        <TweakSection label="Titular del hero" />
        <TweakRadio
          label="Variante"
          value={values.headline}
          options={[
            { value: "criterio", label: "Criterio" },
            { value: "uno_x_uno", label: "Uno x uno" },
            { value: "medida", label: "A medida" },
          ]}
          onChange={(v) => setTweak("headline", v)}
        />

        <TweakSection label="Densidad" />
        <TweakRadio
          label="Espaciado"
          value={values.density}
          options={[
            { value: "editorial", label: "Editorial" },
            { value: "compacto", label: "Compacto" },
          ]}
          onChange={(v) => setTweak("density", v)}
        />
      </TweaksPanel>
    </>
  );
}

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