/* global React, SectionHead, I, RANKINGS, SERVICES, INDUSTRIES, HUBS, PEOPLE, OFFICES, INSIGHTS, AWARDS, BsaLogo */
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

// ─── Hero ─────────────────────────────────────────────────────────────
function Hero({ navigate, onEnquire, t, dense }) {
  return (
    <section style={{ position: "relative", background: "var(--paper)" }}>
      <div className="container" style={{ paddingTop: dense ? 80 : 120, paddingBottom: dense ? 60 : 100, position: "relative" }}>
        {/* Editorial grid overlay (very subtle) */}
        <div aria-hidden="true" style={{
          position: "absolute", inset: 0, pointerEvents: "none",
          backgroundImage: "linear-gradient(to right, rgba(15,20,24,0.04) 1px, transparent 1px)",
          backgroundSize: "calc(100%/12) 100%",
          maxWidth: "calc(var(--maxw) - 2 * var(--pad-x))",
          marginInline: "auto",
          opacity: 0.5,
        }} />

        <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 80, alignItems: "stretch" }}>
          {/* Left — type */}
          <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", paddingTop: 20 }}>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 32 }}>
                <span style={{ width: 40, height: 1, background: "var(--brass)" }} />
                <span className="eyebrow" style={{ color: "var(--brass-2)" }}>{t.heroEyebrow}</span>
              </div>

              <h1 style={{
                fontFamily: "var(--serif)",
                fontWeight: 400,
                fontSize: "clamp(54px, 7.2vw, 116px)",
                lineHeight: 0.96,
                letterSpacing: "-0.02em",
                color: "var(--ink)",
                textWrap: "balance",
              }}>
                {t.heroHead[0]}<br />
                <em style={{ fontStyle: "italic", color: "var(--accent)" }}>{t.heroHead[1]}</em>
              </h1>

              <p style={{
                marginTop: 36,
                fontSize: 19,
                lineHeight: 1.5,
                color: "var(--ink-2)",
                maxWidth: 540,
                textWrap: "pretty",
              }}>
                {t.heroSub}
              </p>

              <div style={{ marginTop: 44, display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
                <button className="btn" onClick={() => onEnquire()}>
                  {t.consult} <I.arrow />
                </button>
                <button className="btn btn-ghost" onClick={() => navigate("expertise")}>
                  {t.explore}
                </button>
              </div>
            </div>

            {/* Stat row at bottom */}
            <div style={{ marginTop: 80, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderTop: "1px solid var(--line)" }}>
              {[
                { n: "2001", l: "Founded · Dubai" },
                { n: "20", l: "Partners" },
                { n: "8", l: "Offices" },
                { n: "5", l: "Countries" },
              ].map((s, i) => (
                <div key={i} style={{ padding: "22px 16px 0 0", borderInlineStart: i > 0 ? "1px solid var(--line)" : "0", paddingInlineStart: i > 0 ? 22 : 0 }}>
                  <div className="num" style={{ fontSize: 44, fontWeight: 400, color: "var(--ink)", lineHeight: 1 }}>{s.n}</div>
                  <div className="eyebrow" style={{ marginTop: 10 }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Right — image plate */}
          <div style={{ position: "relative", minHeight: 580 }}>
            <div style={{ position: "absolute", inset: 0, background: "var(--stone)", overflow: "hidden" }}>
              <img src="media/interior-library.webp" alt=""
                style={{ width: "100%", height: "100%", objectFit: "cover", filter: "grayscale(0.2) contrast(0.95) brightness(0.92)" }} />
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(15,20,24,0.05), rgba(15,20,24,0.25))" }} />
            </div>
            {/* Caption block bottom */}
            <div style={{ position: "absolute", left: 0, right: 24, bottom: 24, padding: "24px 26px", background: "var(--paper)", borderTop: `2px solid var(--brass)`, maxWidth: 380 }}>
              <div className="eyebrow" style={{ marginBottom: 10, color: "var(--brass-2)" }}>Dubai · DIFC</div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 22, color: "var(--ink)", lineHeight: 1.2, marginBottom: 6 }}>
                First local firm in the DIFC, 2006.
              </div>
              <div style={{ fontSize: 13, color: "var(--muted)" }}>
                Incorporated in the DIFC. DFSA-regulated.
              </div>
            </div>
            {/* Scroll indicator top-right */}
            <div style={{ position: "absolute", top: 24, right: 24, display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 10, color: "var(--paper)", opacity: 0.85 }}>
              <I.scroll />
              <span style={{ fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.2em", textTransform: "uppercase", writingMode: "vertical-rl" }}>Scroll</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Rankings strip ───────────────────────────────────────────────────
function RankingsStrip({ t }) {
  const ref = useRefH(null);
  const [paused, setPaused] = useStateH(false);
  return (
    <section style={{ background: "var(--paper-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container" style={{ padding: "44px 0" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 28 }}>
          <div className="eyebrow">{t.rankingsHead}</div>
          <div className="eyebrow" style={{ color: "var(--muted-2)" }}>Directory · Tier · Edition · Jurisdiction</div>
        </div>
        <div
          ref={ref}
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
          style={{ overflow: "hidden", position: "relative", maskImage: "linear-gradient(to right, transparent, black 8%, black 92%, transparent)" }}
        >
          <div style={{
            display: "inline-flex", gap: 0,
            animation: paused ? "none" : "rankingsScroll 60s linear infinite",
            whiteSpace: "nowrap",
          }}>
            {[...RANKINGS, ...RANKINGS, ...RANKINGS].map((r, i) => (
              <div key={i} style={{ display: "inline-flex", alignItems: "stretch", gap: 0, paddingInlineEnd: 0 }}>
                <div style={{ padding: "16px 36px 16px 0", minWidth: 380 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
                    <span style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--brass-2)" }}>{r.directory}</span>
                    <span style={{ width: 18, height: 1, background: "var(--line-2)" }} />
                    <span style={{ fontFamily: "var(--serif)", fontSize: 22, fontStyle: "italic", color: "var(--accent)" }}>{r.tier}</span>
                  </div>
                  <div style={{ fontSize: 16, color: "var(--ink)", fontFamily: "var(--serif)" }}>{r.practice}</div>
                  <div style={{ fontSize: 12, color: "var(--muted)", fontFamily: "var(--mono)", marginTop: 4, letterSpacing: "0.08em" }}>{r.jurisdiction}</div>
                </div>
                <div style={{ width: 1, background: "var(--line)" }} />
              </div>
            ))}
          </div>
        </div>
        <style>{`
          @keyframes rankingsScroll {
            from { transform: translateX(0); }
            to   { transform: translateX(-33.333%); }
          }
        `}</style>
      </div>
    </section>
  );
}

// ─── Expertise (3-tier) ───────────────────────────────────────────────
function ExpertiseSection({ navigate, t }) {
  const [tier, setTier] = useStateH("services");
  const tiers = {
    services: { label: t.services, count: 17, items: SERVICES.map((s) => s.name), highlight: SERVICES.filter((s) => s.flagship).map((s) => s.name) },
    industries: { label: t.industries, count: 11, items: INDUSTRIES, highlight: ["Real Estate", "Construction & Engineering", "Financial Institutions"] },
    hubs: { label: t.hubs, count: 3, items: HUBS, highlight: HUBS },
  };
  const current = tiers[tier];

  return (
    <section style={{ background: "var(--paper)", padding: "140px 0" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 100, alignItems: "start" }}>
          <div style={{ position: "sticky", top: 130 }}>
            <SectionHead
              eyebrow="Expertise"
              head={t.expertiseHead}
              sub={t.expertiseSub}
            />
            <button className="link-arrow" onClick={() => navigate("expertise")}>
              Browse all expertise <I.arrowSm />
            </button>
          </div>

          <div>
            {/* Tier tabs */}
            <div style={{ display: "flex", borderBottom: "1px solid var(--line)", marginBottom: 32 }}>
              {Object.entries(tiers).map(([k, v]) => (
                <button key={k} onClick={() => setTier(k)}
                  style={{
                    flex: 1, padding: "16px 18px", background: "transparent", border: 0,
                    borderBottom: tier === k ? "2px solid var(--accent)" : "2px solid transparent",
                    textAlign: "start", color: tier === k ? "var(--ink)" : "var(--muted)",
                    transition: "color .2s, border-color .2s", cursor: "pointer",
                    marginBottom: -1,
                  }}
                >
                  <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", marginBottom: 4 }}>
                    {String(v.count).padStart(2, "0")}
                  </div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 26, fontStyle: tier === k ? "normal" : "italic", fontWeight: 400 }}>
                    {v.label}
                  </div>
                </button>
              ))}
            </div>

            {/* Items list */}
            <div style={{ display: "grid", gridTemplateColumns: tier === "hubs" ? "1fr" : "1fr 1fr", gap: tier === "hubs" ? 0 : "0 32px" }}>
              {current.items.map((item, i) => {
                const isFlagship = current.highlight.includes(item);
                return (
                  <button key={item} onClick={() => navigate("expertise")}
                    style={{
                      display: "flex", alignItems: "center", justifyContent: "space-between",
                      padding: "20px 0", borderBottom: "1px solid var(--line)",
                      background: "transparent", border: 0, borderBottom: "1px solid var(--line)",
                      textAlign: "start", cursor: "pointer", color: "var(--ink)",
                      gap: 16,
                    }}
                    onMouseEnter={(e) => { e.currentTarget.querySelector("[data-arr]").style.transform = "translateX(6px)"; e.currentTarget.querySelector("[data-name]").style.color = "var(--accent)"; }}
                    onMouseLeave={(e) => { e.currentTarget.querySelector("[data-arr]").style.transform = "none"; e.currentTarget.querySelector("[data-name]").style.color = "var(--ink)"; }}
                  >
                    <div style={{ display: "flex", alignItems: "baseline", gap: 14 }}>
                      <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted-2)", letterSpacing: "0.08em", minWidth: 24 }}>
                        {String(i + 1).padStart(2, "0")}
                      </span>
                      <span data-name style={{ fontFamily: "var(--serif)", fontSize: tier === "hubs" ? 32 : 22, transition: "color .2s ease" }}>
                        {item}
                      </span>
                      {isFlagship && (
                        <span className="tag tag-accent" style={{ marginInlineStart: 8 }}>Flagship</span>
                      )}
                    </div>
                    <span data-arr style={{ color: "var(--muted-2)", transition: "transform .2s ease" }}>
                      <I.arrowSm />
                    </span>
                  </button>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Leadership feature ───────────────────────────────────────────────
function LeadershipFeature({ openLawyer, navigate, t }) {
  const featured = [PEOPLE.find((p) => p.slug === "ahmad-bin-hezeem"), PEOPLE.find((p) => p.slug === "jimmy-haoula")];
  return (
    <section style={{ background: "var(--ink)", color: "var(--on-ink)", padding: "140px 0" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 80, alignItems: "start", marginBottom: 80 }}>
          <SectionHead onDark eyebrow={t.leadershipHead} head="Two named partners. Twenty in the partnership."
            sub="The firm's senior partnership leads on mandates of substance — judicial heritage, arbitration leadership, and corporate practice in equal measure." />
          <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "flex-end", paddingTop: 60 }}>
            <button className="btn btn-ghost-light" onClick={() => navigate("people")}>
              Full directory · 20 partners <I.arrow />
            </button>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, background: "rgba(239,234,224,0.12)" }}>
          {featured.map((p) => (
            <button key={p.slug} onClick={() => openLawyer(p)}
              style={{ background: "var(--ink)", border: 0, color: "var(--on-ink)", padding: 0, cursor: "pointer", textAlign: "start" }}
            >
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", minHeight: 480 }}>
                <div style={{ overflow: "hidden", background: "#0a0e12" }}>
                  <img src={p.img} alt={p.name}
                    style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top", filter: "grayscale(0.5) contrast(1.05) brightness(0.85)" }} />
                </div>
                <div style={{ padding: 40, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
                  <div>
                    <div className="eyebrow on-dark" style={{ marginBottom: 14 }}>{p.role} · {p.office}</div>
                    <h3 style={{ fontFamily: "var(--serif)", fontSize: 42, lineHeight: 1.05, color: "var(--on-ink)", marginBottom: 24 }}>
                      {p.name}
                    </h3>
                    <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                      {p.credentials.slice(0, 3).map((c, i) => (
                        <li key={i} style={{ padding: "10px 0", borderTop: "1px solid rgba(239,234,224,0.12)", color: "var(--on-ink-mut)", fontSize: 14, lineHeight: 1.5 }}>
                          {c}
                        </li>
                      ))}
                    </ul>
                  </div>
                  <div style={{ marginTop: 36 }}>
                    <span className="link-arrow on-dark">View profile <I.arrowSm /></span>
                  </div>
                </div>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Insights teaser ──────────────────────────────────────────────────
function InsightsTeaser({ navigate, t }) {
  return (
    <section style={{ background: "var(--paper)", padding: "140px 0" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 56, gap: 40, flexWrap: "wrap" }}>
          <SectionHead eyebrow={t.insightsHead} head="Briefings and regulatory updates from across the practice." sub={t.insightsSub} />
          <button className="btn btn-ghost" onClick={() => navigate("insights")}>All insights <I.arrow /></button>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--line)" }}>
          {INSIGHTS.slice(0, 3).map((ins, i) => (
            <article key={ins.slug}
              style={{
                padding: "32px 28px 32px 0", borderBottom: "1px solid var(--line)",
                borderInlineEnd: i < 2 ? "1px solid var(--line)" : "0",
                paddingInlineStart: i > 0 ? 28 : 0,
                cursor: "pointer", transition: "background .2s ease",
              }}
              onMouseEnter={(e) => e.currentTarget.style.background = "var(--paper-2)"}
              onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
              onClick={() => navigate("insights")}
            >
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 28 }}>
                <span className="tag" style={{ color: "var(--accent)", borderColor: "var(--accent)" }}>{ins.category}</span>
                <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)", letterSpacing: "0.08em" }}>{ins.date}</span>
              </div>
              <h3 style={{ fontFamily: "var(--serif)", fontSize: 26, lineHeight: 1.15, color: "var(--ink)", marginBottom: 14, textWrap: "balance" }}>
                {ins.title}
              </h3>
              <p style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.5, marginBottom: 24 }}>{ins.excerpt}</p>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 16, borderTop: "1px solid var(--line)" }}>
                <span style={{ fontSize: 12, color: "var(--ink-2)" }}>{ins.authors[0]}</span>
                <span style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--muted-2)", letterSpacing: "0.1em", textTransform: "uppercase" }}>{ins.readTime}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Regional map (HTML stat tile, original) ──────────────────────────
function RegionMap({ navigate, t }) {
  // Approximate cities positioned in a stylised box — relative coords %
  const pins = [
    { c: "Dubai", x: 36, y: 60, hq: true },
    { c: "Abu Dhabi", x: 30, y: 68 },
    { c: "Sharjah", x: 38, y: 56 },
    { c: "Ras Al Khaimah", x: 42, y: 50 },
    { c: "Muscat", x: 58, y: 78 },
    { c: "Riyadh", x: 18, y: 64 },
    { c: "Beirut", x: 10, y: 18 },
    { c: "Erbil", x: 12, y: 6 },
  ];
  return (
    <section style={{ background: "var(--paper-2)", padding: "140px 0", borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "stretch" }}>
          <div>
            <SectionHead eyebrow="Network" head={t.officesHead} sub={t.officesSub} />
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, borderTop: "1px solid var(--line)", maxWidth: 440, marginBottom: 36 }}>
              {OFFICES.map((o) => (
                <button key={o.slug} onClick={() => navigate("offices")}
                  style={{
                    background: "transparent", border: 0, borderBottom: "1px solid var(--line)",
                    padding: "14px 0", textAlign: "start", cursor: "pointer",
                  }}
                  onMouseEnter={(e) => e.currentTarget.style.color = "var(--accent)"}
                  onMouseLeave={(e) => e.currentTarget.style.color = "inherit"}
                >
                  <div style={{ fontFamily: "var(--serif)", fontSize: 18, color: "inherit" }}>
                    {o.city}
                    {o.headquarters && <span style={{ fontFamily: "var(--mono)", fontSize: 9, color: "var(--brass-2)", marginInlineStart: 8, letterSpacing: "0.12em" }}>HQ</span>}
                  </div>
                  <div style={{ fontSize: 11, color: "var(--muted)", fontFamily: "var(--mono)", letterSpacing: "0.06em" }}>{o.country}</div>
                </button>
              ))}
            </div>
            <button className="btn btn-ghost" onClick={() => navigate("offices")}>All offices <I.arrow /></button>
          </div>

          {/* Map plate */}
          <div style={{ position: "relative", aspectRatio: "4/3", background: "var(--ink)", overflow: "hidden", color: "var(--on-ink)" }}>
            {/* Background grid */}
            <svg viewBox="0 0 100 75" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
              <defs>
                <pattern id="grid" width="5" height="5" patternUnits="userSpaceOnUse">
                  <path d="M5 0L0 0L0 5" stroke="rgba(239,234,224,0.06)" strokeWidth="0.1" fill="none" />
                </pattern>
              </defs>
              <rect width="100" height="75" fill="url(#grid)" />
              {/* stylised landmass — abstract, not geographic */}
              <path d="M 0 18 Q 14 14 18 8 L 28 12 Q 36 18 44 22 L 56 28 L 68 24 L 80 30 L 96 32 L 100 38 L 100 75 L 0 75 Z" fill="rgba(168,135,83,0.07)" stroke="rgba(168,135,83,0.18)" strokeWidth="0.15" />
              <path d="M 0 22 Q 10 24 22 28 L 30 24 L 38 30 L 50 36 L 60 32 L 72 36 L 84 32 L 100 40" fill="none" stroke="rgba(239,234,224,0.12)" strokeWidth="0.1" strokeDasharray="0.3 0.3" />
            </svg>

            {/* Pins */}
            {pins.map((p) => (
              <div key={p.c} style={{ position: "absolute", left: `${p.x}%`, top: `${p.y}%`, transform: "translate(-50%, -50%)" }}>
                <div style={{ position: "relative" }}>
                  {p.hq && (
                    <div style={{
                      position: "absolute", inset: -14,
                      borderRadius: "50%", border: "1px solid var(--brass)",
                      animation: "pulseRing 3s ease-out infinite",
                    }} />
                  )}
                  <div style={{
                    width: p.hq ? 14 : 8, height: p.hq ? 14 : 8, borderRadius: "50%",
                    background: p.hq ? "var(--brass)" : "var(--paper)",
                    boxShadow: p.hq ? "0 0 0 3px var(--ink)" : "0 0 0 2px var(--ink)",
                    border: p.hq ? "1px solid var(--brass)" : "0",
                  }} />
                </div>
                <div style={{
                  position: "absolute", top: 16, left: "50%", transform: "translateX(-50%)",
                  fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.1em",
                  textTransform: "uppercase", color: p.hq ? "var(--brass)" : "var(--on-ink-mut)",
                  whiteSpace: "nowrap",
                }}>
                  {p.c}
                </div>
              </div>
            ))}

            {/* Legend */}
            <div style={{ position: "absolute", bottom: 28, left: 28, color: "var(--on-ink-mut)" }}>
              <div className="eyebrow on-dark" style={{ marginBottom: 6 }}>Regional network</div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 28, color: "var(--on-ink)" }}>8 offices · 5 countries</div>
            </div>
            <div style={{ position: "absolute", top: 28, right: 28, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.12em", color: "var(--on-ink-mut)", textTransform: "uppercase" }}>
              Stylised — not geographic
            </div>
          </div>
        </div>
        <style>{`
          @keyframes pulseRing {
            0% { transform: scale(0.8); opacity: 1; }
            100% { transform: scale(2.2); opacity: 0; }
          }
        `}</style>
      </div>
    </section>
  );
}

// ─── Awards strip ─────────────────────────────────────────────────────
function AwardsRow({ t }) {
  return (
    <section style={{ background: "var(--paper)", padding: "100px 0", borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <div className="eyebrow" style={{ marginBottom: 28 }}>Awards · attributed; firm-supplied list</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid var(--line)" }}>
          {AWARDS.slice(0, 8).map((a, i) => (
            <div key={i} style={{
              padding: "28px 24px 28px 0",
              borderBottom: "1px solid var(--line)",
              borderInlineEnd: (i + 1) % 4 ? "1px solid var(--line)" : "0",
              paddingInlineStart: i % 4 === 0 ? 0 : 24,
            }}>
              <div className="num" style={{ fontSize: 32, color: "var(--accent)", marginBottom: 6 }}>{a.year}</div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 17, color: "var(--ink)", lineHeight: 1.3, marginBottom: 6, textWrap: "balance" }}>{a.name}</div>
              <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--muted)", letterSpacing: "0.12em", textTransform: "uppercase" }}>{a.issuer}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Big closing call ─────────────────────────────────────────────────
function ClosingCTA({ onEnquire, t }) {
  return (
    <section style={{ background: "var(--paper-2)", padding: "160px 0", borderTop: "1px solid var(--line)" }}>
      <div className="container" style={{ textAlign: "center" }}>
        <div className="eyebrow" style={{ marginBottom: 28 }}>{t.consult}</div>
        <h2 style={{ fontFamily: "var(--serif)", fontSize: "clamp(48px, 6vw, 92px)", lineHeight: 1.02, marginBottom: 28, maxWidth: 900, marginInline: "auto", textWrap: "balance" }}>
          A regional partnership, <em style={{ color: "var(--accent)" }}>one enquiry away</em>.
        </h2>
        <p style={{ fontSize: 17, color: "var(--muted)", maxWidth: 540, marginInline: "auto", marginBottom: 40, lineHeight: 1.55 }}>
          Institutional enquiries are routed to the appropriate partner. We typically respond within one business day.
        </p>
        <div style={{ display: "inline-flex", gap: 14, flexWrap: "wrap", justifyContent: "center" }}>
          <button className="btn" onClick={() => onEnquire()}>{t.consult} <I.arrow /></button>
          <a href="tel:+97145285555" className="btn btn-ghost">
            <I.phone /> +971 4 528 5555
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, RankingsStrip, ExpertiseSection, LeadershipFeature, InsightsTeaser, RegionMap, AwardsRow, ClosingCTA });
