/* Nav — logo + section links + language switcher */

/* Lisbon office hours: Mon–Fri 09:00–18:00. Uses the visitor's clock —
   close enough for a status pill; we're not gating anything on it. */
function computeOpen(now = new Date()) {
  const day = now.getDay();           // 0 Sun … 6 Sat
  const mins = now.getHours() * 60 + now.getMinutes();
  return day >= 1 && day <= 5 && mins >= 9 * 60 && mins < 18 * 60;
}

const SERVICES_PT = {
  particulares: ["IRS · Imposto pessoal", "NIF para estrangeiros", "IFICI / NHR 2.0", "Planeamento tributário"],
  empresas:     ["IRC · Imposto das empresas", "Constituição de empresas", "Folha de pagamento", "Contabilidade organizada"],
};
const SERVICES_UK = {
  particulares: ["IRS · Особистий податок", "NIF для іноземців", "IFICI / NHR 2.0", "Податкове планування"],
  empresas:     ["IRC · Корпоративний податок", "Реєстрація компанії", "Розрахунок зарплати", "Бухгалтерський облік"],
};
const SERVICES_RU = {
  particulares: ["IRS · Личный налог", "NIF для иностранцев", "IFICI / NHR 2.0", "Налоговое планирование"],
  empresas:     ["IRC · Корпоративный налог", "Регистрация компании", "Расчёт зарплат", "Бухгалтерский учёт"],
};
const SERVICES_MAP = { pt: SERVICES_PT, uk: SERVICES_UK, ru: SERVICES_RU };

function Nav({ lang, setLang, t }) {
  const [open, setOpen] = React.useState(false);
  const [servOpen, setServOpen] = React.useState(false);
  const close = () => { setOpen(false); setServOpen(false); };
  const servRef = React.useRef(null);

  // Close dropdown when clicking outside
  React.useEffect(() => {
    function onClickOutside(e) {
      if (servRef.current && !servRef.current.contains(e.target)) setServOpen(false);
    }
    document.addEventListener("mousedown", onClickOutside);
    return () => document.removeEventListener("mousedown", onClickOutside);
  }, []);

  // Close mobile menu when user starts scrolling
  React.useEffect(() => {
    if (!open) return;
    let startY = 0;
    const onTouchStart = e => { startY = e.touches[0].clientY; };
    const onTouchMove = e => { if (Math.abs(e.touches[0].clientY - startY) > 10) close(); };
    const onScroll = () => close();
    window.addEventListener("touchstart", onTouchStart, { passive: true });
    window.addEventListener("touchmove", onTouchMove, { passive: true });
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => {
      window.removeEventListener("touchstart", onTouchStart);
      window.removeEventListener("touchmove", onTouchMove);
      window.removeEventListener("scroll", onScroll);
    };
  }, [open]);

  // Live "open now" indicator — Mon–Fri 09:00–18:00 (Lisbon)
  const [isOpen, setIsOpen] = React.useState(() => computeOpen());
  React.useEffect(() => {
    const id = setInterval(() => setIsOpen(computeOpen()), 60 * 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <nav className="nav">
      <div className="nav-inner">
                <a href="#top" className="nav-logo" onClick={close}>
          OR
          <small>Contabilidade · Consultoria Fiscal</small>
        </a>
        <ul className={`nav-links${open ? " is-open" : ""}`}>
          <li ref={servRef} className={`has-dropdown${servOpen ? " is-open" : ""}`}
            onMouseEnter={() => !open && setServOpen(true)}
            onMouseLeave={() => !open && setServOpen(false)}
          >
            <a href="#services" onClick={e => { e.preventDefault(); if (open) setServOpen(o => !o); }}>
              {t.nav.services}
              <span className="nav-chevron">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="6 9 12 15 18 9"/>
                </svg>
              </span>
            </a>
            {servOpen && (
              <div className="nav-dropdown">
                <div className="nav-dropdown-col">
                  <div className="nav-dropdown-head">{lang === "pt" ? "Particulares" : lang === "uk" ? "Фізичні особи" : "Частным лицам"}</div>
                  {SERVICES_MAP[lang].particulares.map(s => (
                    <a key={s} className="nav-dropdown-link" href="#services" onClick={close}>{s}</a>
                  ))}
                </div>
                <div className="nav-dropdown-col">
                  <div className="nav-dropdown-head">{lang === "pt" ? "Empresas" : lang === "uk" ? "Компанії" : "Компаниям"}</div>
                  {SERVICES_MAP[lang].empresas.map(s => (
                    <a key={s} className="nav-dropdown-link" href="#services" onClick={close}>{s}</a>
                  ))}
                </div>
              </div>
            )}
          </li>
          <li><a href="#about" onClick={close}>{lang === "pt" ? "Sobre Nós" : lang === "uk" ? "Про нас" : "О нас"}</a></li>
          <li><a href="#blog" onClick={close}>Blog</a></li>
          <li><a href="/faq">{lang === "pt" ? "FAQ" : lang === "uk" ? "FAQ" : "FAQ"}</a></li>
          <li><a href="#contact" onClick={close}>{lang === "pt" ? "Contactos" : lang === "uk" ? "Контакти" : "Контакты"}</a></li>
          <li className="lang-switch-mobile">
            <div className="lang-switch">
              {["pt", "uk", "ru"].map(code => (
                <button
                  key={code}
                  className={lang === code ? "active" : ""}
                  onClick={() => { setLang(code); }}
                  aria-pressed={lang === code}
                >
                  {I18N[code].short}
                </button>
              ))}
            </div>
          </li>
        </ul>
        <div className="nav-right">
          {/* Language switcher — visible on mobile nav bar */}
          <div className="lang-switch lang-switch-navbar">
            {["pt", "uk", "ru"].map(code => (
              <button
                key={code}
                className={lang === code ? "active" : ""}
                onClick={() => setLang(code)}
                aria-pressed={lang === code}
              >
                {I18N[code].short}
              </button>
            ))}
          </div>
          <a
            className="nav-wa-pill"
            href={t.contact.whatsappUrl}
            target="_blank"
            rel="noopener"
            aria-label={`WhatsApp ${t.contact.whatsapp}`}
          >
            <span className="nav-wa-pill-icon" aria-hidden="true">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
              </svg>
            </span>
            <span className="nav-wa-pill-number">{t.contact.whatsapp}</span>
          </a>
          <div className={`nav-hours${isOpen ? " is-open" : ""}`} title={isOpen ? t.nav.openNow : t.nav.closedNow}>
            <span className="nav-hours-dot" aria-hidden="true"></span>
            <span className="nav-hours-days">{t.nav.hoursDays}</span>
            <span className="nav-hours-sep" aria-hidden="true">·</span>
            <span className="nav-hours-time">{t.nav.hoursTime}</span>
          </div>
          <div className="lang-switch">
            {["pt", "uk", "ru"].map(code => (
              <button
                key={code}
                className={lang === code ? "active" : ""}
                onClick={() => setLang(code)}
                aria-pressed={lang === code}
              >
                {I18N[code].short}
              </button>
            ))}
          </div>
          <button
            type="button"
            className="nav-toggle"
            aria-label="Menu"
            aria-expanded={open}
            onClick={() => setOpen(o => !o)}
          >
            {open ? (
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
                <path d="M6 6l12 12M6 18L18 6"/>
              </svg>
            ) : (
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
                <path d="M4 7h16M4 12h16M4 17h16"/>
              </svg>
            )}
          </button>
        </div>
      </div>
    </nav>
  );
}

window.Nav = Nav;
