/* nav.jsx — top nav, mobile menu, language toggle, footer. */
const { useState: useStateN, useEffect: useEffectN, useRef: useRefN } = React;

function LangToggle({ lang, setLang, compact }) {
  return (
    <div className="lang" role="group" aria-label="Language">
      <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")} aria-pressed={lang === "en"}>EN</button>
      <button className={lang === "hi" ? "on" : ""} onClick={() => setLang("hi")} aria-pressed={lang === "hi"} style={{ fontFamily: "var(--font-body)" }}>हिं</button>
    </div>
  );
}

function Nav({ lang, setLang, onNavigate, activeId }) {
  const [solid, setSolid] = useStateN(window.scrollY > 40);
  const [open, setOpen] = useStateN(false);
  const T = (v) => window.t(v, lang);
  useEffectN(() => {
    const onScroll = () => setSolid(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffectN(() => { document.body.style.overflow = open ? "hidden" : ""; }, [open]);

  const nav = window.OLV.nav;
  const go = (id) => { setOpen(false); onNavigate(id); };

  return (
    <React.Fragment>
      <nav className={"nav" + (solid ? " solid" : "")}>
        <div className="nav-inner">
          <button className="wordmark" onClick={() => go("home")} aria-label="OLIVEARCH home">
            <img className="brand-mark" src="assets/logo-mark.png" alt="" />
            <span className="wm-text"><span className="wm-word"><span className="wm-olive">OLIVE</span><span className="wm-arch">ARCH</span></span><small>PROJECTS SOLUTIONS LLP</small></span>
          </button>
          <div className="nav-links">
            {nav.map((n) => (
              <button key={n.id} className={"nav-link" + (activeId === n.id ? " active" : "")} onClick={() => go(n.id)}>
                {T(n.label)}
              </button>
            ))}
          </div>
          <div className="nav-right">
            <LangToggle lang={lang} setLang={setLang} />
            <div style={{ display: "flex" }} className="nav-consult">
              <Cta size="sm" icon="arrow-up-right" onClick={() => go("contact")}>{T({ en: "Enquire", hi: "संपर्क करें" })}</Cta>
            </div>
            <button className="hamburger" aria-label="Menu" aria-expanded={open} onClick={() => setOpen((o) => !o)}>
              <Icon name={open ? "x" : "menu"} size={26} />
            </button>
          </div>
        </div>
      </nav>

      <div className={"mmenu" + (open ? " open" : "")} aria-hidden={!open}>
        {nav.map((n) => (
          <button key={n.id} className="mlink" onClick={() => go(n.id)}>{T(n.label)}</button>
        ))}
        <div style={{ marginTop: "auto", paddingTop: 28, display: "flex", flexDirection: "column", gap: 16 }}>
          <a href={"mailto:" + window.OLV.brand.email} style={{ fontFamily: "var(--font-body)", fontSize: 15, color: "var(--olv-gold-champagne)" }}>{window.OLV.brand.email}</a>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 15, color: "var(--text-muted)" }}>{window.OLV.brand.phones.join("  ·  ")}</div>
        </div>
      </div>

      <style>{`@media(max-width:1024px){.nav-consult{display:none!important}}`}</style>
    </React.Fragment>
  );
}

function Footer({ lang, onNavigate }) {
  const T = (v) => window.t(v, lang);
  const B = window.OLV.brand, F = window.OLV.footer;
  const yr = new Date().getFullYear();
  return (
    <footer className="foot">
      <div className="container">
        <div className="foot-main">
          <div className="foot-brand">
            <button className="foot-logo" onClick={() => onNavigate("home")} aria-label="OLIVEARCH home"><img className="foot-mark" src="assets/logo-mark.png" alt="" /><span className="foot-wm"><span className="wm-word"><span className="wm-olive">OLIVE</span><span className="wm-arch">ARCH</span></span><small>PROJECTS SOLUTIONS LLP</small></span></button>
            <p className="foot-blurb">{T(F.blurb)}</p>
          </div>
          <nav className="foot-nav">
            {F.cols.map((c, i) => (
              <div key={i} className="foot-col">
                <h5>{T(c.title)}</h5>
                {c.links.map((l, j) => <button key={j} onClick={() => onNavigate(sectionForFooter(T(l)))}>{T(l)}</button>)}
              </div>
            ))}
          </nav>
        </div>
        <div className="foot-contact">
          <a href={"mailto:" + B.email} className="fc-item"><span className="fc-ic"><Icon name="mail" size={15} /></span>{B.email}</a>
          <a href={"tel:" + B.phones[0].replace(/\s/g, "")} className="fc-item"><span className="fc-ic"><Icon name="phone" size={15} /></span>{B.phones.join("  ·  ")}</a>
          <span className="fc-item"><span className="fc-ic"><Icon name="map-pin" size={15} /></span>{T(B.address)}</span>
        </div>
      </div>
      <div className="foot-bottom">
        <span>© {yr} {T(B.legal)}. {T(F.rights)}</span>
      </div>
    </footer>
  );
}
/* rough map of footer labels to section anchors */
function sectionForFooter(label) {
  const l = label.toLowerCase();
  if (l.includes("why") || l.includes("क्यों")) return "why";
  if (l.includes("about") || l.includes("leader") || l.includes("परिचय") || l.includes("नेतृत्व")) return "about";
  if (l.includes("portfolio") || l.includes("पोर्ट")) return "portfolio";
  if (l.includes("contact") || l.includes("संपर्क")) return "contact";
  return "portfolio";
}

Object.assign(window, { Nav, Footer, LangToggle });