/* ============================================================
   Shared site navigation: mega menu, header, footer + data.
   Exposes to window: SERVICE_GROUPS, ServicesMenu, SiteHeader,
   SiteFooter, serviceHref.
   Load AFTER React/ReactDOM/Babel and BEFORE the page script.
   ============================================================ */

/* --- icons (simple line marks, one per group) --- */
function _icoDoc(c){return <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5 2.5h6L15.5 7v10.5H5z" stroke={c} strokeWidth="1.4" strokeLinejoin="round"/><path d="M11 2.5V7h4.5M7.5 11h5M7.5 14h5" stroke={c} strokeWidth="1.4" strokeLinecap="round"/></svg>;}
function _icoGlobe(c){return <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="7.5" stroke={c} strokeWidth="1.4"/><path d="M2.5 10h15M10 2.5c2.5 2.4 2.5 12.6 0 15M10 2.5c-2.5 2.4-2.5 12.6 0 15" stroke={c} strokeWidth="1.4"/></svg>;}
function _icoBank(c){return <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 2.5 17 6H3z" stroke={c} strokeWidth="1.4" strokeLinejoin="round"/><path d="M4.5 8v6M8 8v6M12 8v6M15.5 8v6M3 16.5h14" stroke={c} strokeWidth="1.4" strokeLinecap="round"/></svg>;}
function _icoLock(c){return <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="4.5" y="8.5" width="11" height="8.5" rx="1.6" stroke={c} strokeWidth="1.4"/><path d="M6.8 8.5V6.3a3.2 3.2 0 0 1 6.4 0v2.2" stroke={c} strokeWidth="1.4"/></svg>;}
function _icoId(c){return <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="2.5" y="4.5" width="15" height="11" rx="1.8" stroke={c} strokeWidth="1.4"/><circle cx="7" cy="9.2" r="1.8" stroke={c} strokeWidth="1.3"/><path d="M4.6 13c.5-1.4 1.5-2 2.4-2s1.9.6 2.4 2M12 8h3.5M12 11h3.5" stroke={c} strokeWidth="1.3" strokeLinecap="round"/></svg>;}
function _icoPeople(c){return <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="7.3" cy="7.5" r="2.6" stroke={c} strokeWidth="1.4"/><path d="M2.8 16c.4-2.7 2.3-4 4.5-4s4.1 1.3 4.5 4" stroke={c} strokeWidth="1.4" strokeLinecap="round"/><path d="M13 5.4a2.4 2.4 0 0 1 0 4.7M14.5 16c-.2-1.6-.9-2.8-1.9-3.6" stroke={c} strokeWidth="1.4" strokeLinecap="round"/></svg>;}

/* --- data: groups -> items (English) --- */
const SERVICE_GROUPS = [
  { key: "formation", label: "Company Formation", icon: _icoDoc, items: [
    { name: "Dubai (Free Zone & Mainland)", href: "Company Setup in Dubai.html" },
    { name: "US (LLC or C-Corp)", slug: "us-llc" },
    { name: "Cyprus Ltd", slug: "cyprus-ltd" },
    { name: "Panama (IBC or S.A.)", slug: "panama-corp" } ] },
  { key: "relocation", label: "Relocation", icon: _icoGlobe, items: [
    { name: "Dubai (Golden) Visa", slug: "dubai-golden-visa" },
    { name: "Panama Residency", slug: "panama-residency" },
    { name: "Paraguay Residency", slug: "paraguay-residency" },
    { name: "Cyprus Non-Dom", slug: "cyprus-nondom" } ] },
  { key: "banking", label: "Banking", icon: _icoBank, items: [
    { name: "Bank Account — Dubai", slug: "bank-dubai" },
    { name: "Bank Account — Georgia", slug: "bank-georgia" },
    { name: "Bank Account — Liechtenstein", slug: "bank-liechtenstein" },
    { name: "Bank Account — Switzerland", slug: "bank-switzerland" } ] },
  { key: "foundations", label: "Foundations", icon: _icoLock, items: [
    { name: "Liechtenstein Foundation", slug: "liechtenstein-foundation" },
    { name: "DIFC Foundation", slug: "difc-foundation" } ] },
  { key: "cbi", label: "Passports (CBI)", icon: _icoId, items: [
    { name: "Antigua & Barbuda", slug: "antigua" },
    { name: "Dominica", slug: "dominica" },
    { name: "Grenada", slug: "grenada" },
    { name: "St. Kitts & Nevis", slug: "st-kitts-nevis" },
    { name: "Turkey", slug: "turkey" },
    { name: "Vanuatu", slug: "vanuatu" } ] },
  { key: "advisory", label: "Advisory", icon: _icoPeople, promo: {
    text: "Book a consultation and get answers to your questions on tax, asset protection, relocation and more.",
    cta: "Book now", href: "Contact.html" } }
];

const _byKey = Object.fromEntries(SERVICE_GROUPS.map((g) => [g.key, g]));

function serviceHref(it){ return it.href ? it.href : ("Service.html?s=" + it.slug); }

/* short count label per group (mirrors the Services page) */
const _GROUP_COUNT = { formation: "4 jurisdictions", relocation: "4 programmes", banking: "4 jurisdictions", foundations: "2 structures", cbi: "6 passports" };

/* --- a single service link row inside the mega menu --- */
function _MegaItem({ it }) {
  const [h, setH] = React.useState(false);
  return (
    <a href={serviceHref(it)} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10,
        margin: "0 -12px", padding: "8px 12px", borderRadius: 12,
        background: h ? "var(--tint)" : "transparent", color: h ? "var(--ink)" : "var(--ink-soft)",
        transition: "background .15s, color .15s" }}>
      <span style={{ fontSize: 14.5, fontWeight: 500, lineHeight: 1.3 }}>{it.name}</span>
      <span style={{ flexShrink: 0, color: "var(--sky-1)", opacity: h ? 1 : 0, transform: h ? "translateX(0)" : "translateX(-4px)", transition: "opacity .15s, transform .15s" }}>
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M4 12 L12 4 M5.5 4 H12 V10.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
      </span>
    </a>);
}

/* --- a single service group (icon header + links) --- */
function _MegaCol({ g }) {
  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 12 }}>
        <span style={{ width: 38, height: 38, borderRadius: 11, flexShrink: 0, background: "var(--tint)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>{g.icon("var(--ink)")}</span>
        <div style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
          <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.2, color: "var(--ink)" }}>{g.label}</div>
          <div style={{ fontSize: 12, color: "var(--steel)", marginTop: 4, lineHeight: 1.2 }}>{_GROUP_COUNT[g.key]}</div>
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>{g.items.map((it) => <_MegaItem key={it.name} it={it} />)}</div>
    </div>);
}

/* --- the dark Advisory promo rail --- */
function _MegaPromo({ g }) {
  const [h, setH] = React.useState(false);
  return (
    <div style={{ background: "var(--ink)", color: "#fff", borderRadius: 18, padding: "26px 26px 28px", display: "flex", flexDirection: "column", height: "100%" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
        <span style={{ width: 38, height: 38, borderRadius: 11, flexShrink: 0, background: "#ffffff14", border: "1px solid var(--line-d)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>{g.icon("#cfe0ee")}</span>
        <span style={{ fontSize: 16, fontWeight: 600, letterSpacing: "-0.02em" }}>{g.label}</span>
      </div>
      <p style={{ margin: "0 0 22px", fontSize: 14, lineHeight: 1.6, color: "#cdd7de" }}>{g.promo.text}</p>
      <a href={g.promo.href} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{ marginTop: "auto", alignSelf: "flex-start", display: "inline-flex", alignItems: "center", gap: 8, padding: "12px 22px", borderRadius: 999, background: h ? "#fff" : "#ffffffea", color: "var(--ink)", fontSize: 12, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", transition: "background .15s" }}>{g.promo.cta}</a>
    </div>);
}

/* --- "view all services" link in the panel header --- */
function _MegaAllLink() {
  const [h, setH] = React.useState(false);
  return (
    <a href="Services.html" onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: "inline-flex", alignItems: "center", gap: 8, whiteSpace: "nowrap", fontSize: 13, fontWeight: 600, color: h ? "var(--ink)" : "var(--ink-soft)", transition: "color .15s" }}>
      View all services
      <span style={{ color: "var(--sky-1)", transform: h ? "translateX(3px)" : "none", transition: "transform .15s" }}>
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M4 12 L12 4 M5.5 4 H12 V10.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
      </span>
    </a>);
}

/* --- the Services nav item with hover mega panel (portaled to body) --- */
function ServicesMenu({ active }) {
  const [open, setOpen] = React.useState(false);
  const timer = React.useRef(null);
  const show = () => { clearTimeout(timer.current); setOpen(true); };
  const hide = () => { clearTimeout(timer.current); timer.current = setTimeout(() => setOpen(false), 140); };

  const panel = open ? ReactDOM.createPortal(
    <div onMouseEnter={show} onMouseLeave={hide}
      style={{ position: "fixed", top: 56, left: "50%", transform: "translateX(-50%)", width: "min(1180px, 95vw)", paddingTop: 22, zIndex: 4000 }}>
      <div style={{ background: "#fff", borderRadius: 28, boxShadow: "0 40px 90px -40px #0A3C6555, 0 2px 10px #0A3C6411", padding: "30px 32px 32px", color: "var(--ink)" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, marginBottom: 22, paddingBottom: 18, borderBottom: "1px solid var(--line)" }}>
          <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--steel)", whiteSpace: "nowrap" }}>Our services</span>
          <_MegaAllLink />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "minmax(208px, 236px) 1fr", gap: 28, alignItems: "stretch" }}>
          <_MegaPromo g={_byKey.advisory} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", columnGap: 22 }}>
            {[["formation", "foundations"], ["relocation", "banking"], ["cbi"]].map((col, i) =>
              <div key={i} style={{ display: "flex", flexDirection: "column", gap: 26 }}>
                {col.map((k) => <_MegaCol key={k} g={_byKey[k]} />)}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>, document.body) : null;

  return (
    <div onMouseEnter={show} onMouseLeave={hide} style={{ display: "inline-flex", alignItems: "center" }}>
      <a href="Services.html"
        style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 14.5, color: active || open ? "#fff" : "#dfe7ec", whiteSpace: "nowrap", cursor: "pointer", borderBottom: active ? "1px solid #ffffff66" : "1px solid transparent", paddingBottom: 3 }}>
        Services
        <svg width="11" height="11" viewBox="0 0 12 12" fill="none" style={{ transform: open ? "rotate(180deg)" : "none", transition: "transform .2s" }}><path d="M2.5 4.5 6 8l3.5-3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
      </a>
      {panel}
    </div>);
}

/* --- shared header bits --- */
function _SNMark() {
  return (
    <a href="Homepage v5 (sky).html" style={{ display: "flex", alignItems: "center", gap: 11 }}>
      <svg width="30" height="30" viewBox="0 0 30 30" fill="none" aria-hidden="true">
        <circle cx="15" cy="15" r="11.5" stroke="#fff" strokeWidth="1.5" />
        <path d="M3.5 15 H26.5" stroke="#fff" strokeWidth="1.5" />
        <path d="M15 3.5 C 19.5 7.5 19.5 22.5 15 26.5 C 10.5 22.5 10.5 7.5 15 3.5 Z" stroke="#fff" strokeWidth="1.5" fill="none" />
      </svg>
      <span style={{ fontWeight: 700, letterSpacing: "0.14em", fontSize: 15, textTransform: "uppercase", color: "#fff" }}>Global&nbsp;Setup</span>
    </a>);
}
function _SNPill({ children, href }) {
  const [h, setH] = React.useState(false);
  return <a href={href || "#"} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
    style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "14px 24px", borderRadius: 999, fontSize: 13, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", whiteSpace: "nowrap", background: h ? "#fff" : "#ffffffea", color: "var(--ink)" }}>{children}</a>;
}
function _SNArrow() {
  return <span style={{ width: 44, height: 44, borderRadius: 999, flexShrink: 0, display: "inline-flex", alignItems: "center", justifyContent: "center", background: "#fff", color: "var(--ink)" }}>
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 12 L12 4 M5.5 4 H12 V10.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
  </span>;
}

/* --- full dark header; pass children for the hero band underneath --- */
function SiteHeader({ active, children }) {
  const links = [
    { label: "Home", href: "Homepage v5 (sky).html", key: "home" },
    { label: "Services", services: true, key: "services" },
    { label: "Our Method", href: "Our Method.html", key: "method" },
    { label: "Articles", href: "Articles.html", key: "articles" },
    { label: "Case Studies", href: "Case Studies.html", key: "cases" },
    { label: "About", href: "About.html", key: "about" },
    { label: "Contact", href: "Contact.html", key: "contact" }];

  return (
    <section style={{ background: "var(--ink)", color: "#fff", overflow: "hidden", boxShadow: "0 30px 60px -30px #0A3C6455" }}>
      <div style={{ maxWidth: 1340, margin: "0 auto" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "26px 32px", position: "relative", zIndex: 30 }}>
          <_SNMark />
          <nav style={{ display: "flex", alignItems: "center", gap: 28 }}>
            {links.map((l) => l.services ?
              <ServicesMenu key={l.key} active={active === "services"} /> :
              <a key={l.key} href={l.href}
                style={{ fontSize: 14.5, color: active === l.key ? "#fff" : "#dfe7ec", whiteSpace: "nowrap", borderBottom: active === l.key ? "1px solid #ffffff66" : "1px solid transparent", paddingBottom: 3 }}
                onMouseEnter={(e) => e.currentTarget.style.color = "#fff"}
                onMouseLeave={(e) => e.currentTarget.style.color = active === l.key ? "#fff" : "#dfe7ec"}>{l.label}</a>
            )}
          </nav>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <_SNPill href="Contact.html">Book a call</_SNPill>
            <_SNArrow />
          </div>
        </div>
        {children}
      </div>
    </section>);
}

/* --- shared footer --- */
function SiteFooter() {
  const cols = [
    ["Services", [["Company formation", "Homepage v5 (sky).html#services"], ["Tax planning", "Homepage v5 (sky).html#services"], ["Residency & CBI", "Homepage v5 (sky).html#services"], ["Trusts", "Homepage v5 (sky).html#services"], ["Banking", "Homepage v5 (sky).html#services"]]],
    ["Jurisdictions", [["UAE", "Company Setup in Dubai.html"], ["Cyprus", "Service.html?s=cyprus-ltd"], ["Panama", "Service.html?s=panama-corp"], ["Vanuatu", "Service.html?s=vanuatu"], ["See all 27", "Homepage v5 (sky).html#services"]]],
    ["Firm", [["About", "About.html"], ["Our Method", "Our Method.html"], ["Case Studies", "Case Studies.html"], ["Articles", "Articles.html"], ["Contact", "Contact.html"]]]];
  return (
    <footer style={{ background: "var(--ink)", color: "#fff", borderTopLeftRadius: "var(--r-lg)", borderTopRightRadius: "var(--r-lg)", padding: "48px 48px 36px" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr", gap: 36 }}>
        <div>
          <_SNMark />
          <p style={{ color: "#aebcc6", maxWidth: "34ch", lineHeight: 1.6, marginTop: 18, fontSize: 14.5 }}>
            International company formation, tax and residency since 2014. One team across 27 jurisdictions.
          </p>
        </div>
        {cols.map(([title, items]) =>
          <div key={title}>
            <div className="label" style={{ color: "#7d8d97", marginBottom: 16 }}>{title}</div>
            <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {items.map(([x, href]) => <li key={x}><a href={href} style={{ fontSize: 14.5, color: "#cdd7de" }}>{x}</a></li>)}
            </ul>
          </div>
        )}
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 44, paddingTop: 22, borderTop: "1px solid var(--line-d)", fontSize: 12.5, color: "#7d8d97", letterSpacing: "0.04em" }}>
        <span>© 2026 Global Setup FZ-LLC</span>
        <span>EN · DE · ES · FR · IT · RU</span>
        <span>Privacy · Imprint · Terms</span>
      </div>
    </footer>);
}

Object.assign(window, { SERVICE_GROUPS, ServicesMenu, SiteHeader, SiteFooter, serviceHref });
