// Nav with bilingual toggle
function Nav({ lang, setLang, t }) {
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const scrollTo = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 40;
    window.scrollTo({ top, behavior: "smooth" });
  };

  return (
    <nav className="nav">
      <div className="nav-inner" style={{
        background: scrolled ? "oklch(1 0 0 / 0.92)" : "oklch(1 0 0 / 0.75)"
      }}>
        <a href="#top" onClick={scrollTo("top")} className="nav-logo">
          <span className="dot"></span>
          <span>GSC</span>
        </a>
        <div className="nav-links">
          <a href="#about" onClick={scrollTo("about")}>{t.nav.about}</a>
          <a href="#skills" onClick={scrollTo("skills")}>{t.nav.skills}</a>
          <a href="#experience" onClick={scrollTo("experience")}>{t.nav.experience}</a>
          <a href="#projects" onClick={scrollTo("projects")}>{t.nav.projects}</a>
        </div>
        <div className="nav-lang">
          <button className={lang === "pt" ? "on" : ""} onClick={() => setLang("pt")}>PT</button>
          <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
        </div>
        <a href="#contact" onClick={scrollTo("contact")} className="nav-cta">{t.nav.contact}</a>
      </div>
    </nav>
  );
}

// Live clock for the footer / hero meta
function LiveClock({ tz = "America/Sao_Paulo" }) {
  const [now, setNow] = React.useState(new Date());
  React.useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const fmt = new Intl.DateTimeFormat("en-GB", {
    hour: "2-digit", minute: "2-digit", second: "2-digit",
    timeZone: tz, hour12: false,
  });
  return <span className="mono">{fmt.format(now)} BRT</span>;
}

// Custom cursor
function CursorDot() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const dot = ref.current;
    if (!dot) return;
    let raf;
    let x = 0, y = 0, tx = 0, ty = 0;
    const move = (e) => { tx = e.clientX; ty = e.clientY; };
    const tick = () => {
      x += (tx - x) * 0.25; y += (ty - y) * 0.25;
      dot.style.transform = `translate(${x - 5}px, ${y - 5}px)`;
      raf = requestAnimationFrame(tick);
    };
    const over = (e) => {
      const interactive = e.target.closest("a, button, .project-card, .contact-link, .chip");
      if (interactive) {
        dot.style.width = "32px"; dot.style.height = "32px";
        dot.style.marginLeft = "-11px"; dot.style.marginTop = "-11px";
        dot.style.background = "transparent";
        dot.style.border = "1.5px solid var(--acc)";
      } else {
        dot.style.width = "10px"; dot.style.height = "10px";
        dot.style.marginLeft = "0"; dot.style.marginTop = "0";
        dot.style.background = "var(--acc)";
        dot.style.border = "0";
      }
    };
    window.addEventListener("mousemove", move);
    window.addEventListener("mouseover", over);
    raf = requestAnimationFrame(tick);
    return () => {
      window.removeEventListener("mousemove", move);
      window.removeEventListener("mouseover", over);
      cancelAnimationFrame(raf);
    };
  }, []);
  return <div ref={ref} className="cursor-dot"></div>;
}

// Reveal-on-scroll wrapper
function Reveal({ children, delay = 0, as = "div", className = "", ...rest }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            setTimeout(() => e.target.classList.add("in"), delay);
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  const Cmp = as;
  return <Cmp ref={ref} className={`reveal ${className}`} {...rest}>{children}</Cmp>;
}

Object.assign(window, { Nav, LiveClock, CursorDot, Reveal });