// Nav.jsx
function Nav() {
  const { t, lang, setLang } = window.useI18n();
  const [scrolled, setScrolled] = React.useState(false);
  const [progress, setProgress] = React.useState(0);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      setScrolled(y > 40);
      const max = document.documentElement.scrollHeight - window.innerHeight;
      setProgress(max > 0 ? Math.min(100, (y / max) * 100) : 0);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  const close = () => setOpen(false);

  return (
    <React.Fragment>
      <div className="scroll-progress" style={{ width: progress + "%" }}></div>
      <nav className={`nav ${scrolled || open ? "nav--scrolled" : ""} ${open ? "nav--open" : ""}`}>
        <div className="container nav__inner">
          <a href="#top" className="nav__logo" aria-label="Venture Regatta">
            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden="true">
              <path d="M14 2 L14 22" stroke="currentColor" strokeWidth="1.4" />
              <path d="M14 5 L24 17 L14 17 Z" fill="currentColor" opacity="0.85" />
              <path d="M14 9 L6 17 L14 17 Z" fill="currentColor" opacity="0.5" />
              <path d="M5 22 Q14 26 23 22" stroke="#c9a94b" strokeWidth="1.5" fill="none" strokeLinecap="round" />
            </svg>
            <span>Venture Regatta</span>
          </a>
          <div className="nav__links">
            <a className="nav__link" href="#about">{t.nav.about}</a>
            <a className="nav__link" href="#program">{t.nav.program}</a>
            <a className="nav__link" href="#route">{t.nav.route}</a>
            <a className="nav__link" href="#pricing">{t.nav.pricing}</a>
            <a className="nav__link" href="#register">{t.nav.apply}</a>
          </div>
          <div className="nav__right">
            <div className="lang-switch" role="group" aria-label="language">
              <button className={lang === "ru" ? "active" : ""} onClick={() => setLang("ru")}>RU</button>
              <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
            </div>
            <a className="btn btn--gold" href="#register" style={{ padding: "10px 18px", fontSize: "12px" }}>{t.nav.cta}</a>
            <button className="nav__burger" onClick={() => setOpen(o => !o)} aria-label="menu">
              <span></span><span></span><span></span>
            </button>
          </div>
        </div>

        <div className="nav__mobile">
          <a href="#about" onClick={close}>{t.nav.about}</a>
          <a href="#program" onClick={close}>{t.nav.program}</a>
          <a href="#route" onClick={close}>{t.nav.route}</a>
          <a href="#pricing" onClick={close}>{t.nav.pricing}</a>
          <a href="#register" onClick={close}>{t.nav.apply}</a>
          <a className="btn btn--gold" href="#register" onClick={close}>{t.nav.cta}</a>
          <div className="nav__mobile-foot">
            <div className="lang-switch">
              <button className={lang === "ru" ? "active" : ""} onClick={() => setLang("ru")}>RU</button>
              <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
            </div>
          </div>
        </div>
      </nav>
    </React.Fragment>
  );
}
window.Nav = Nav;