/* global React, BsaLogo, I, SERVICES, INDUSTRIES, HUBS, OFFICES, STRINGS */
const { useState: useStateNav, useEffect: useEffectNav, useRef: useRefNav } = React;

// ─── Top utility strip ────────────────────────────────────────────────
function TopStrip({ locale, setLocale, onEnquire, t }) {
  return (
    <div style={{ background: "var(--ink)", color: "var(--on-ink)", fontSize: 12, fontFamily: "var(--mono)", letterSpacing: "0.06em" }}>
      <div className="container" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", height: 36 }}>
        <div style={{ display: "flex", gap: 22, alignItems: "center" }}>
          <a href="tel:+97145285555" style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "var(--on-ink)", opacity: 0.85 }}>
            <I.phone /> Dubai HQ +971 4 528 5555
          </a>
          <span style={{ opacity: 0.4 }}>·</span>
          <a href="mailto:info@bsalaw.com" style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "var(--on-ink)", opacity: 0.85 }}>
            <I.email /> info@bsalaw.com
          </a>
        </div>
        <div style={{ display: "flex", gap: 18, alignItems: "center" }}>
          <span style={{ opacity: 0.5, textTransform: "uppercase", fontSize: 10, letterSpacing: "0.18em" }}>Formerly Ahmad Bin Hezeem & Associates</span>
          <span style={{ opacity: 0.4 }}>·</span>
          <LanguageSwitch locale={locale} setLocale={setLocale} />
        </div>
      </div>
    </div>
  );
}

function LanguageSwitch({ locale, setLocale }) {
  const langs = [
    { code: "en", label: "EN" },
    { code: "ar", label: "العربية" },
    { code: "ru", label: "RU" },
    { code: "zh", label: "中文" },
  ];
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
      <I.globe />
      <div style={{ display: "inline-flex", gap: 2, marginInlineStart: 6 }}>
        {langs.map((l, i) => (
          <React.Fragment key={l.code}>
            {i > 0 && <span style={{ opacity: 0.35 }}>/</span>}
            <button
              onClick={() => setLocale(l.code)}
              aria-current={locale === l.code}
              style={{
                background: "transparent", border: 0, padding: "2px 4px", color: "var(--on-ink)",
                opacity: locale === l.code ? 1 : 0.55,
                fontFamily: l.code === "ar" ? "var(--arabic)" : "var(--mono)",
                fontSize: l.code === "ar" ? 13 : 11, letterSpacing: l.code === "ar" ? "0" : "0.12em",
                textTransform: "uppercase",
                borderBottom: locale === l.code ? "1px solid var(--brass)" : "1px solid transparent",
                cursor: "pointer",
              }}
            >
              {l.label}
            </button>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

// ─── Mega Menu Expertise ──────────────────────────────────────────────
function ExpertiseMega({ onClose, navigate, t }) {
  return (
    <div
      onMouseLeave={onClose}
      style={{
        position: "absolute", top: "100%", left: 0, right: 0,
        background: "var(--paper)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)",
        zIndex: 90, animation: "fade .18s ease both",
      }}
    >
      <div className="container" style={{ padding: "44px var(--pad-x)", display: "grid", gridTemplateColumns: "1.4fr 1fr 0.9fr", gap: 56 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}>Services · 17 practice areas</div>
          <div style={{ columnCount: 2, columnGap: 28 }}>
            {SERVICES.map((s) => (
              <a key={s.slug} onClick={(e) => { e.preventDefault(); navigate("expertise"); onClose(); }} href="#"
                style={{ display: "block", padding: "7px 0", fontSize: 15, color: "var(--ink-2)", breakInside: "avoid", borderBottom: "1px solid transparent", transition: "color .2s ease" }}
                onMouseEnter={(e) => { e.currentTarget.style.color = "var(--accent)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.color = "var(--ink-2)"; }}>
                {s.flagship && <span style={{ color: "var(--brass)", marginInlineEnd: 8, fontFamily: "var(--mono)", fontSize: 10 }}>◆</span>}
                {s.name}
              </a>
            ))}
          </div>
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}>Industries · 11 sectors</div>
          {INDUSTRIES.map((i) => (
            <a key={i} href="#" onClick={(e) => { e.preventDefault(); navigate("expertise"); onClose(); }}
              style={{ display: "block", padding: "7px 0", fontSize: 15, color: "var(--ink-2)" }}
              onMouseEnter={(e) => { e.currentTarget.style.color = "var(--accent)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.color = "var(--ink-2)"; }}>
              {i}
            </a>
          ))}
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}>Hubs · 3</div>
          {HUBS.map((h) => (
            <a key={h} href="#" onClick={(e) => { e.preventDefault(); navigate("expertise"); onClose(); }}
              style={{ display: "block", padding: "7px 0", fontSize: 15, color: "var(--ink-2)" }}
              onMouseEnter={(e) => { e.currentTarget.style.color = "var(--accent)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.color = "var(--ink-2)"; }}>
              {h}
            </a>
          ))}
          <div style={{ marginTop: 36, paddingTop: 24, borderTop: "1px solid var(--line)" }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Flagship</div>
            <p style={{ fontFamily: "var(--serif)", fontSize: 22, color: "var(--ink)", lineHeight: 1.25, marginBottom: 12 }}>
              Dispute Resolution.
            </p>
            <p style={{ fontSize: 13, color: "var(--muted)", lineHeight: 1.5, marginBottom: 14 }}>
              Chambers Band 3 · Legal 500 Tier 2 — UAE.
            </p>
            <a href="#" className="link-arrow" onClick={(e) => { e.preventDefault(); navigate("expertise"); onClose(); }}>
              See practice <I.arrowSm />
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Offices dropdown ─────────────────────────────────────────────────
function OfficesDropdown({ onClose, navigate }) {
  return (
    <div onMouseLeave={onClose}
      style={{ position: "absolute", top: "100%", left: 0, right: 0, background: "var(--paper)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", zIndex: 90, animation: "fade .18s ease both" }}>
      <div className="container" style={{ padding: "44px var(--pad-x)", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }}>
        {OFFICES.map((o) => (
          <a key={o.slug} href="#" onClick={(e) => { e.preventDefault(); navigate("offices"); onClose(); }}
            style={{ display: "block" }}>
            <div className="eyebrow" style={{ marginBottom: 6, color: o.headquarters ? "var(--brass-2)" : "var(--muted)" }}>
              {o.headquarters ? "HQ · " : ""}{o.country}
            </div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 24, color: "var(--ink)", marginBottom: 4 }}>{o.city}</div>
            <div style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--muted)" }}>{o.phone}</div>
          </a>
        ))}
      </div>
    </div>
  );
}

// ─── Main Nav ─────────────────────────────────────────────────────────
function Nav({ page, navigate, onEnquire, locale, setLocale, t }) {
  const [hover, setHover] = useStateNav(null); // 'expertise' | 'offices' | null
  const [scrolled, setScrolled] = useStateNav(false);
  useEffectNav(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const linkStyle = (k) => ({
    padding: "8px 2px",
    fontFamily: "var(--mono)",
    fontSize: 12,
    letterSpacing: "0.12em",
    textTransform: "uppercase",
    color: page === k ? "var(--accent)" : "var(--ink)",
    borderBottom: page === k ? "1px solid var(--accent)" : "1px solid transparent",
    background: "transparent",
    border: 0,
    cursor: "pointer",
  });

  const items = [
    { k: "expertise", label: t.nav.expertise, hasMega: true },
    { k: "people", label: t.nav.people },
    { k: "insights", label: t.nav.insights },
    { k: "offices", label: t.nav.offices, hasMega: true },
    { k: "about", label: t.nav.about },
  ];

  return (
    <header style={{ position: "sticky", top: 0, zIndex: 100, background: "var(--paper)" }}>
      <TopStrip locale={locale} setLocale={setLocale} onEnquire={onEnquire} t={t} />
      <div style={{ position: "relative", borderBottom: "1px solid var(--line)", background: "var(--paper)" }}>
        <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: scrolled ? 70 : 86, transition: "height .25s ease" }}>
          <button onClick={() => navigate("home")} style={{ background: "transparent", border: 0, padding: 0, cursor: "pointer" }}>
            <BsaLogo height={scrolled ? 32 : 38} />
          </button>

          <nav style={{ display: "flex", gap: 32 }}>
            {items.map((it) => (
              <button
                key={it.k}
                style={linkStyle(it.k)}
                onMouseEnter={() => it.hasMega ? setHover(it.k) : setHover(null)}
                onClick={() => { navigate(it.k); setHover(null); }}
              >
                {it.label}
                {it.hasMega && <I.chev style={{ marginInlineStart: 6, verticalAlign: "middle" }} />}
              </button>
            ))}
          </nav>

          <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
            <button aria-label="Search" style={{ background: "transparent", border: "1px solid var(--line-2)", padding: 12, color: "var(--ink)", cursor: "pointer", display: "inline-flex" }}>
              <I.search />
            </button>
            <button className="btn" onClick={() => onEnquire()}>
              {t.consult} <I.arrow />
            </button>
          </div>
        </div>

        {hover === "expertise" && <ExpertiseMega onClose={() => setHover(null)} navigate={navigate} t={t} />}
        {hover === "offices" && <OfficesDropdown onClose={() => setHover(null)} navigate={navigate} />}
      </div>
    </header>
  );
}

// ─── Footer ───────────────────────────────────────────────────────────
function Footer({ navigate, onEnquire, t }) {
  return (
    <footer style={{ background: "var(--ink)", color: "var(--on-ink)", paddingTop: 100 }}>
      <div className="container">
        {/* Top — closing statement */}
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 80, paddingBottom: 80, borderBottom: "1px solid rgba(239,234,224,0.12)" }}>
          <div>
            <div className="eyebrow on-dark" style={{ marginBottom: 22 }}>BSA LAW</div>
            <h3 style={{ fontFamily: "var(--serif)", fontSize: "clamp(36px, 4vw, 56px)", color: "var(--on-ink)", lineHeight: 1.05, textWrap: "balance", marginBottom: 28 }}>
              With us, it's possible.
            </h3>
            <p style={{ color: "var(--on-ink-mut)", maxWidth: 460, lineHeight: 1.55, marginBottom: 32 }}>
              The firm's own framing. Local expertise, international standards. Cross-border counsel from a single regional partnership.
            </p>
            <button className="btn btn-light" onClick={() => onEnquire()}>{t.consult} <I.arrow /></button>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40 }}>
            <div>
              <div className="eyebrow on-dark" style={{ marginBottom: 18 }}>Practice</div>
              {[
                ["Expertise", "expertise"],
                ["People", "people"],
                ["Insights", "insights"],
                ["About", "about"],
              ].map(([l, k]) => (
                <a key={k} href="#" onClick={(e) => { e.preventDefault(); navigate(k); }}
                  style={{ display: "block", padding: "7px 0", color: "var(--on-ink)", fontSize: 14 }}>
                  {l}
                </a>
              ))}
            </div>
            <div>
              <div className="eyebrow on-dark" style={{ marginBottom: 18 }}>Firm</div>
              {[
                ["Offices", "offices"],
                ["Careers", "careers"],
                ["Contact", "contact"],
                ["Insights archive", "insights"],
              ].map(([l, k]) => (
                <a key={k} href="#" onClick={(e) => { e.preventDefault(); navigate(k); }}
                  style={{ display: "block", padding: "7px 0", color: "var(--on-ink)", fontSize: 14 }}>
                  {l}
                </a>
              ))}
            </div>
          </div>
        </div>

        {/* Offices strip */}
        <div style={{ padding: "60px 0", borderBottom: "1px solid rgba(239,234,224,0.12)" }}>
          <div className="eyebrow on-dark" style={{ marginBottom: 28 }}>Eight offices · Five countries</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }}>
            {OFFICES.map((o) => (
              <div key={o.slug}>
                <div style={{ fontFamily: "var(--serif)", fontSize: 22, color: "var(--on-ink)", marginBottom: 4 }}>{o.city}</div>
                <div style={{ fontSize: 11, color: "var(--on-ink-mut)", fontFamily: "var(--mono)", letterSpacing: "0.08em", marginBottom: 8 }}>
                  {o.country}
                </div>
                <a href={`tel:${o.phoneRaw}`} style={{ fontSize: 13, color: "var(--on-ink-mut)", fontFamily: "var(--mono)" }}>
                  {o.phone}
                </a>
              </div>
            ))}
          </div>
        </div>

        {/* Bottom */}
        <div style={{ padding: "32px 0 48px", display: "flex", justifyContent: "space-between", alignItems: "flex-start", flexWrap: "wrap", gap: 24 }}>
          <div style={{ fontSize: 12, color: "var(--on-ink-mut)", lineHeight: 1.5, maxWidth: 560 }}>
            {t.footerLegal} Registered office: Level 6, Building 3, DIFC, The Gate District, PO Box 262, Dubai.
            <br />© {new Date().getFullYear()} BSA LAW. All rights reserved.
          </div>
          <div style={{ display: "flex", gap: 22, fontSize: 12, color: "var(--on-ink-mut)", fontFamily: "var(--mono)", letterSpacing: "0.1em", textTransform: "uppercase" }}>
            <a href="#" style={{ color: "inherit" }}>{t.privacy}</a>
            <a href="#" style={{ color: "inherit" }}>{t.terms}</a>
            <a href="#" style={{ color: "inherit" }}>{t.cookies}</a>
            <a href="https://www.linkedin.com/company/bsalaw" target="_blank" rel="noreferrer" style={{ color: "inherit", display: "inline-flex", gap: 6, alignItems: "center" }}>
              <I.linkedin /> LinkedIn
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}

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