/* global React, SectionHead, I, LawyerCard, RANKINGS, SERVICES, INDUSTRIES, HUBS, PEOPLE, OFFICES, INSIGHTS, AWARDS */
const { useState: useStateP, useMemo: useMemoP } = React;

// ─── Page banner ──────────────────────────────────────────────────────
function PageBanner({ eyebrow, title, sub, dark }) {
  return (
    <section style={{ background: dark ? "var(--ink)" : "var(--paper-2)", color: dark ? "var(--on-ink)" : "var(--ink)", padding: "120px 0 80px", borderBottom: dark ? "1px solid rgba(239,234,224,0.1)" : "1px solid var(--line)" }}>
      <div className="container">
        <div className={"eyebrow" + (dark ? " on-dark" : "")} style={{ marginBottom: 22 }}>{eyebrow}</div>
        <h1 style={{ fontSize: "clamp(54px, 7vw, 104px)", lineHeight: 1, letterSpacing: "-0.015em", marginBottom: 22, color: dark ? "var(--on-ink)" : "var(--ink)", textWrap: "balance" }}>
          {title}
        </h1>
        {sub && <p style={{ fontSize: 18, color: dark ? "var(--on-ink-mut)" : "var(--muted)", maxWidth: 720, lineHeight: 1.55 }}>{sub}</p>}
      </div>
    </section>
  );
}

// ─── Expertise page ───────────────────────────────────────────────────
function ExpertisePage({ navigate, onEnquire, t }) {
  const [tab, setTab] = useStateP("services");
  const tabs = { services: t.services, industries: t.industries, hubs: t.hubs };
  const data = {
    services: SERVICES.map((s) => ({ name: s.name, slug: s.slug, flagship: s.flagship })),
    industries: INDUSTRIES.map((i) => ({ name: i })),
    hubs: HUBS.map((h) => ({ name: h })),
  }[tab];

  // Mock practice blurbs (capability language only, no guarantees)
  const blurb = (name) => {
    const m = {
      "Arbitration & ADR": "Domestic and international arbitration before DIAC, DIFC-LCIA, ICC, LCIA and ad-hoc panels.",
      "Litigation": "Onshore litigation before the UAE Courts and onshore counterparts across the GCC.",
      "DIFC / ADGM Litigation": "Common-law dispute resolution before the DIFC Courts and ADGM.",
      "Corporate & M&A": "Cross-border M&A, joint ventures, restructurings and local IPOs.",
      "Banking & Finance": "Conventional and Islamic finance for sponsors, lenders and arrangers.",
      "Technology, Media & Telecoms": "Regulatory, contracting and data work for TMT operators and platforms.",
    };
    return m[name] || "Capability across the firm's regional footprint — UAE, KSA, Oman, Lebanon and Iraq.";
  };

  return (
    <main className="page-enter">
      <PageBanner eyebrow="01 · Expertise" title="Three tiers, one regional practice." sub="Services, industry sector groups, and firm-wide capability hubs. Pick the route into the practice that matches how you're thinking about the matter." />

      <section style={{ padding: "80px 0", background: "var(--paper)" }}>
        <div className="container">
          {/* Tab control */}
          <div style={{ display: "flex", gap: 0, borderBottom: "1px solid var(--line)", marginBottom: 48 }}>
            {Object.entries(tabs).map(([k, v]) => (
              <button key={k} onClick={() => setTab(k)}
                style={{
                  padding: "20px 32px 22px", background: "transparent", border: 0,
                  borderBottom: tab === k ? "2px solid var(--accent)" : "2px solid transparent",
                  color: tab === k ? "var(--ink)" : "var(--muted)",
                  fontFamily: "var(--serif)", fontSize: 28, fontWeight: 400, fontStyle: tab === k ? "normal" : "italic",
                  cursor: "pointer", marginBottom: -1,
                }}>
                {v}
                <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted-2)", marginInlineStart: 12, letterSpacing: "0.1em" }}>
                  {String(data.length).padStart(2, "0")}
                </span>
              </button>
            ))}
          </div>

          <div style={{ display: "grid", gridTemplateColumns: tab === "hubs" ? "repeat(3, 1fr)" : "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--line)" }}>
            {data.map((item, i) => (
              <button key={item.name} onClick={onEnquire}
                style={{
                  textAlign: "start", background: "transparent", border: 0,
                  padding: "36px 28px 36px 0",
                  borderBottom: "1px solid var(--line)",
                  borderInlineEnd: (i + 1) % 3 ? "1px solid var(--line)" : "0",
                  paddingInlineStart: i % 3 === 0 ? 0 : 28,
                  cursor: "pointer",
                  transition: "background .2s ease",
                  minHeight: 220,
                  display: "flex", flexDirection: "column", justifyContent: "space-between",
                }}
                onMouseEnter={(e) => { e.currentTarget.style.background = "var(--paper-2)"; e.currentTarget.querySelector("[data-arr]").style.transform = "translateX(6px)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.querySelector("[data-arr]").style.transform = "none"; }}
              >
                <div>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 18 }}>
                    <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted-2)", letterSpacing: "0.1em" }}>
                      {String(i + 1).padStart(2, "0")}
                    </span>
                    {item.flagship && <span className="tag tag-accent">Flagship</span>}
                  </div>
                  <h3 style={{ fontFamily: "var(--serif)", fontSize: 28, lineHeight: 1.1, color: "var(--ink)", marginBottom: 14, textWrap: "balance" }}>
                    {item.name}
                  </h3>
                  <p style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.5 }}>{blurb(item.name)}</p>
                </div>
                <div data-arr style={{ marginTop: 24, color: "var(--accent)", transition: "transform .2s ease", display: "inline-flex" }}>
                  <I.arrowSm />
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Rankings panel */}
      <section style={{ background: "var(--ink)", color: "var(--on-ink)", padding: "120px 0" }}>
        <div className="container">
          <SectionHead onDark eyebrow="Directory rankings" head="Independently attributed credibility." sub="The verified subset across the firm's practices. Re-verify the live edition at build — directories refresh annually." />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid rgba(239,234,224,0.18)" }}>
            {RANKINGS.map((r, i) => (
              <div key={i} style={{
                padding: "32px 28px 32px 0",
                borderBottom: "1px solid rgba(239,234,224,0.18)",
                borderInlineEnd: (i + 1) % 3 ? "1px solid rgba(239,234,224,0.18)" : "0",
                paddingInlineStart: i % 3 === 0 ? 0 : 28,
              }}>
                <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 14 }}>
                  <span style={{ fontFamily: "var(--serif)", fontSize: 32, fontStyle: "italic", color: "var(--brass)" }}>{r.tier}</span>
                  <span style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--on-ink-mut)", letterSpacing: "0.14em", textTransform: "uppercase" }}>{r.jurisdiction}</span>
                </div>
                <div style={{ fontSize: 17, color: "var(--on-ink)", marginBottom: 8, lineHeight: 1.3 }}>{r.practice}</div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--on-ink-mut)", letterSpacing: "0.1em", textTransform: "uppercase" }}>{r.directory}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// ─── People directory page ────────────────────────────────────────────
function PeoplePage({ openLawyer, navigate, onEnquire, t }) {
  const [office, setOffice] = useStateP("All");
  const [practice, setPractice] = useStateP("All");
  const [role, setRole] = useStateP("All");

  const offices = ["All", ...new Set(PEOPLE.map((p) => p.office))];
  const practices = ["All", ...new Set(PEOPLE.flatMap((p) => p.practices))].sort();
  const roles = ["All", "Senior Partner", "Managing Partner", "Partner", "Of Counsel", "Senior Associate"];

  const filtered = useMemoP(() => PEOPLE.filter((p) =>
    (office === "All" || p.office === office) &&
    (practice === "All" || p.practices.includes(practice)) &&
    (role === "All" || p.role === role)
  ), [office, practice, role]);

  const ChipRow = ({ label, value, set, options }) => (
    <div style={{ display: "flex", alignItems: "center", gap: 14, padding: "16px 0", borderBottom: "1px solid var(--line)" }}>
      <div className="eyebrow" style={{ minWidth: 90 }}>{label}</div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
        {options.map((o) => (
          <button key={o} onClick={() => set(o)}
            style={{
              padding: "5px 12px", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase",
              background: value === o ? "var(--ink)" : "transparent",
              color: value === o ? "var(--paper)" : "var(--ink-2)",
              border: "1px solid " + (value === o ? "var(--ink)" : "var(--line-2)"),
              cursor: "pointer",
            }}>
            {o}
          </button>
        ))}
      </div>
    </div>
  );

  return (
    <main className="page-enter">
      <PageBanner eyebrow="02 · People" title="Twenty partners. One regional partnership." sub="The full directory below. Filter by office, role, or practice. Every profile carries verified credentials only — no invented bar admissions." />

      <section style={{ padding: "60px 0", background: "var(--paper)" }}>
        <div className="container">
          <ChipRow label="Office" value={office} set={setOffice} options={offices} />
          <ChipRow label="Role" value={role} set={setRole} options={roles} />
          <ChipRow label="Practice" value={practice} set={setPractice} options={practices} />

          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", padding: "32px 0" }}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)", letterSpacing: "0.1em", textTransform: "uppercase" }}>
              Showing {String(filtered.length).padStart(2, "0")} of {String(PEOPLE.length).padStart(2, "0")}
            </div>
            <button onClick={() => { setOffice("All"); setPractice("All"); setRole("All"); }}
              style={{ background: "transparent", border: 0, fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)", letterSpacing: "0.1em", textTransform: "uppercase", cursor: "pointer", borderBottom: "1px solid var(--line-2)", paddingBottom: 4 }}>
              Reset filters
            </button>
          </div>

          {filtered.length === 0 ? (
            <div style={{ textAlign: "center", padding: "80px 0", color: "var(--muted)" }}>
              No people match those filters. <button onClick={() => { setOffice("All"); setPractice("All"); setRole("All"); }} style={{ background: "transparent", border: 0, color: "var(--accent)", textDecoration: "underline", cursor: "pointer" }}>Reset</button>
            </div>
          ) : (
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }}>
              {filtered.map((p) => <LawyerCard key={p.slug} p={p} onOpen={openLawyer} t={t} />)}
            </div>
          )}
        </div>
      </section>
    </main>
  );
}

// ─── Offices page ─────────────────────────────────────────────────────
function OfficesPage({ onEnquire, t }) {
  return (
    <main className="page-enter">
      <PageBanner eyebrow="04 · Offices" title="Eight offices. Five countries." sub="The Dubai (DIFC) office is the firm's HQ. Muscat trades as BSA Al Rashdi & Al Barwani; Riyadh as BSA Ahmad Bin Hezeem & Associates LLC. Local entity names are preserved on each office." />

      <section style={{ background: "var(--paper)", padding: "80px 0" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0 }}>
            {OFFICES.map((o, i) => (
              <article key={o.slug}
                style={{
                  display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 0, minHeight: 380,
                  borderBottom: "1px solid var(--line)",
                  borderInlineEnd: (i + 1) % 2 ? "1px solid var(--line)" : "0",
                }}
              >
                <div style={{ overflow: "hidden", background: "var(--stone)" }}>
                  <img src={o.img} alt={`${o.city} office context`} loading="lazy"
                    style={{ width: "100%", height: "100%", objectFit: "cover", filter: "grayscale(0.4) contrast(0.9)" }} />
                </div>
                <div style={{ padding: "36px 32px", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
                  <div>
                    <div className="eyebrow" style={{ marginBottom: 12, color: o.headquarters ? "var(--brass-2)" : "var(--muted)" }}>
                      {o.headquarters ? "Headquarters · " : ""}{o.country}
                    </div>
                    <h3 style={{ fontFamily: "var(--serif)", fontSize: 40, marginBottom: 6, color: "var(--ink)" }}>{o.city}</h3>
                    <div style={{ fontSize: 13, color: "var(--muted)", marginBottom: 24, fontFamily: "var(--mono)", letterSpacing: "0.03em" }}>
                      {o.entity}
                    </div>
                    <p style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.55, marginBottom: 18 }}>{o.address}</p>
                    {o.note && (
                      <p style={{ fontSize: 12, color: "var(--accent)", fontStyle: "italic", marginBottom: 18 }}>{o.note}</p>
                    )}
                  </div>
                  <div style={{ display: "flex", gap: 18, alignItems: "center", paddingTop: 20, borderTop: "1px solid var(--line)", flexWrap: "wrap" }}>
                    <a href={`tel:${o.phoneRaw}`} className="link-arrow"><I.phone /> {o.phone}</a>
                    <a href="mailto:info@bsalaw.com" className="link-arrow"><I.email /> info@bsalaw.com</a>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// ─── Insights page ────────────────────────────────────────────────────
function InsightsPage({ navigate, t }) {
  const [cat, setCat] = useStateP("All");
  const cats = ["All", ...new Set(INSIGHTS.map((i) => i.category))];
  const filtered = INSIGHTS.filter((i) => cat === "All" || i.category === cat);
  const featured = filtered[0];
  const rest = filtered.slice(1);

  return (
    <main className="page-enter">
      <PageBanner eyebrow="03 · Insights" title="Briefings, updates and notes." sub="Authored across the firm. Categorise below — every piece is signed by the lawyer responsible." />

      <section style={{ background: "var(--paper)", padding: "80px 0" }}>
        <div className="container">
          <div style={{ display: "flex", gap: 8, marginBottom: 48, flexWrap: "wrap" }}>
            {cats.map((c) => (
              <button key={c} onClick={() => setCat(c)}
                style={{
                  padding: "10px 18px", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase",
                  background: cat === c ? "var(--ink)" : "transparent",
                  color: cat === c ? "var(--paper)" : "var(--ink)",
                  border: "1px solid " + (cat === c ? "var(--ink)" : "var(--line-2)"),
                  cursor: "pointer",
                }}>
                {c}
              </button>
            ))}
          </div>

          {featured && (
            <article style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, paddingBottom: 60, borderBottom: "1px solid var(--line)", marginBottom: 60, cursor: "pointer" }}>
              <div style={{ background: "var(--ink)", color: "var(--on-ink)", padding: 48, minHeight: 360, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
                <div>
                  <div className="eyebrow on-dark" style={{ marginBottom: 16 }}>Featured · {featured.category}</div>
                  <h2 style={{ fontFamily: "var(--serif)", fontSize: 44, lineHeight: 1.05, marginBottom: 24, color: "var(--on-ink)", textWrap: "balance" }}>
                    {featured.title}
                  </h2>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", color: "var(--on-ink-mut)", fontSize: 12, fontFamily: "var(--mono)", letterSpacing: "0.08em", paddingTop: 24, borderTop: "1px solid rgba(239,234,224,0.18)" }}>
                  <span>{featured.authors[0]}</span>
                  <span>{featured.date} · {featured.readTime}</span>
                </div>
              </div>
              <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", padding: "20px 0" }}>
                <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--ink-2)", marginBottom: 24 }}>
                  {featured.excerpt}
                </p>
                <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
                  <span className="link-arrow">Read briefing <I.arrowSm /></span>
                  <span className="tag" style={{ color: "var(--accent)", borderColor: "var(--accent)" }}>{featured.practice}</span>
                </div>
              </div>
            </article>
          )}

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--line)" }}>
            {rest.map((ins, i) => (
              <article key={ins.slug}
                style={{
                  padding: "32px 28px 32px 0", borderBottom: "1px solid var(--line)",
                  borderInlineEnd: (i + 1) % 3 ? "1px solid var(--line)" : "0",
                  paddingInlineStart: i % 3 === 0 ? 0 : 28,
                  cursor: "pointer", minHeight: 320, display: "flex", flexDirection: "column", justifyContent: "space-between",
                }}
              >
                <div>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 22 }}>
                    <span className="tag" style={{ color: "var(--accent)", borderColor: "var(--accent)" }}>{ins.category}</span>
                    <span style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--muted)", letterSpacing: "0.1em" }}>{ins.date}</span>
                  </div>
                  <h3 style={{ fontFamily: "var(--serif)", fontSize: 24, lineHeight: 1.15, color: "var(--ink)", marginBottom: 14, textWrap: "balance" }}>
                    {ins.title}
                  </h3>
                  <p style={{ fontSize: 13, color: "var(--muted)", lineHeight: 1.5 }}>{ins.excerpt}</p>
                </div>
                <div style={{ paddingTop: 20, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--ink-2)" }}>
                  <span>{ins.authors[0]}</span>
                  <span style={{ fontFamily: "var(--mono)", color: "var(--muted-2)", letterSpacing: "0.1em", textTransform: "uppercase" }}>{ins.readTime}</span>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// ─── About page ───────────────────────────────────────────────────────
function AboutPage({ onEnquire, navigate, t }) {
  return (
    <main className="page-enter">
      <PageBanner eyebrow="05 · About" title="Since 2001. First local firm in the DIFC, 2006." sub="A regional partnership, headquartered in Dubai. Twenty partners across eight offices in five countries. Combining unconventional problem-solving with solid, fact-based, pragmatic advice." />

      {/* Story */}
      <section style={{ background: "var(--paper)", padding: "120px 0" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 22 }}>Heritage</div>
            <h2 style={{ fontFamily: "var(--serif)", fontSize: 44, lineHeight: 1.08, marginBottom: 22, textWrap: "balance" }}>
              Founded in Dubai. Built across the region.
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 18, lineHeight: 1.65, color: "var(--ink-2)", marginBottom: 22, fontFamily: "var(--serif)" }}>
              In 2001 the firm opened in Dubai. Five years later, in 2006, it became the first local law firm to incorporate inside the Dubai International Financial Centre — a quiet first that has shaped the firm's posture ever since.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: "var(--ink-2)", marginBottom: 22 }}>
              The Senior Partner, Dr. Ahmad Bin Hezeem, is a former Director General of the Dubai Courts and Vice Chairman of the Dubai International Arbitration Centre. The Managing Partner, Jimmy Haoula, helped develop Dubai's real-estate and Strata regulatory framework. The senior bench is, in our experience, the practice.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: "var(--ink-2)" }}>
              Eight offices now span the UAE, Saudi Arabia, Oman, Lebanon and Iraq. Across the network, the firm operates as a single partnership — local entity names where the law requires them, one practice in substance.
            </p>
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section style={{ background: "var(--paper-2)", padding: "120px 0", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 28 }}>Timeline</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 0, borderTop: "1px solid var(--line)" }}>
            {[
              { y: 2001, e: "Firm founded in Dubai" },
              { y: 2006, e: "First local firm in the DIFC" },
              { y: 2021, e: "20 years in the Middle East" },
              { y: 2024, e: "Rebrand to BSA LAW (Oct 8)" },
              { y: 2026, e: "Eight offices, five countries" },
            ].map((m, i) => (
              <div key={i} style={{ padding: "32px 24px 32px 0", borderInlineEnd: i < 4 ? "1px solid var(--line)" : "0", paddingInlineStart: i > 0 ? 24 : 0 }}>
                <div className="num" style={{ fontSize: 44, color: "var(--accent)", marginBottom: 12 }}>{m.y}</div>
                <div style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.4 }}>{m.e}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Values */}
      <section style={{ background: "var(--ink)", color: "var(--on-ink)", padding: "120px 0" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80 }}>
            <div>
              <SectionHead onDark eyebrow="What drives us · what defines us" head="Five and five." sub="The firm's own framing, verbatim." />
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60 }}>
              <div>
                <div className="eyebrow on-dark" style={{ marginBottom: 20 }}>What drives us</div>
                {["Client-Centricity", "Fairness", "Authenticity", "Responsibility", "Mutuality"].map((v, i) => (
                  <div key={v} style={{ display: "flex", alignItems: "baseline", gap: 14, padding: "14px 0", borderTop: "1px solid rgba(239,234,224,0.18)" }}>
                    <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--brass)", letterSpacing: "0.08em" }}>{String(i + 1).padStart(2, "0")}</span>
                    <span style={{ fontFamily: "var(--serif)", fontSize: 24, color: "var(--on-ink)" }}>{v}</span>
                  </div>
                ))}
              </div>
              <div>
                <div className="eyebrow on-dark" style={{ marginBottom: 20 }}>What defines us</div>
                {["Precursors", "Progressive", "Driven", "Bold", "Responsive"].map((v, i) => (
                  <div key={v} style={{ display: "flex", alignItems: "baseline", gap: 14, padding: "14px 0", borderTop: "1px solid rgba(239,234,224,0.18)" }}>
                    <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--brass)", letterSpacing: "0.08em" }}>{String(i + 1).padStart(2, "0")}</span>
                    <span style={{ fontFamily: "var(--serif)", fontSize: 24, color: "var(--on-ink)", fontStyle: "italic" }}>{v}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Awards */}
      <section style={{ background: "var(--paper)", padding: "120px 0" }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 28 }}>Awards · firm-supplied; attributed</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0, borderTop: "1px solid var(--line)" }}>
            {AWARDS.map((a, i) => (
              <div key={i} style={{
                display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 24, alignItems: "baseline",
                padding: "24px 24px 24px 0",
                borderBottom: "1px solid var(--line)",
                borderInlineEnd: (i + 1) % 2 ? "1px solid var(--line)" : "0",
                paddingInlineStart: i % 2 === 0 ? 0 : 24,
              }}>
                <span className="num" style={{ fontSize: 28, color: "var(--accent)", minWidth: 60 }}>{a.year}</span>
                <span style={{ fontFamily: "var(--serif)", fontSize: 18, color: "var(--ink)", lineHeight: 1.3 }}>{a.name}</span>
                <span style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--muted)", letterSpacing: "0.12em", textTransform: "uppercase", whiteSpace: "nowrap" }}>{a.issuer}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// ─── Contact page ─────────────────────────────────────────────────────
function ContactPage({ onEnquire, t }) {
  return (
    <main className="page-enter">
      <PageBanner dark eyebrow="06 · Contact" title="Begin a conversation." sub="Institutional enquiries are routed to the appropriate partner. We typically respond within one business day. For urgent matters, call the relevant office direct." />

      <section style={{ background: "var(--paper)", padding: "100px 0" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 80, alignItems: "start" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Enquiry form</div>
            <h2 style={{ fontFamily: "var(--serif)", fontSize: 44, lineHeight: 1.05, marginBottom: 32 }}>Tell us about the matter.</h2>
            <EnquiryFormInline t={t} />
          </div>
          <aside>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Direct contact</div>
            <div style={{ borderTop: "1px solid var(--line)" }}>
              {OFFICES.map((o) => (
                <div key={o.slug} style={{ padding: "20px 0", borderBottom: "1px solid var(--line)" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
                    <span style={{ fontFamily: "var(--serif)", fontSize: 20, color: "var(--ink)" }}>{o.city}{o.headquarters && <span style={{ fontFamily: "var(--mono)", fontSize: 9, color: "var(--brass-2)", marginInlineStart: 8, letterSpacing: "0.12em" }}>HQ</span>}</span>
                    <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)" }}>{o.country}</span>
                  </div>
                  <a href={`tel:${o.phoneRaw}`} style={{ fontFamily: "var(--mono)", fontSize: 13, color: "var(--ink-2)" }}>{o.phone}</a>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 32, padding: "24px", background: "var(--paper-2)", borderInlineStart: "2px solid var(--brass)" }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>General</div>
              <a href="mailto:info@bsalaw.com" style={{ fontFamily: "var(--serif)", fontSize: 22, color: "var(--ink)" }}>info@bsalaw.com</a>
            </div>
          </aside>
        </div>
      </section>
    </main>
  );
}

// Compact, inline version of EnquiryForm without the modal chrome.
function EnquiryFormInline({ t }) {
  const [submitted, setSubmitted] = useStateP(false);
  if (submitted) {
    return (
      <div style={{ padding: "40px 0", borderTop: "1px solid var(--line)" }}>
        <div className="eyebrow" style={{ marginBottom: 14 }}>Received</div>
        <h3 style={{ fontFamily: "var(--serif)", fontSize: 32, marginBottom: 12 }}>Thank you.</h3>
        <p style={{ color: "var(--muted)", marginBottom: 24 }}>Your enquiry has been routed. We typically respond within one business day.</p>
        <button className="btn btn-ghost" onClick={() => setSubmitted(false)}>New enquiry</button>
      </div>
    );
  }
  return (
    <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }} style={{ borderTop: "1px solid var(--line)", paddingTop: 32 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22 }}>
        <div className="field"><label>Full name</label><input required /></div>
        <div className="field"><label>Organisation</label><input /></div>
        <div className="field"><label>Email</label><input type="email" required /></div>
        <div className="field"><label>Phone</label><input /></div>
      </div>
      <div className="field"><label>Practice area</label>
        <select><option value="">— Any practice —</option>{window.SERVICES.map((s) => <option key={s.slug}>{s.name}</option>)}</select>
      </div>
      <div className="field"><label>Office</label>
        <select><option value="">— No preference —</option>{window.OFFICES.map((o) => <option key={o.slug}>{o.city}</option>)}</select>
      </div>
      <div className="field"><label>Message</label><textarea placeholder="Brief outline of your matter (no privileged details required at this stage)" /></div>
      <label style={{ display: "flex", gap: 12, alignItems: "flex-start", margin: "8px 0 24px", fontSize: 13, color: "var(--muted)" }}>
        <input type="checkbox" required style={{ marginTop: 3 }} />
        <span>I consent to BSA LAW processing this enquiry in line with the firm's privacy notice.</span>
      </label>
      <button type="submit" className="btn">Submit enquiry <I.arrow /></button>
    </form>
  );
}

// ─── Careers (lightweight placeholder) ────────────────────────────────
function CareersPage({ onEnquire, t }) {
  return (
    <main className="page-enter">
      <PageBanner eyebrow="07 · Careers" title="Join a regional partnership." sub="We post current vacancies as they open. To register interest at partner, associate, or paralegal level, write to careers." />
      <section style={{ background: "var(--paper)", padding: "120px 0" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>Open roles</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, borderTop: "1px solid var(--line)" }}>
              {[
                ["Senior Associate — Banking & Finance", "Dubai"],
                ["Associate — Dispute Resolution", "Dubai"],
                ["Associate — Corporate & M&A", "Riyadh"],
                ["Paralegal — Real Estate", "Dubai"],
                ["Of Counsel — Construction Disputes", "Abu Dhabi"],
              ].map(([t, loc]) => (
                <li key={t} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "20px 0", borderBottom: "1px solid var(--line)" }}>
                  <span style={{ fontFamily: "var(--serif)", fontSize: 22, color: "var(--ink)" }}>{t}</span>
                  <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)", letterSpacing: "0.1em" }}>{loc}</span>
                </li>
              ))}
            </ul>
          </div>
          <div style={{ background: "var(--paper-2)", padding: 48, borderInlineStart: "2px solid var(--brass)" }}>
            <h3 style={{ fontFamily: "var(--serif)", fontSize: 32, lineHeight: 1.1, marginBottom: 20 }}>Register interest.</h3>
            <p style={{ color: "var(--muted)", marginBottom: 28, lineHeight: 1.55 }}>
              If you don't see a role that matches, write to us with a brief note on your practice area, qualifications and preferred office.
            </p>
            <a href="mailto:careers@bsalaw.com" className="btn">
              careers@bsalaw.com <I.arrow />
            </a>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { PageBanner, ExpertisePage, PeoplePage, OfficesPage, InsightsPage, AboutPage, ContactPage, CareersPage });
