// hombreonce — main app with router + tweaks
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "density": "comfy",
  "heroHue": 35
}/*EDITMODE-END*/;

function App() {
  const { route, sub } = useRoute();
  const [lang, setLang] = useLang();
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply theme + density + hero hue
  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme);
    document.documentElement.style.setProperty(
      "--density-pad",
      tweaks.density === "tight" ? "0.75" : tweaks.density === "airy" ? "1.2" : "1"
    );
  }, [tweaks.theme, tweaks.density]);

  React.useEffect(() => {
    // Build hero gradient palette using a single hue from tweaks
    const h = tweaks.heroHue;
    document.documentElement.style.setProperty("--hero-h", h);
  }, [tweaks.heroHue]);

  // --- Intro de carga (solo primera carga real, no en navegación interna) ---
  React.useLayoutEffect(() => {
    const root = document.documentElement;
    if (!root.classList.contains("intro-pending")) return;
    if (window.__introPlayed) return;
    window.__introPlayed = true;
    const start = () => root.classList.add("intro-go");
    // Pinta un frame con el estado inicial y dispara las animaciones. El
    // setTimeout es red de seguridad por si rAF está throttleado (tab en 2º plano).
    const raf1 = requestAnimationFrame(() => requestAnimationFrame(start));
    const startFallback = setTimeout(start, 80);
    // Al terminar, fija el estado final permanente (intro-done) y limpia las
    // clases de animación para que NO se repita al navegar de vuelta al home.
    const done = setTimeout(() => {
      root.classList.add("intro-done");
      root.classList.remove("intro-pending", "intro-go");
    }, 5000);
    return () => {
      cancelAnimationFrame(raf1);
      clearTimeout(startFallback);
      clearTimeout(done);
    };
  }, []);

  let page;
  if (route === "home" || route === "") page = <Home lang={lang} />;
  else if (route === "packaging") page = <Packaging lang={lang} />;
  else if (route === "branding") page = <Branding lang={lang} />;
  else if (route === "bag") {
    if (sub === "marketplace") page = <Marketplace lang={lang} />;
    else if (sub === "fancy-monas") page = <FancyMonas lang={lang} />;
    else if (sub === "tibetpass") page = <Tibetpass lang={lang} />;
    else page = <BAGMain lang={lang} />;
  }
  else if (route === "about") page = <About lang={lang} />;
  else if (route === "blog") {
    page = sub ? <BlogPost lang={lang} sub={sub} /> : <Blog lang={lang} />;
  }
  else page = <Home lang={lang} />;

  return (
    <>
      <Nav route={route} lang={lang} setLang={setLang} />
      {page}
      <Footer lang={lang} />
      <Lightbox />
      <div className="intro-veil" aria-hidden="true"></div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Apariencia" />
        <TweakRadio
          label="Tema"
          value={tweaks.theme}
          options={[
            { value: "dark", label: "Dark" },
            { value: "light", label: "Light" }
          ]}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakRadio
          label="Densidad"
          value={tweaks.density}
          options={[
            { value: "tight", label: "Tight" },
            { value: "comfy", label: "Comfy" },
            { value: "airy", label: "Airy" }
          ]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakSlider
          label="Hero hue"
          value={tweaks.heroHue}
          min={0} max={360} step={5} unit="°"
          onChange={(v) => setTweak("heroHue", v)}
        />

        <TweakSection label="Idioma" />
        <TweakRadio
          label="Idioma"
          value={lang}
          options={[
            { value: "es", label: "ES" },
            { value: "en", label: "EN" }
          ]}
          onChange={setLang}
        />
      </TweaksPanel>
    </>
  );
}

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