/* Root composition + Tweaks integration */
const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakColor, TweakSelect } = window;
const { useState, useEffect, useRef } = React;

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

  // Apply palette + font classes to <body>
  React.useEffect(() => {
    document.body.classList.remove("palette-warm", "palette-cool", "palette-mono");
    if (tweaks.palette === "warm") document.body.classList.add("palette-warm");
    if (tweaks.palette === "cool") document.body.classList.add("palette-cool");
    if (tweaks.palette === "mono") document.body.classList.add("palette-mono");

    document.body.classList.remove("font-tiempos", "font-redaction");
    if (tweaks.headingFont === "Cormorant") document.body.classList.add("font-tiempos");
    if (tweaks.headingFont === "DMSerif") document.body.classList.add("font-redaction");
  }, [tweaks.palette, tweaks.headingFont]);

  return (
    <>
      <Hero tweaks={tweaks} />
      <Nosotros tweaks={tweaks} />
      <Servicios />
      <Equipo />
      <Instalaciones />
      <Habitaciones />
      <CentroDia />
      <Rehabilitacion />
      <Paliativos />
      <Recreo />
      <Galeria />
      <Instagram />
      <Organigrama />
      <Acreditaciones />
      <Ubicacion />
      <Trabajo />
      <Contacto />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Paleta">
          <TweakSelect label="Esquema" value={tweaks.palette} onChange={(v) => setTweak("palette", v)}
            options={[
              { value: "navyCoral", label: "Navy + Coral" },
              { value: "warm", label: "Tierra cálida" },
              { value: "cool", label: "Sereno" },
              { value: "mono", label: "Monocromo" },
            ]} />
        </TweakSection>
        <TweakSection label="Tipografía">
          <TweakSelect label="Display font" value={tweaks.headingFont} onChange={(v) => setTweak("headingFont", v)}
            options={[
              { value: "Fraunces", label: "Fraunces" },
              { value: "Cormorant", label: "Cormorant" },
              { value: "DMSerif", label: "DM Serif" },
            ]} />
        </TweakSection>
        <TweakSection label="Hero">
          <TweakToggle label="Audio del video" value={!tweaks.videoMuted} onChange={(v) => setTweak("videoMuted", !v)} />
        </TweakSection>
        <TweakSection label="Detalles">
          <TweakToggle label="Motivo floral" value={tweaks.showFloral} onChange={(v) => setTweak("showFloral", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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