// pages.jsx — secondary page components for the A&A prototype
// Loaded after app.jsx so all components are in the Babel global scope.

// ─────────────────────────── EXPERTISE HUB ───────────────────────────
function ExpertisePage({ lang }) {
  const ar = lang === "ar";
  const [filter, setFilter] = useState("all");
  const visible = filter === "flagship" ? PRACTICES.filter(p => p.flagship) : PRACTICES;
  return (
    <main className="page" data-screen-label="03 Expertise">
      <section className="pd-head">
        <div className="wrap">
          <div className="h-eyebrow">Expertise</div>
          <h1 className="h-display" style={{ marginTop: 16 }}>
            {ar
              ? "مجالات الممارسة وقطاعات العمل."
              : <>Twenty-seven practice areas.<br /><em style={{ fontStyle: "italic", color: "var(--accent-deep)" }}>Eleven industry sectors.</em></>}
          </h1>
          <p style={{ marginTop: 22, fontFamily: "var(--serif)", fontSize: 18, color: "var(--muted)", maxWidth: 70 + "ch" }}>
            {ar
              ? "نُقدّم خدمات قانونية شاملة عبر الإمارات الثلاث الكبرى ومركز دبي المالي العالمي، ومن مكتبنا في تورنتو، كندا."
              : "Full-service across Dubai, Abu Dhabi, Sharjah and the DIFC, with an international office in Toronto. The two taxonomies — practice areas and industry sectors — are kept distinct, as the firm does."}
          </p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap", marginBottom: 32 }}>
            <span className="h-eyebrow" style={{ marginRight: 16 }}>Practice areas</span>
            <button className={"tag" + (filter === "all" ? " active" : "")} onClick={() => setFilter("all")}>All 27</button>
            <button className={"tag" + (filter === "flagship" ? " active" : "")} onClick={() => setFilter("flagship")}>★ Flagship — ranked</button>
          </div>
          <div className="practice-grid">
            {visible.map((p, i) => (
              <a key={p.slug} className={"practice-cell" + (p.flagship ? " flagship" : "")} onClick={() => go("/expertise/" + p.slug)}>
                <div className="num tnum">{String(PRACTICES.indexOf(p) + 1).padStart(2, "0")}</div>
                <div className="nm">{p.name}</div>
                {p.lede ? <p style={{ fontSize: 13, color: "var(--muted)", marginTop: 8, lineHeight: 1.45 }}>{p.lede}</p> : null}
                <div className="arr">→</div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <hr className="rule" />

      <section className="section" style={{ background: "var(--paper-warm)" }}>
        <div className="wrap">
          <div className="sec-hd">
            <div>
              <div className="h-eyebrow">Industry sectors</div>
              <h2 className="h-display" style={{ marginTop: 16 }}>{ar ? "قطاعات العمل." : "Where our clients operate."}</h2>
            </div>
            <p className="sub">A separate taxonomy from practice areas — industries served, not legal disciplines.</p>
          </div>
          <div className="sector-row">
            {SECTORS.map(s => (
              <a key={s} className="sector-chip" style={{ cursor: "default" }}>{s}</a>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// ─────────────────────────── PRACTICE DETAIL ───────────────────────────
function PracticePage({ slug, lang }) {
  const p = PRACTICES.find(x => x.slug === slug) || PRACTICES[0];
  const leadPeople = (p.leads || []).map(id => PEOPLE.find(x => x.id === id)).filter(Boolean);
  const relatedArticles = ARTICLES.filter(a => a.area === slug).slice(0, 3);
  const idx = PRACTICES.indexOf(p);

  return (
    <main className="page" data-screen-label={"04 Practice — " + p.name}>
      <section className="pd-head">
        <div className="wrap">
          <a className="eyebrow-link" onClick={() => go("/expertise")}>← All expertise</a>
          <div className="h-eyebrow">Practice area · {String(idx + 1).padStart(2, "0")} / 27</div>
          <h1 className="h-display" style={{ marginTop: 14 }}>{p.name}</h1>
          {p.ranking && (
            <p style={{ marginTop: 22, fontSize: 13, letterSpacing: "0.06em", color: "var(--accent-deep)" }}>
              ★ Ranked by {p.ranking.dir} — {p.ranking.area}. <span className="flag">{p.ranking.year}</span>
            </p>
          )}
        </div>
      </section>

      <section className="section">
        <div className="wrap pd-body">
          <div>
            {p.detail ? (
              p.detail.map((para, i) => <p key={i}>{para}</p>)
            ) : (
              <React.Fragment>
                <p>{p.lede || `The firm advises on ${p.name.toLowerCase()} matters across the UAE and the wider region.`}</p>
                <p style={{ marginTop: 22, padding: "20px 24px", background: "var(--paper-warm)", border: "1px solid var(--line)", borderLeft: "2px solid var(--accent)", fontFamily: "var(--sans)", fontSize: 14, color: "var(--muted)" }}>
                  <span className="flag" style={{ marginRight: 10 }}>To confirm</span>
                  Full practice description to be pulled from <code>/expertise/{p.slug}/</code> on the live site before publication — the firm's own verified copy, not invented.
                </p>
              </React.Fragment>
            )}
            {p.flagship && (
              <blockquote className="pullquote" style={{ marginTop: 40 }}>
                {p.slug === "dispute-resolution"
                  ? <>"The team has a sophisticated attitude combined with real on-the-ground experience of how the UAE legal system works in practice."<span className="att">— The Legal 500 EMEA</span></>
                  : <>"Excellent individuals and team with great technical skills and well-able to hold their own against top firms from London and elsewhere."<span className="att">— The Legal 500 EMEA</span></>}
              </blockquote>
            )}

            {leadPeople.length > 0 && (
              <div style={{ marginTop: 50 }}>
                <div className="h-eyebrow" style={{ marginBottom: 18 }}>Group leads</div>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 24 }}>
                  {leadPeople.map(l => <LawyerCard key={l.id} p={l} />)}
                </div>
              </div>
            )}
          </div>
          <aside className="pd-side">
            <div className="card" style={{ background: "var(--paper-warm)", padding: 28 }}>
              <h5 style={{ fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)", margin: "0 0 12px", fontWeight: 500 }}>
                Make an enquiry
              </h5>
              <p style={{ fontFamily: "var(--serif)", fontSize: 18, lineHeight: 1.4 }}>
                Contact a {p.name} partner about a matter.
              </p>
              <button className="btn btn-primary" style={{ marginTop: 20, width: "100%" }} onClick={() => go("/contact")}>
                Request a consultation <span className="arr">→</span>
              </button>
              <p style={{ marginTop: 14, fontSize: 11, color: "var(--muted)", lineHeight: 1.5 }}>
                Pre-filled with <em>{p.name}</em>. Routed by office.
              </p>
            </div>

            {relatedArticles.length > 0 && (
              <div style={{ marginTop: 30 }}>
                <h5>Related inBrief</h5>
                <ul>
                  {relatedArticles.map(a => (
                    <li key={a.slug} onClick={() => go("/insights")}>{a.title}</li>
                  ))}
                </ul>
              </div>
            )}

            <div style={{ marginTop: 30 }}>
              <h5>Related practice areas</h5>
              <ul>
                {PRACTICES.filter(x => x.slug !== p.slug).slice(0, 5).map(x => (
                  <li key={x.slug} onClick={() => go("/expertise/" + x.slug)}>{x.name}</li>
                ))}
              </ul>
            </div>
          </aside>
        </div>
      </section>
    </main>
  );
}

// ─────────────────────────── PEOPLE HUB ───────────────────────────
function PeoplePage({ lang }) {
  const ar = lang === "ar";
  const [filter, setFilter] = useState("all");
  const sorted = [...PEOPLE].sort((a, b) => a.rank - b.rank);
  let visible = sorted;
  if (filter === "partners") visible = sorted.filter(p => /Partner/i.test(p.role) && !/Senior Consultant/.test(p.role));
  if (filter === "consultants") visible = sorted.filter(p => /Consultant/.test(p.role));
  if (filter === "associates") visible = sorted.filter(p => /Associate/i.test(p.role));
  if (filter === "other") visible = sorted.filter(p => /Barrister|Legal Consultant/.test(p.role) && !/Senior Consultant/.test(p.role));

  return (
    <main className="page" data-screen-label="05 People">
      <section className="pd-head">
        <div className="wrap">
          <div className="h-eyebrow">{ar ? AR.navPeople : "People"}</div>
          <h1 className="h-display" style={{ marginTop: 14 }}>
            {ar ? "الشركاء والمحامون." : <>Our partners, consultants <em style={{ fontStyle: "italic", color: "var(--accent-deep)" }}>&amp; lawyers</em>.</>}
          </h1>
          <p style={{ marginTop: 22, fontFamily: "var(--serif)", fontSize: 18, color: "var(--muted)", maxWidth: 70 + "ch" }}>
            Multi-specialist partners with deep local, regional and international experience. {PEOPLE.length} captured — full roster on the live site.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap", marginBottom: 36 }}>
            {[
              ["all", "All"],
              ["partners", "Partners"],
              ["consultants", "Senior Consultants"],
              ["associates", "Senior Associates"],
              ["other", "Barrister & Legal Consultant"]
            ].map(([k, lab]) => (
              <button key={k} className={"tag" + (filter === k ? " active" : "")} onClick={() => setFilter(k)}>{lab}</button>
            ))}
          </div>
          <div className="people-grid">
            {visible.map(p => <LawyerCard key={p.id} p={p} />)}
          </div>
          <p style={{ marginTop: 32, fontSize: 12, color: "var(--muted)" }}>
            <span className="flag" style={{ marginRight: 8 }}>Consent</span>
            Portrait publication is flagged for individual consent before launch. Per-lawyer bar admissions, qualifications and languages are pulled from each lawyer's verified profile page — not inferred.
          </p>
        </div>
      </section>
    </main>
  );
}

// ─────────────────────────── LAWYER PROFILE (overlay) ───────────────────────────
function LawyerPage({ slug, lang }) {
  const p = PEOPLE.find(x => x.id === slug);
  const close = () => go("/people");
  useEffect(() => {
    const h = (e) => { if (e.key === "Escape") close(); };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, []);

  if (!p) return null;
  const linked = (p.practices || []).map(s => PRACTICES.find(x => x.slug === s)).filter(Boolean);
  const isFounder = p.id === "amjad-ali-khan";

  return (
    <React.Fragment>
      <PeoplePage lang={lang} />
      <div className="overlay" onClick={close} data-screen-label={"06 Lawyer — " + p.name}>
        <div className="overlay-card" onClick={e => e.stopPropagation()}>
          <div className="overlay-grid">
            <div className="overlay-pic"><img src={p.portrait} alt={p.name} /></div>
            <div className="overlay-body">
              <button className="overlay-close" onClick={close} aria-label="Close">×</button>
              <div className="role">{p.role}{isFounder ? " · Joined 1975" : (p.joined ? ` · Joined ${p.joined}` : "")}</div>
              <h2 className="h-display">{p.name}</h2>
              {p.bio ? (
                <p style={{ marginTop: 22, fontFamily: "var(--serif)", fontSize: 17, lineHeight: 1.55, color: "var(--ink)" }}>{p.bio}</p>
              ) : (
                <p style={{ marginTop: 22, padding: "16px 18px", background: "var(--paper)", border: "1px solid var(--line)", borderLeft: "2px solid var(--accent)", fontFamily: "var(--sans)", fontSize: 14, color: "var(--muted)" }}>
                  <span className="flag" style={{ marginRight: 8 }}>To confirm</span>
                  Practice headings, bar admissions, qualifications and languages will be pulled verbatim from this lawyer's own profile page on the live site.
                </p>
              )}

              <div className="meta-grid">
                <div>
                  <div className="mt">Practice areas</div>
                  {linked.length > 0
                    ? <div className="mv">{linked.map(l => l.name).join(" · ")}</div>
                    : <div className="mv tbd">To pull from profile</div>}
                </div>
                <div>
                  <div className="mt">Office</div>
                  <div className="mv">{p.office}</div>
                </div>
                <div>
                  <div className="mt">Bar admissions</div>
                  <div className="mv tbd">To pull from profile</div>
                </div>
                <div>
                  <div className="mt">Languages</div>
                  <div className="mv tbd">To pull from profile</div>
                </div>
              </div>

              <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
                <a className="btn btn-primary" onClick={() => go("/contact")}>Contact {p.name.split(" ")[0]} <span className="arr">→</span></a>
                {linked[0] && <a className="btn btn-outline" onClick={() => go("/expertise/" + linked[0].slug)}>View {linked[0].name}</a>}
              </div>
            </div>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

// ─────────────────────────── INSIGHTS / inBrief ───────────────────────────
function InsightsPage({ lang }) {
  const [filter, setFilter] = useState("all");
  const filtered = filter === "all" ? ARTICLES : ARTICLES.filter(a => a.area === filter);
  const areas = [...new Set(ARTICLES.map(a => a.area))].map(s => PRACTICES.find(p => p.slug === s)).filter(Boolean);

  return (
    <main className="page" data-screen-label="07 Insights">
      <section className="pd-head">
        <div className="wrap">
          <div className="h-eyebrow">Insights · inBrief</div>
          <h1 className="h-display" style={{ marginTop: 14 }}>
            The firm's branded <em style={{ fontStyle: "italic", color: "var(--accent-deep)" }}>legal-updates</em> series.
          </h1>
          <p style={{ marginTop: 22, fontFamily: "var(--serif)", fontSize: 18, color: "var(--muted)", maxWidth: 64 + "ch" }}>
            Concise commentary on UAE legislative and regulatory developments, plus longer publications and newsletters.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 60, alignItems: "start" }}>
            <div>
              <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginBottom: 22 }}>
                <button className={"tag" + (filter === "all" ? " active" : "")} onClick={() => setFilter("all")}>All</button>
                {areas.map(a => (
                  <button key={a.slug} className={"tag" + (filter === a.slug ? " active" : "")} onClick={() => setFilter(a.slug)}>{a.name}</button>
                ))}
              </div>
              {filtered.map(a => (
                <a key={a.slug} className="brief-row" onClick={() => alert("Article view — inBrief detail page.")}>
                  <div className="dt">{a.date}</div>
                  <div className="tt">{a.title}</div>
                  <div className="pa">{a.areaLabel}</div>
                  <div className="arr">→</div>
                </a>
              ))}
            </div>
            <aside>
              <div style={{ background: "var(--ink)", color: "var(--paper-warm)", padding: 28 }}>
                <div className="h-eyebrow on-dark">Subscribe</div>
                <h3 className="h-display" style={{ color: "var(--paper-warm)", fontSize: 26, marginTop: 8 }}>inBrief by email</h3>
                <p style={{ marginTop: 12, color: "rgba(246,244,239,0.7)", fontSize: 14 }}>Filter by practice area on signup.</p>
                <form style={{ marginTop: 18, display: "grid", gap: 10 }} onSubmit={e => { e.preventDefault(); alert("Demo — wire to Formspree."); }}>
                  <input type="email" required placeholder="you@firm.com"
                    style={{ padding: "12px 14px", border: "1px solid rgba(255,255,255,0.2)", background: "rgba(255,255,255,0.06)", color: "var(--paper-warm)", fontFamily: "var(--sans)", fontSize: 14, borderRadius: 2 }} />
                  <button type="submit" className="btn btn-on-dark" style={{ width: "100%", justifyContent: "center" }}>Subscribe</button>
                </form>
              </div>
              <p style={{ marginTop: 16, fontSize: 12, color: "var(--muted)", lineHeight: 1.5 }}>
                Article PDFs and high-res covers to be supplied by the firm. Real titles only — no fabrication.
              </p>
            </aside>
          </div>
        </div>
      </section>
    </main>
  );
}

// ─────────────────────────── OFFICES HUB ───────────────────────────
function OfficesPage({ lang }) {
  return (
    <main className="page" data-screen-label="08 Offices">
      <section className="pd-head">
        <div className="wrap">
          <div className="h-eyebrow">Offices</div>
          <h1 className="h-display" style={{ marginTop: 14 }}>
            Four offices, <em style={{ fontStyle: "italic", color: "var(--accent-deep)" }}>never merged</em>.
          </h1>
          <p style={{ marginTop: 22, fontFamily: "var(--serif)", fontSize: 18, color: "var(--muted)", maxWidth: 70 + "ch" }}>
            Licensed across the three largest Emirates and the DIFC. Toronto is the firm's international office in Canada — not UAE-regulated.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="wrap" style={{ display: "grid", gap: 28 }}>
          {OFFICES.map(o => (
            <div key={o.slug} className="office-card">
              <a className="pic" onClick={() => go("/offices/" + o.slug)} style={{ cursor: "pointer" }}>
                <img src={o.image} alt="" />
              </a>
              <div className="body">
                <div className="where">{o.country} · {o.label} · Since {o.since}</div>
                <h3 className="h-display" style={{ marginTop: 6 }}>{o.city}</h3>
                <div className="addr">{o.address.join(", ")}</div>
                <div className="meta">
                  <div><a href={"tel:" + o.phoneRaw}>{o.phone}</a></div>
                  <div><a href={"mailto:" + o.email}>{o.email}</a></div>
                  {o.flag && <div style={{ marginTop: 8, fontSize: 12 }}><span className="flag">Flag</span> {o.flag}</div>}
                </div>
                <div style={{ marginTop: 22, display: "flex", gap: 12 }}>
                  <a className="btn btn-outline" onClick={() => go("/offices/" + o.slug)}>Office detail</a>
                  <a className="btn btn-ghost" onClick={() => go("/contact")}>Contact this office <span className="arr">→</span></a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

// ─────────────────────────── OFFICE DETAIL ───────────────────────────
function OfficePage({ slug, lang }) {
  const o = OFFICES.find(x => x.slug === slug);
  if (!o) return null;
  const mapQ = encodeURIComponent(o.address.join(", "));
  return (
    <main className="page" data-screen-label={"09 Office — " + o.city}>
      <section className="pd-head">
        <div className="wrap">
          <a className="eyebrow-link" onClick={() => go("/offices")}>← All offices</a>
          <div className="h-eyebrow">{o.country} · {o.label}</div>
          <h1 className="h-display" style={{ marginTop: 14 }}>{o.city}</h1>
        </div>
      </section>

      <section className="section">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 60 }}>
          <div>
            <img src={o.image} alt="" style={{ width: "100%", aspectRatio: "5/3", objectFit: "cover", border: "1px solid var(--line)" }} />
            <div style={{ marginTop: 30, background: "var(--paper-warm)", border: "1px solid var(--line)", padding: 36 }}>
              <h5 style={{ fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)", margin: "0 0 12px", fontWeight: 500 }}>Address</h5>
              <div style={{ fontFamily: "var(--serif)", fontSize: 18, lineHeight: 1.5, color: "var(--ink)" }}>{o.address.join(", ")}</div>
              <div style={{ marginTop: 22, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22 }}>
                <div>
                  <h5 style={{ fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)", margin: "0 0 6px", fontWeight: 500 }}>Phone</h5>
                  <a href={"tel:" + o.phoneRaw} style={{ fontFamily: "var(--serif)", fontSize: 18, borderBottom: "1px solid var(--line-strong)" }}>{o.phone}</a>
                </div>
                <div>
                  <h5 style={{ fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)", margin: "0 0 6px", fontWeight: 500 }}>Email</h5>
                  <a href={"mailto:" + o.email} style={{ fontFamily: "var(--serif)", fontSize: 16, borderBottom: "1px solid var(--line-strong)", wordBreak: "break-all" }}>{o.email}</a>
                </div>
              </div>
              <div style={{ marginTop: 22 }}>
                <h5 style={{ fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)", margin: "0 0 6px", fontWeight: 500 }}>Hours</h5>
                <p style={{ fontSize: 14, color: "var(--muted)" }}><span className="flag" style={{ marginRight: 8 }}>Unverified</span>Office hours are not currently published — to be confirmed before launch.</p>
              </div>
            </div>
          </div>
          <div>
            <div style={{ background: "var(--paper-warmer)", border: "1px solid var(--line)", aspectRatio: "1/1", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", padding: 32 }}>
              <div style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--muted)", textAlign: "center" }}>
                MAP — PLACE SEARCH<br />by verified address<br /><br />coords not published —<br />place lookup at launch
              </div>
              <a href={"https://www.google.com/maps/search/?api=1&query=" + mapQ} target="_blank" rel="noreferrer" className="btn btn-outline" style={{ marginTop: 24 }}>Open in Maps</a>
            </div>
            <div style={{ marginTop: 24, padding: 28, border: "1px solid var(--line)", background: "var(--paper)" }}>
              <div className="h-eyebrow">Contact this office</div>
              <p style={{ fontFamily: "var(--serif)", fontSize: 18, marginTop: 10 }}>
                Send an enquiry routed to <strong>{o.email}</strong>.
              </p>
              <button className="btn btn-primary" style={{ marginTop: 18, width: "100%" }} onClick={() => go("/contact")}>Request a consultation <span className="arr">→</span></button>
            </div>
            {o.note && (
              <p style={{ marginTop: 18, fontSize: 12, color: "var(--muted)", lineHeight: 1.6 }}>{o.note}</p>
            )}
          </div>
        </div>
      </section>
    </main>
  );
}

// ─────────────────────────── ABOUT ───────────────────────────
function AboutPage({ lang }) {
  const timeline = [
    { y: "1975", t: "Firm founded in Dubai", body: "M.A.K. Afridi opens the firm in the Kuwaiti Building, Deira, Dubai." },
    { y: "1976", t: "Sharjah office opens", body: "Licensed in the Emirate of Sharjah." },
    { y: "1981", t: "Abu Dhabi office opens", body: "Licensed in the Emirate of Abu Dhabi." },
    { y: "2000", t: "Move to Emirates Towers", body: "Dubai office relocates to Jumeirah Emirates Towers, Sheikh Zayed Road." },
    { y: "2016", t: "Bashir Ahmed elected Managing Partner", body: "Effective 1 November 2016. Joined the firm in 1988." },
    { y: "2025", t: "Fifty years of practice", body: "The firm marks 50 years advising clients in the Middle East and beyond." }
  ];
  return (
    <main className="page" data-screen-label="10 About">
      <section className="pd-head">
        <div className="wrap">
          <div className="h-eyebrow">About the firm</div>
          <h1 className="h-display" style={{ marginTop: 14 }}>
            Fifty years of UAE practice — <em style={{ fontStyle: "italic", color: "var(--accent-deep)" }}>true to the principles of its founders</em>.
          </h1>
        </div>
      </section>

      <section className="section">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 60 }}>
          <div>
            <p style={{ fontFamily: "var(--serif)", fontSize: 19, lineHeight: 1.6 }}>
              Afridi &amp; Angell is one of the most established law firms in the UAE. Founded in <strong>1975</strong> by <strong>M.A.K. Afridi</strong>, the firm is in its fifth decade at the forefront of the legal community. It is licensed in the three largest Emirates — Abu Dhabi, Dubai and Sharjah — as well as the Dubai International Financial Centre, with an international office in Toronto, Canada.
            </p>
            <p style={{ marginTop: 22, fontFamily: "var(--serif)", fontSize: 19, lineHeight: 1.6 }}>
              The firm describes itself as remaining "true to the principles of its founders — focusing on excellence and retention of exceptional talent." Multi-specialist partners offer pragmatic local-law advice combined with international quality.
            </p>
            <p style={{ marginTop: 22, fontSize: 13, color: "var(--muted)" }}>
              Source: <code>/about/</code> · <code>overview.md</code>. Founder principles quoted verbatim from the firm.
            </p>
          </div>
          <div>
            <img src="media/firm-interior-or-team.webp" alt="" style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover", border: "1px solid var(--line)" }} />
            <p style={{ marginTop: 10, fontSize: 11, color: "var(--muted)", letterSpacing: "0.04em" }}>Firm photo — subject to confirmation.</p>
          </div>
        </div>
      </section>

      <hr className="rule" />

      <section className="section" style={{ background: "var(--paper-warm)" }}>
        <div className="wrap">
          <div className="sec-hd">
            <div>
              <div className="h-eyebrow">Timeline</div>
              <h2 className="h-display" style={{ marginTop: 14 }}>Fifty years, in milestones.</h2>
            </div>
          </div>
          <div style={{ display: "grid", gap: 0, borderTop: "1px solid var(--line)" }}>
            {timeline.map(it => (
              <div key={it.y} style={{ display: "grid", gridTemplateColumns: "120px 200px 1fr", gap: 24, padding: "26px 0", borderBottom: "1px solid var(--line)", alignItems: "baseline" }}>
                <div style={{ fontFamily: "var(--serif)", fontSize: 36, color: "var(--accent-deep)", lineHeight: 1 }}>{it.y}</div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 19, color: "var(--ink)" }}>{it.t}</div>
                <div style={{ fontSize: 14, color: "var(--muted)", maxWidth: 60 + "ch" }}>{it.body}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="h-eyebrow">Networks</div>
          <h2 className="h-display" style={{ marginTop: 14, marginBottom: 30 }}>Independent network memberships.</h2>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
            <div className="card" style={{ padding: 36 }}>
              <h3 style={{ fontSize: 28 }}>Lex Mundi</h3>
              <p style={{ marginTop: 16, fontFamily: "var(--serif)", fontSize: 17, color: "var(--ink)" }}>
                Afridi &amp; Angell is the <strong>exclusive UAE member firm</strong> of Lex Mundi, "the world's leading network of independent law firms." Membership gives clients preferred access to <strong>21,000+ lawyers in 100+ countries</strong>.
              </p>
              <p style={{ marginTop: 14, fontSize: 12, color: "var(--muted)" }}>Figures attributed to Lex Mundi · Badge usage rights to confirm before publication.</p>
            </div>
            <div className="card" style={{ padding: 36 }}>
              <h3 style={{ fontSize: 28 }}>World Services Group</h3>
              <p style={{ marginTop: 16, fontFamily: "var(--serif)", fontSize: 17, color: "var(--ink)" }}>
                Member of WSG — a global multidisciplinary network connecting member firms across professional services.
              </p>
              <p style={{ marginTop: 14, fontSize: 12, color: "var(--muted)" }}>Badge usage rights to confirm.</p>
            </div>
          </div>
        </div>
      </section>

      <hr className="rule" />

      <section className="section">
        <div className="wrap">
          <div className="h-eyebrow" style={{ marginBottom: 30 }}>Editorial recognition</div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40 }}>
            {QUOTES.slice(0, 4).map((q, i) => (
              <blockquote key={i} className="pullquote">
                "{q.text}"
                <span className="att">— {q.source}</span>
              </blockquote>
            ))}
          </div>
          <p style={{ marginTop: 30, fontSize: 12, color: "var(--muted)" }}>
            All quotes are independent editorial assessments from legal directories — they are <strong>not client testimonials</strong>. No aggregate star rating is published or claimed.
          </p>
        </div>
      </section>
    </main>
  );
}

// ─────────────────────────── CONTACT ───────────────────────────
function ContactPage({ lang }) {
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ name: "", org: "", email: "", phone: "", office: "Dubai", practice: "", message: "" });
  const onChange = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const onSubmit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <main className="page" data-screen-label="11 Contact">
      <section className="pd-head">
        <div className="wrap">
          <div className="h-eyebrow">Contact · Request a consultation</div>
          <h1 className="h-display" style={{ marginTop: 14 }}>
            Speak to a <em style={{ fontStyle: "italic", color: "var(--accent-deep)" }}>partner</em>.
          </h1>
          <p style={{ marginTop: 22, fontFamily: "var(--serif)", fontSize: 18, color: "var(--muted)", maxWidth: 64 + "ch" }}>
            Briefly describe your matter. We'll route your enquiry to the appropriate practice group and office.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 60 }}>
          <div>
            {sent ? (
              <div style={{ padding: 40, background: "var(--paper-warm)", border: "1px solid var(--accent)" }}>
                <div className="h-eyebrow">Received · Demo</div>
                <h3 style={{ marginTop: 12, fontSize: 30 }}>Thank you, {form.name.split(" ")[0] || "we have your message"}.</h3>
                <p style={{ marginTop: 14, fontFamily: "var(--serif)", fontSize: 17 }}>
                  In the live build, your enquiry would be sent to <strong>{form.office.toLowerCase()}@afridi-angell.com</strong> and posted to the firm's CRM webhook. Demo only — no message has been transmitted.
                </p>
                <button className="btn btn-outline" style={{ marginTop: 22 }} onClick={() => { setSent(false); setForm({ name:"", org:"", email:"", phone:"", office:"Dubai", practice:"", message:"" }); }}>Send another</button>
              </div>
            ) : (
              <form onSubmit={onSubmit}>
                <div className="form-row">
                  <div className="field"><label>Name</label><input required value={form.name} onChange={onChange("name")} placeholder="Full name" /></div>
                  <div className="field"><label>Organisation</label><input value={form.org} onChange={onChange("org")} placeholder="Company / firm (optional)" /></div>
                </div>
                <div className="form-row">
                  <div className="field"><label>Email</label><input required type="email" value={form.email} onChange={onChange("email")} placeholder="you@firm.com" /></div>
                  <div className="field"><label>Phone</label><input value={form.phone} onChange={onChange("phone")} placeholder="+971 …" /></div>
                </div>
                <div className="form-row">
                  <div className="field">
                    <label>Office</label>
                    <select value={form.office} onChange={onChange("office")}>
                      {OFFICES.map(o => <option key={o.slug}>{o.city}</option>)}
                    </select>
                  </div>
                  <div className="field">
                    <label>Practice area</label>
                    <select value={form.practice} onChange={onChange("practice")}>
                      <option value="">— Select —</option>
                      {PRACTICES.map(p => <option key={p.slug} value={p.slug}>{p.name}</option>)}
                    </select>
                  </div>
                </div>
                <div className="form-row single">
                  <div className="field"><label>Brief description of your matter</label><textarea required value={form.message} onChange={onChange("message")} placeholder="A short summary — please do not share confidential details until engagement is confirmed." /></div>
                </div>
                <p style={{ fontSize: 12, color: "var(--muted)", marginBottom: 18 }}>
                  Submitting an enquiry does not create a lawyer–client relationship. Please do not send confidential information.
                </p>
                <button type="submit" className="btn btn-primary">Send enquiry <span className="arr">→</span></button>
              </form>
            )}
          </div>

          <aside>
            <div className="h-eyebrow" style={{ marginBottom: 18 }}>Direct contact</div>
            <div style={{ display: "grid", gap: 18 }}>
              {OFFICES.map(o => (
                <div key={o.slug} style={{ padding: "20px 22px", border: "1px solid var(--line)", background: "var(--paper)" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                    <h4 style={{ fontFamily: "var(--serif)", fontSize: 20 }}>{o.city}</h4>
                    <span style={{ fontSize: 11, letterSpacing: "0.12em", color: "var(--muted)", textTransform: "uppercase" }}>{o.country}</span>
                  </div>
                  <p style={{ marginTop: 10, fontSize: 13, color: "var(--muted)", lineHeight: 1.5 }}>{o.address[0]}, {o.address[1]}</p>
                  <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 4, fontFamily: "var(--mono)", fontSize: 13 }}>
                    <a href={"tel:" + o.phoneRaw}>{o.phone}</a>
                    <a href={"mailto:" + o.email} style={{ fontFamily: "var(--sans)" }}>{o.email}</a>
                  </div>
                </div>
              ))}
            </div>
            <p style={{ marginTop: 18, fontSize: 11, color: "var(--muted)", lineHeight: 1.6 }}>
              No WhatsApp channel is currently published; phone, email and the enquiry form are the institutional contact channels.
            </p>
          </aside>
        </div>
      </section>
    </main>
  );
}

// Export to global scope so app.jsx can reach them.
Object.assign(window, {
  ExpertisePage, PracticePage, PeoplePage, LawyerPage, InsightsPage,
  OfficesPage, OfficePage, AboutPage, ContactPage
});

// Mount the app now that all components are defined.
ReactDOM.createRoot(document.getElementById("root")).render(<App />);