/* Root del portafolio + Tweaks */
const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#5b9dff",
  "motion": 1,
  "blur": 22,
  "grid": true,
  "defaultLang": "es"
}/*EDITMODE-END*/;

function hexToRgb(hex) {
  const h = hex.replace("#", "");
  const n = parseInt(h.length === 3 ? h.split("").map(c => c + c).join("") : h, 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
}
function lighten(hex, amt) {
  const { r, g, b } = hexToRgb(hex);
  const f = (c) => Math.round(c + (255 - c) * amt);
  return `rgb(${f(r)}, ${f(g)}, ${f(b)})`;
}
function rgba(hex, a) {
  const { r, g, b } = hexToRgb(hex);
  return `rgba(${r}, ${g}, ${b}, ${a})`;
}

function applyTheme(t) {
  const root = document.documentElement.style;
  root.setProperty("--accent", t.accent);
  root.setProperty("--accent-2", lighten(t.accent, 0.4));
  root.setProperty("--accent-glow", rgba(t.accent, 0.45));
  root.setProperty("--accent-soft", rgba(t.accent, 0.12));
  root.setProperty("--motion", String(t.motion));
  root.setProperty("--glass-blur", t.blur + "px");
}

/* Parallax del fondo según el cursor */
function useParallax(motion) {
  useEffectA(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const auroras = document.querySelectorAll(".aurora");
    let raf = null;
    const onMove = (e) => {
      const x = (e.clientX / window.innerWidth - 0.5);
      const y = (e.clientY / window.innerHeight - 0.5);
      if (raf) cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        auroras.forEach((a, i) => {
          const depth = (i + 1) * 14 * motion;
          a.style.marginLeft = (x * depth) + "px";
          a.style.marginTop = (y * depth) + "px";
        });
      });
    };
    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, [motion]);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useStateA(TWEAK_DEFAULTS.defaultLang);

  useEffectA(() => { applyTheme(t); }, [t.accent, t.motion, t.blur]);
  useEffectA(() => { setLang(t.defaultLang); }, [t.defaultLang]);
  useEffectA(() => { document.documentElement.lang = lang; }, [lang]);

  useReveal();
  useParallax(t.motion);

  const tr = window.I18N[lang];

  return (
    <React.Fragment>
      <Nav t={tr} lang={lang} setLang={setLang} />
      <main>
        <Hero t={tr} lang={lang} />
        <Stats t={tr} />
        <About t={tr} />
        <Experience t={tr} lang={lang} />
        <Skills t={tr} lang={lang} />
        <Projects t={tr} lang={lang} />
        <Education t={tr} lang={lang} />
        <Contact t={tr} />
      </main>
      <Footer t={tr} />

      <TweaksPanel title="Tweaks">
        <TweakSection label={lang === "es" ? "Identidad" : "Identity"} />
        <TweakColor label={lang === "es" ? "Acento" : "Accent"} value={t.accent}
          options={["#5b9dff", "#38e8ff", "#9b7bff", "#34e0a1", "#ff7a8a"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakRadio label={lang === "es" ? "Idioma inicial" : "Default language"} value={t.defaultLang}
          options={["es", "en"]} onChange={(v) => setTweak("defaultLang", v)} />
        <TweakSection label={lang === "es" ? "Movimiento y vidrio" : "Motion & glass"} />
        <TweakSlider label={lang === "es" ? "Intensidad de movimiento" : "Motion intensity"} value={t.motion}
          min={0.4} max={1.4} step={0.1} onChange={(v) => setTweak("motion", v)} />
        <TweakSlider label={lang === "es" ? "Desenfoque del vidrio" : "Glass blur"} value={t.blur}
          min={6} max={36} step={2} unit="px" onChange={(v) => setTweak("blur", v)} />
        <TweakToggle label={lang === "es" ? "Cuadrícula de fondo" : "Background grid"} value={t.grid}
          onChange={(v) => setTweak("grid", v)} />
      </TweaksPanel>

      <GridToggle on={t.grid} />
    </React.Fragment>
  );
}

function GridToggle({ on }) {
  useEffectA(() => {
    const g = document.querySelector(".bg-grid");
    if (g) g.style.display = on ? "block" : "none";
  }, [on]);
  return null;
}

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