/* global React, ReactDOM, CONTENT, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle */
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#5fb4ff",
  "lang": "de",
  "motion": "full",
  "glow": true
}/*EDITMODE-END*/;

const ACCENT_PALETTES = [
  { name: "Cyan", color: "#5fb4ff", deep: "#1e63d6", glow: "95 180 255" },
  { name: "Amber", color: "#ffb547", deep: "#c87800", glow: "255 181 71" },
  { name: "Lime",  color: "#bef264", deep: "#65a30d", glow: "190 242 100" },
  { name: "Coral", color: "#ff7a8a", deep: "#c2185b", glow: "255 122 138" },
];

function App() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const t = (CONTENT[tw.lang] || CONTENT.de);
  const [scrolled, setScrolled] = useState(false);
  const glowRef = useRef(null);

  // theme
  useEffect(() => {
    document.documentElement.setAttribute("data-theme", tw.theme);
  }, [tw.theme]);

  // accent
  useEffect(() => {
    const pal = ACCENT_PALETTES.find((p) => p.color === tw.accent) || ACCENT_PALETTES[0];
    document.documentElement.style.setProperty("--accent", pal.color);
    document.documentElement.style.setProperty("--accent-deep", pal.deep);
    document.documentElement.style.setProperty("--accent-glow", pal.glow);
    document.documentElement.style.setProperty(
      "--grid",
      `rgba(${pal.glow.split(" ").join(", ")}, ${tw.theme === "light" ? 0.07 : 0.06})`
    );
  }, [tw.accent, tw.theme]);

  // scroll state
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // cursor glow
  useEffect(() => {
    if (!tw.glow) {
      if (glowRef.current) glowRef.current.style.opacity = 0;
      return;
    }
    const el = glowRef.current;
    if (!el) return;
    el.style.opacity = "1";
    let raf;
    let tx = window.innerWidth / 2, ty = window.innerHeight / 2;
    let x = tx, y = ty;
    const move = (e) => { tx = e.clientX; ty = e.clientY; };
    window.addEventListener("mousemove", move);
    const loop = () => {
      x += (tx - x) * 0.12;
      y += (ty - y) * 0.12;
      el.style.transform = `translate(${x}px, ${y}px) translate(-50%, -50%)`;
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => {
      window.removeEventListener("mousemove", move);
      cancelAnimationFrame(raf);
    };
  }, [tw.glow]);

  // motion intensity (reduce: disable hero canvas animation rate? — handled by data attr)
  useEffect(() => {
    document.documentElement.setAttribute("data-motion", tw.motion);
  }, [tw.motion]);

  return (
    <>
      <div className="cursor-glow" ref={glowRef}></div>

      <header className={`topbar ${scrolled ? "scrolled" : ""}`}>
        <a href="#top" className="brand">
          <span className="brand-mark"><img src="assets/logo.png" alt="" /></span>
          <span>Mijeraki Digital</span>
        </a>
        <nav className="nav">
          <a href="#process">{t.nav.process}</a>
          <a href="#services">{t.nav.services}</a>
          <a href="#work">{t.nav.work}</a>
          <a href="#about">{t.nav.about}</a>
          <a href="#faq">{t.nav.faq}</a>
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <div className="lang-toggle" role="group" aria-label="Language">
            {["de", "en"].map((l) => (
              <button
                key={l}
                className={tw.lang === l ? "is-active" : ""}
                onClick={() => setTweak("lang", l)}
              >
                {l.toUpperCase()}
              </button>
            ))}
          </div>
          <a href="#contact" className="btn btn-primary" style={{ padding: "10px 16px" }}>
            {t.hero.cta}
          </a>
        </div>
      </header>

      <Hero t={t} />
      <Marquee items={t.marquee} />
      <Process t={t} />
      <Services t={t} />
      <BeforeAfter t={t} />
      <About t={t} />
      <FAQ t={t} />
      <CTA t={t} />
      <Footer t={t} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio
          label="Mode"
          value={tw.theme}
          onChange={(v) => setTweak("theme", v)}
          options={[
            { value: "dark", label: "Dark" },
            { value: "light", label: "Light" },
          ]}
        />
        <TweakSection label="Accent" />
        <TweakColor
          label="Accent color"
          value={tw.accent}
          onChange={(v) => setTweak("accent", v)}
          options={ACCENT_PALETTES.map((p) => p.color)}
        />
        <TweakSection label="Language" />
        <TweakRadio
          label="DE / EN"
          value={tw.lang}
          onChange={(v) => setTweak("lang", v)}
          options={[
            { value: "de", label: "Deutsch" },
            { value: "en", label: "English" },
          ]}
        />
        <TweakSection label="Motion" />
        <TweakToggle
          label="Cursor glow"
          value={tw.glow}
          onChange={(v) => setTweak("glow", v)}
        />
      </TweaksPanel>
    </>
  );
}

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