/* Recare — Top Navigation (bilingual) */
const NAV_TARGETS = [null, "services", "doctors", "locations", "about", "portal"];

function scrollToSection(idx) {
  const id = NAV_TARGETS[idx];
  if (!id) {
    window.scrollTo({ top: 0, behavior: "smooth" });
    return;
  }
  const el = document.getElementById(id);
  if (!el) return;
  const header = document.querySelector(".nav");
  const offset = header ? header.getBoundingClientRect().height : 0;
  const top = el.getBoundingClientRect().top + window.pageYOffset - offset - 8;
  window.scrollTo({ top, behavior: "smooth" });
}

function Nav({ active = 0, onNavigate = () => {}, lang = "EN", onToggleLang = () => {} }) {
  const t = T(lang).nav;
  const [open, setOpen] = React.useState(false);
  const close = () => setOpen(false);
  const go = (i) => { onNavigate(i); scrollToSection(i); close(); };
  return (
    <header className="nav">
      <div className="container nav__inner">
        <a href="#" className="nav__logo" onClick={(e) => { e.preventDefault(); go(0); }}>
          <Logo variant="navy" />
        </a>
        <nav className={`nav__links ${open ? "is-open" : ""}`}>
          {t.links.map((l, i) => (
            <a key={i} href="#" className="nav__link"
               aria-current={i === active ? "page" : undefined}
               onClick={(e) => { e.preventDefault(); go(i); }}>{l}</a>
          ))}
        </nav>
        <div className="nav__right">
          <button className="nav__lang" onClick={onToggleLang} aria-label="Toggle language">
            <Icon name="globe" size={14} /> &nbsp;{t.langLabel}
          </button>
          <Button variant="primary" size="sm" icon="calendar" onClick={() => { onNavigate(-1); close(); }}>
            {t.book}
          </Button>
          <button
            className={`nav__burger ${open ? "is-open" : ""}`}
            onClick={() => setOpen(v => !v)}
            aria-label="Toggle menu"
            aria-expanded={open}>
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
    </header>
  );
}
Object.assign(window, { Nav });