/* App shell: nav, intro overlay, language, scroll reveal, parallax, tweaks. */
const { useState: useS, useEffect: useE, useRef: useR } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#121210",
  "color": false,
  "heroLayout": "left"
} /*EDITMODE-END*/;

function Nav({ lang, setLang }) {
  const N = window.CONTENT.nav;
  return (
    <nav className="nav">
      <a className="nav__brand" href="#top"><span className="dot"></span>Marcus Martins</a>
      <div className="nav__links">
        <a className="nav__link" href="#work">{N.work[lang]}</a>
        <a className="nav__link" href="#about">{N.about[lang]}</a>
        <a className="nav__link" href="#contact">{N.contact[lang]}</a>
        <a className="nav__link" href="https://drive.google.com/drive/folders/1_N8DxN5efVmFfhIeP_FvornGDYN33BJC?usp=sharing" target="_blank" rel="noreferrer">{N.resume[lang]} ↗</a>
        <div className="lang">
          <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
          <button className={lang === "pt" ? "on" : ""} onClick={() => setLang("pt")}>PT</button>
        </div>
      </div>
    </nav>);

}

function Intro() {
  const [n, setN] = useS(0);
  useE(() => {
    let raf, start;
    const dur = 2200;
    const tick = (ts) => {
      if (!start) start = ts;
      const p = Math.min(1, (ts - start) / dur);
      setN(Math.round(p * 100));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);
  return (
    <div className="intro">
      <div className="intro__txt"><span>Marcus Martins</span><span className="intro__count">{String(n).padStart(3, "0")}</span></div>
    </div>);

}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useS("en");
  const [introKey, setIntroKey] = useS(0);

  // intro + hero entrances are pure CSS (mount-driven); no JS timers needed.

  // apply tweaks -> CSS vars / body classes
  useE(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", t.accent);
    r.style.setProperty("--accent-on", t.accent === "#121210" ? "#efeee9" : "#0b0b0c");
    document.body.classList.toggle("show-color", !!t.color);
    document.body.classList.toggle("t-center", t.heroLayout === "center");
  }, [t.accent, t.color, t.heroLayout]);

  // scroll reveal via rAF + getBoundingClientRect -> data-rev (reliable; survives re-render)
  useE(() => {
    const els = [...document.querySelectorAll(".r-up")];
    const reveal = () => {
      const vh = window.innerHeight;
      els.forEach((el) => {
        if (el.getAttribute("data-rev")) return;
        if (el.getBoundingClientRect().top < vh * 0.92) el.setAttribute("data-rev", "in");
      });
    };
    reveal();
    const onS = () => requestAnimationFrame(reveal);
    window.addEventListener("scroll", onS, { passive: true });
    window.addEventListener("resize", onS);
    const id = setTimeout(reveal, 200);
    return () => {window.removeEventListener("scroll", onS);window.removeEventListener("resize", onS);clearTimeout(id);};
  }, []);

  // parallax on case media + marquee subtle
  useE(() => {
    let raf = null;
    const imgs = [...document.querySelectorAll("[data-parallax]")];
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        const vh = window.innerHeight;
        imgs.forEach((img) => {
          const wrap = img.parentElement;
          const r = wrap.getBoundingClientRect();
          if (r.bottom < 0 || r.top > vh || r.height < 4) return;
          const center = r.top + r.height / 2;
          const p = (center - vh / 2) / vh; // -0.5..0.5
          img.style.transform = `translateY(${(-p * 42).toFixed(1)}px) scale(1.12)`;
        });
        raf = null;
      });
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <>
      <Intro key={introKey} />
      <Nav lang={lang} setLang={setLang} />
      <main>
        <Hero lang={lang} />
        <Statement lang={lang} />
        <Work lang={lang} />
        <Ticker lang={lang} />
        <About lang={lang} />
        <Contact lang={lang} />
      </main>

      <TweaksPanel>
        <TweakSection label={lang === "pt" ? "Aparência" : "Appearance"} />
        <TweakColor
          label={lang === "pt" ? "Destaque" : "Accent"}
          value={t.accent}
          options={["#121210", "#ff4d2e", "#2f5bff", "#bcff2e"]}
          onChange={(v) => setTweak("accent", v)} />
        
        <TweakToggle
          label={lang === "pt" ? "Imagens em cor" : "Color images"}
          value={t.color}
          onChange={(v) => setTweak("color", v)} />
        
        <TweakRadio
          label={lang === "pt" ? "Hero" : "Hero layout"}
          value={t.heroLayout}
          options={["left", "center"]}
          onChange={(v) => setTweak("heroLayout", v)} />
        
        <TweakButton
          label={lang === "pt" ? "Repetir intro" : "Replay intro"}
          onClick={() => {window.scrollTo({ top: 0 });setIntroKey((k) => k + 1);}} />
        
      </TweaksPanel>
    </>);

}

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