// Page components: Home, Practice listing, Practice detail, Firm, Insights, Insight detail, Contact

const { useState: useState_p, useEffect: useEffect_p } = React;

// =======================================================================
// HOME
// =======================================================================
function HomePage({ t, navigate }) {
  return (
    <main>
      {/* HERO */}
      <section className="hero" style={{ padding: 0 }}>
        <div className="hero-inner">
          <div className="hero-text">
            <div className="hero-mark">
              <span className="line"></span>
              <span className="eyebrow">{t.hero.eyebrow}</span>
            </div>
            <h1>
              {t.hero.h1a} <em>{t.hero.h1b}</em>
              <br />
              {t.hero.h1c}
            </h1>
            <p className="hero-sub">{t.hero.sub}</p>
            <div className="hero-cta">
              <button className="btn btn-primary" onClick={() => navigate("contact")}>
                {t.cta.consult}
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M5 12h14M13 5l7 7-7 7" />
                </svg>
              </button>
              <button className="btn btn-ghost" onClick={() => navigate("practice")}>
                {t.cta.explore}
              </button>
            </div>
            <div className="hero-meta">
              <div className="item">
                <div className="label">Founded</div>
                <div className="val">2000</div>
              </div>
              <div className="item">
                <div className="label">Practice areas</div>
                <div className="val">Thirteen</div>
              </div>
              <div className="item">
                <div className="label">Languages</div>
                <div className="val">EN · AR · RU</div>
              </div>
            </div>
          </div>

          <div className="hero-image">
            <img src="media/hero-3.webp" alt="Dubai legal counsel meeting" />
            <div className="hero-image-tag">
              <span className="dot"></span>
              <span>Business Bay · Dubai</span>
            </div>
            <div className="hero-seal">
              <Seal />
            </div>
          </div>
        </div>
      </section>

      {/* CREDIBILITY STRIP */}
      <section className="credstrip" style={{ padding: "32px 0" }}>
        <div className="container credstrip-row">
          <div className="credstrip-item">
            <div className="k"><span className="acc">Est.</span> 2000</div>
            <div className="v">Twenty-plus years in the market</div>
          </div>
          <div className="credstrip-item">
            <div className="k">UAE-national <span className="acc">advocate-led</span></div>
            <div className="v">Founder is a national-advocate</div>
          </div>
          <div className="credstrip-item">
            <div className="k">All UAE courts <span className="acc">incl. DIFC</span></div>
            <div className="v">Rights of audience across degrees</div>
          </div>
          <div className="credstrip-item">
            <div className="k">EN · AR · RU</div>
            <div className="v">Trilingual practice</div>
          </div>
        </div>
      </section>

      {/* PRACTICE GRID */}
      <section>
        <div className="container">
          <Reveal>
            <div className="section-num">{t.sections.practice.num}</div>
            <div className="section-head">
              <h2>
                {t.sections.practice.h} <em>{t.sections.practice.em}</em>
              </h2>
              <div className="copy">
                <p>{t.sections.practice.copy}</p>
                <p style={{ marginTop: 18 }}>
                  <a className="btn-link" href="#" onClick={(e) => { e.preventDefault(); navigate("practice"); }}>
                    View all practice areas
                    <span className="arr">→</span>
                  </a>
                </p>
              </div>
            </div>
          </Reveal>

          <div className="practice-grid">
            {PRACTICE_AREAS.slice(0, 9).map((p, i) => (
              <div
                key={p.slug}
                className="practice-card"
                onClick={() => navigate({ page: "practice-detail", slug: p.slug })}
              >
                <div className="pc-num">§ {String(i + 1).padStart(2, "0")}</div>
                <h3>{p.name}</h3>
                <p>{p.short}</p>
                <div className="pc-arrow">
                  Read brief <span className="arr">→</span>
                </div>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", justifyContent: "center", marginTop: 40 }}>
            <button className="btn btn-ghost" onClick={() => navigate("practice")}>
              All thirteen areas
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M5 12h14M13 5l7 7-7 7" />
              </svg>
            </button>
          </div>
        </div>
      </section>

      {/* FOUNDER BAND */}
      <section className="founder" style={{ padding: 0 }}>
        <div className="founder-inner">
          <div className="founder-img">
            <img src="media/founder.webp" alt="Nasser Malalla, founding advocate" />
            <div className="founder-img-caption">
              <div className="role">Founding Partner</div>
              <div className="name">Nasser Malalla</div>
            </div>
          </div>
          <div className="founder-content">
            <Reveal>
              <div className="section-num">{t.sections.founder.num}</div>
              <h2>
                {t.sections.founder.h} <em>{t.sections.founder.em}</em>{" "}
                {t.sections.founder.h2}
              </h2>
              <p style={{ color: "var(--slate)", fontSize: 16, marginTop: 24, lineHeight: 1.7 }}>
                The founder is a UAE-national advocate — a status that, under federal law, carries the right
                to appear before every UAE court of every degree. The firm was established in Dubai in 2000
                and has built its practice on the procedural fluency that comes from decades of in-court
                advocacy across civil, commercial, criminal and corporate matters.
              </p>
              <div className="founder-quote">
                We work with clients to devise problem-solving strategies sensitive to their particular
                interest, needs and objectives.
              </div>
              <div className="founder-cred">
                <div>
                  <div className="label">Education</div>
                  <div className="val">Dubai Police Academy, Law (1999)</div>
                </div>
                <div>
                  <div className="label">Prior service</div>
                  <div className="val">Eight years, Dubai Police</div>
                </div>
                <div>
                  <div className="label">Rights of audience</div>
                  <div className="val">All UAE courts of all degrees</div>
                </div>
                <div>
                  <div className="label">Office</div>
                  <div className="val">The Prime Tower, Business Bay</div>
                </div>
              </div>
              <div style={{ marginTop: 32 }}>
                <button className="btn-link" onClick={() => navigate("firm")}>
                  Read the firm's full story <span className="arr">→</span>
                </button>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* INSIGHTS TEASER */}
      <section>
        <div className="container">
          <Reveal>
            <div className="section-num">{t.sections.insights.num}</div>
            <div className="section-head">
              <h2>
                {t.sections.insights.h} <em>{t.sections.insights.em}</em>{" "}
                {t.sections.insights.h2}
              </h2>
              <div className="copy">
                <p>{t.sections.insights.copy}</p>
                <p style={{ marginTop: 18 }}>
                  <a className="btn-link" href="#" onClick={(e) => { e.preventDefault(); navigate("insights"); }}>
                    Browse the library
                    <span className="arr">→</span>
                  </a>
                </p>
              </div>
            </div>
          </Reveal>

          <div className="insights-grid">
            {INSIGHTS.slice(0, 3).map((article) => (
              <div
                key={article.slug}
                className="insight-card"
                onClick={() => navigate({ page: "insight-detail", slug: article.slug })}
              >
                <div className="ic-img">
                  <img src={article.image} alt={article.title} />
                </div>
                <div className="ic-meta">
                  <span className="cat">{article.category}</span>
                  <span>{article.date}</span>
                </div>
                <h3>{article.title}</h3>
                <div className="excerpt">{article.excerpt}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA BAND */}
      <section className="cta-band">
        <div className="container cta-band-inner">
          <Reveal>
            <h2>
              {t.cta_band.h_a} <em>{t.cta_band.h_em}</em>
            </h2>
            <p className="sub">{t.cta_band.sub}</p>
            <div className="cta-band-actions">
              <button className="btn btn-bronze" onClick={() => navigate("contact")}>
                {t.cta_band.primary}
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M5 12h14M13 5l7 7-7 7" />
                </svg>
              </button>
              <a href={CONTACT.phone_link} className="btn btn-paper-ghost">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" />
                </svg>
                {t.cta_band.secondary}
              </a>
            </div>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

// =======================================================================
// PRACTICE LIST
// =======================================================================
function PracticeListPage({ navigate }) {
  return (
    <main>
      <div className="page-hero">
        <div className="container">
          <div className="crumbs">
            <a href="#" onClick={(e) => { e.preventDefault(); navigate("home"); }}>Home</a>
            <span className="sep">/</span>
            <span>Practice areas</span>
          </div>
          <h1>
            Thirteen areas of <em>practice.</em>
            <br />One firm.
          </h1>
          <p className="lede">
            We act for businesses and individuals across every area of UAE-court practice — from civil and
            commercial litigation through to arbitration, criminal defence and personal-status matters.
            Each area is staffed by lawyers who do that work every day.
          </p>
        </div>
      </div>

      <section style={{ padding: "72px 0" }}>
        <div className="container">
          <div className="practice-grid">
            {PRACTICE_AREAS.map((p, i) => (
              <div
                key={p.slug}
                className="practice-card"
                onClick={() => navigate({ page: "practice-detail", slug: p.slug })}
              >
                <div className="pc-num">§ {String(i + 1).padStart(2, "0")}</div>
                <h3>{p.name}</h3>
                <p>{p.short}</p>
                <div className="pc-arrow">
                  Read brief <span className="arr">→</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="cta-band">
        <div className="container cta-band-inner">
          <h2>
            Not sure which area <em>applies?</em>
          </h2>
          <p className="sub">
            Send a short note describing the situation. We will direct it to the right lawyer in the firm
            and come back to you within two working days.
          </p>
          <div className="cta-band-actions">
            <button className="btn btn-bronze" onClick={() => navigate("contact")}>
              Request a consultation
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

// =======================================================================
// PRACTICE DETAIL
// =======================================================================
function PracticeDetailPage({ slug, navigate, t }) {
  const area = PRACTICE_AREAS.find((p) => p.slug === slug);
  if (!area) {
    return (
      <main style={{ padding: 96 }}>
        <div className="container">
          <h1>Not found</h1>
          <button className="btn-link" onClick={() => navigate("practice")}>Back to practice areas →</button>
        </div>
      </main>
    );
  }

  const related = area.related.map((s) => PRACTICE_AREAS.find((p) => p.slug === s)).filter(Boolean);

  return (
    <main>
      <div className="page-hero">
        <div className="container">
          <div className="crumbs">
            <a href="#" onClick={(e) => { e.preventDefault(); navigate("home"); }}>Home</a>
            <span className="sep">/</span>
            <a href="#" onClick={(e) => { e.preventDefault(); navigate("practice"); }}>Practice</a>
            <span className="sep">/</span>
            <span>{area.name}</span>
          </div>
          <h1>{area.name}</h1>
          <p className="lede">{area.lede}</p>
        </div>
      </div>

      <div className="container">
        <div className="practice-body">
          <div>
            <div style={{ aspectRatio: "16 / 8", overflow: "hidden", marginBottom: 48 }}>
              <img src={area.image} alt={area.name} style={{ width: "100%", height: "100%", objectFit: "cover", filter: "saturate(0.85)" }} />
            </div>

            {area.body.map((block, i) => (
              <div className="block" key={i}>
                <h3>{block.h}</h3>
                <h2 style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 400 }}>
                  {block.h === "Scope of work" ? "What we do." : "How we work."}
                </h2>
                <p>{block.p}</p>
              </div>
            ))}

            <div className="block">
              <h3>Considered carefully</h3>
              <h2 style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 400 }}>What you can expect.</h2>
              <ul className="list">
                <li>A written assessment of the matter — including realistic cost and timeline ranges — before any engagement letter is signed.</li>
                <li>A single named lawyer accountable for the file, with the wider team's resources behind them.</li>
                <li>Plain-language reporting on every material development, in English or Arabic at the client's preference.</li>
                <li>No surprises on fees: clear engagement-letter terms, structured billing, no undisclosed mark-ups.</li>
              </ul>
            </div>
          </div>

          <aside className="practice-aside">
            <div className="aside-card">
              <div className="label">Engage the firm</div>
              <h3>Speak with a {area.name.toLowerCase()} lawyer</h3>
              <p>
                Tell us briefly what the matter concerns. We will reply within two working days, and your
                request will be routed to the right specialist on day one.
              </p>
              <button className="btn btn-bronze" onClick={() => navigate({ page: "contact", area: area.slug })}>
                {t.cta.consult}
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M5 12h14M13 5l7 7-7 7" />
                </svg>
              </button>
              <div className="channel">
                <div className="row"><span>Direct</span><strong>{CONTACT.phone}</strong></div>
                <div className="row"><span>Mobile</span><strong>{CONTACT.mobile}</strong></div>
                <div className="row"><span>Email</span><strong>inquiry@nmlawyers.ae</strong></div>
              </div>
            </div>

            <div className="other-areas">
              <div className="label">Related areas</div>
              <ul>
                {related.map((r) => (
                  <li key={r.slug}>
                    <a href="#" onClick={(e) => { e.preventDefault(); navigate({ page: "practice-detail", slug: r.slug }); }}>
                      {r.name}
                      <span className="arr">→</span>
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          </aside>
        </div>
      </div>
    </main>
  );
}

// =======================================================================
// THE FIRM
// =======================================================================
function FirmPage({ navigate }) {
  return (
    <main>
      <div className="firm-hero">
        <div className="firm-hero-bg"></div>
        <div className="container firm-hero-inner">
          <div className="eyebrow" style={{ color: "var(--bronze)", marginBottom: 24 }}>The Firm · Est. 2000</div>
          <h1>
            An advocate-led firm,<br />
            <em>built in Dubai.</em>
          </h1>
          <p className="sub">
            We have practiced UAE law from Business Bay since 2000. The firm grew alongside Dubai's legal
            system itself — through the introduction of the DIFC, the modernisation of the federal codes,
            and the maturation of the UAE as one of the world's most active commercial dispute jurisdictions.
          </p>
        </div>
      </div>

      <section>
        <div className="container">
          <div className="section-head">
            <h2>
              A firm with one job:<br />
              <em>to be in court.</em>
            </h2>
            <div className="copy">
              <p>
                We are a litigation and advisory practice — not a transactional document factory. The
                firm's centre of gravity is the courtroom, the tribunal and the public prosecution
                office, and our drafting follows from that posture. Contracts we prepare are written
                to survive litigation; advisory work is delivered with the contentious endgame in
                view.
              </p>
              <p>
                The firm operates in English, Arabic and Russian; substantive work is supervised by
                UAE-qualified advocates, and the language of court remains Arabic. International
                clients are paired with bilingual associates so the case file reads correctly in both
                directions.
              </p>
            </div>
          </div>

          <div className="timeline">
            <Reveal>
              <div className="tl-item">
                <div className="year">2000</div>
                <div className="label">Founded</div>
                <p>The firm opens in Dubai as a multi-disciplinary advocacy practice under the founder's name.</p>
              </div>
            </Reveal>
            <Reveal delay={100}>
              <div className="tl-item">
                <div className="year">2009</div>
                <div className="label">DIFC capacity</div>
                <p>Practice extended to representation in DIFC Courts as the English-language jurisdiction matures.</p>
              </div>
            </Reveal>
            <Reveal delay={200}>
              <div className="tl-item">
                <div className="year">2015</div>
                <div className="label">Insights begin</div>
                <p>Long-running legal-insights series launches to make UAE-law commentary publicly available.</p>
              </div>
            </Reveal>
            <Reveal delay={300}>
              <div className="tl-item">
                <div className="year">2020</div>
                <div className="label">Trilingual practice</div>
                <p>Russian-language client service formalised alongside Arabic and English to reflect the client base.</p>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Founder profile expanded */}
      <section className="founder" style={{ padding: 0 }}>
        <div className="founder-inner">
          <div className="founder-img">
            <img src="media/founder-office.webp" alt="Nasser Malalla in office" />
            <div className="founder-img-caption">
              <div className="role">Founding Partner · UAE-National Advocate</div>
              <div className="name">Nasser Malalla</div>
            </div>
          </div>
          <div className="founder-content">
            <div className="section-num">Founding partner</div>
            <h2>
              From the police academy <em>to the bench bar.</em>
            </h2>
            <p style={{ color: "var(--slate)", fontSize: 16, marginTop: 24, lineHeight: 1.7 }}>
              The founder graduated in law and police sciences from the Dubai Police Academy in 1999
              and served eight years in the Dubai Police before establishing the firm. That formation —
              law studied alongside procedure, and procedure studied from inside the system — defines
              the firm's working style today.
            </p>
            <p style={{ color: "var(--slate)", fontSize: 16, marginTop: 16, lineHeight: 1.7 }}>
              As a UAE national, the founder holds rights of audience before all UAE courts of every
              degree — including the Court of Cassation and the Federal Supreme Court, and including
              the DIFC Courts.
            </p>
            <div className="founder-cred">
              <div>
                <div className="label">Law degree</div>
                <div className="val">Dubai Police Academy, 1999</div>
              </div>
              <div>
                <div className="label">Bar status</div>
                <div className="val">UAE-national advocate</div>
              </div>
              <div>
                <div className="label">Languages</div>
                <div className="val">Arabic · English</div>
              </div>
              <div>
                <div className="label">Practice focus</div>
                <div className="val">Commercial · Civil · Criminal</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Capability map */}
      <div className="capmap">
        <div className="capmap-inner">
          <div>
            <div className="section-num">Capability</div>
            <h2>
              Capability map<br />
              <em>at a glance.</em>
            </h2>
            <p style={{ color: "var(--slate)", marginTop: 16, fontSize: 15 }}>
              The thirteen practice areas the firm carries today, in the order in which they generally
              show up on the docket.
            </p>
          </div>
          <div>
            <div className="cap-table">
              {PRACTICE_AREAS.map((p, i) => (
                <div className="cap-row" key={p.slug} onClick={() => navigate({ page: "practice-detail", slug: p.slug })} style={{ cursor: "pointer" }}>
                  <div className="num">§ {String(i + 1).padStart(2, "0")}</div>
                  <div className="name">{p.name}</div>
                  <div className="desc">{p.short}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* People - placeholder for confirmed team */}
      <section>
        <div className="container">
          <div className="section-num">People</div>
          <div className="section-head">
            <h2>
              The team behind <em>every file.</em>
            </h2>
            <div className="copy">
              <p>
                The firm pairs experienced UAE-national advocates with bilingual associates and a
                dedicated paralegal team. Named partner profiles below; the wider team will be added as
                each member's headshot and bar-admission record is confirmed.
              </p>
            </div>
          </div>

          <div className="people-grid">
            <div className="person-card">
              <div className="ph">
                <img src="media/founder.webp" alt="Nasser Malalla" />
              </div>
              <h3>Nasser Malalla</h3>
              <div className="title">Founding Partner · Advocate</div>
              <p>
                UAE-national advocate. Rights of audience before all UAE courts of every degree, including
                the DIFC Courts. Twenty-five years in active practice. Languages: Arabic, English.
              </p>
            </div>
            <div className="person-card">
              <div className="ph pending">
                Partner profile<br />— pending<br />confirmation —
              </div>
              <h3>Senior Partner</h3>
              <div className="title">Profile pending</div>
              <p>To be added once bar admission and qualifications are confirmed for publication.</p>
            </div>
            <div className="person-card">
              <div className="ph pending">
                Associate<br />profiles<br />— pending —
              </div>
              <h3>Associate team</h3>
              <div className="title">Profiles pending</div>
              <p>Bilingual associate team — profiles to be added with photographs and credentials.</p>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// =======================================================================
// INSIGHTS LIST
// =======================================================================
function InsightsPage({ navigate }) {
  const cats = ["All", ...Array.from(new Set(INSIGHTS.map((a) => a.category)))];
  const [cat, setCat] = useState_p("All");
  const list = cat === "All" ? INSIGHTS : INSIGHTS.filter((a) => a.category === cat);

  return (
    <main>
      <div className="page-hero">
        <div className="container">
          <div className="crumbs">
            <a href="#" onClick={(e) => { e.preventDefault(); navigate("home"); }}>Home</a>
            <span className="sep">/</span>
            <span>Insights</span>
          </div>
          <h1>
            Notes on <em>UAE law,</em><br />
            published as we write them.
          </h1>
          <p className="lede">
            A continuous series of bylined articles on the legal questions our clients face. Every
            piece is dated, attributed, and updated when the underlying law moves.
          </p>
        </div>
      </div>

      <section className="insights-page">
        <div className="container">
          <div className="filter-row">
            <span className="label">Filter</span>
            {cats.map((c) => (
              <button key={c} className={"chip " + (c === cat ? "on" : "")} onClick={() => setCat(c)}>
                {c}
              </button>
            ))}
          </div>

          <div className="insights-grid">
            {list.map((article) => (
              <div
                key={article.slug}
                className="insight-card"
                onClick={() => navigate({ page: "insight-detail", slug: article.slug })}
              >
                <div className="ic-img">
                  <img src={article.image} alt={article.title} />
                </div>
                <div className="ic-meta">
                  <span className="cat">{article.category}</span>
                  <span>{article.date}</span>
                </div>
                <h3>{article.title}</h3>
                <div className="excerpt">{article.excerpt}</div>
              </div>
            ))}
          </div>

          {list.length === 0 && (
            <div style={{ textAlign: "center", padding: 80, color: "var(--muted)" }}>
              No insights in this category yet.
            </div>
          )}
        </div>
      </section>
    </main>
  );
}

// =======================================================================
// INSIGHT DETAIL
// =======================================================================
function InsightDetailPage({ slug, navigate }) {
  const article = INSIGHTS.find((a) => a.slug === slug);
  if (!article) {
    return (
      <main style={{ padding: 96 }}>
        <div className="container">
          <h1>Article not found</h1>
          <button className="btn-link" onClick={() => navigate("insights")}>Back to insights →</button>
        </div>
      </main>
    );
  }
  return (
    <main>
      <div className="container">
        <article className="article">
          <div className="crumbs">
            <a href="#" onClick={(e) => { e.preventDefault(); navigate("home"); }}>Home</a>
            <span className="sep">/</span>
            <a href="#" onClick={(e) => { e.preventDefault(); navigate("insights"); }}>Insights</a>
            <span className="sep">/</span>
            <span>{article.category}</span>
          </div>
          <h1>{article.title}</h1>
          <div className="article-meta">
            <span className="cat">{article.category}</span>
            <span>{article.date}</span>
            <span>NM Law · Editorial</span>
          </div>
          <div className="article-hero">
            <img src={article.image} alt={article.title} />
          </div>
          <p className="lede">{article.lede}</p>
          {article.body.map((b, i) => {
            if (typeof b === "string") return <p key={i}>{b}</p>;
            if (b.pull) return <div key={i} className="pull">{b.pull}</div>;
            return null;
          })}

          <div style={{ marginTop: 64, paddingTop: 32, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
            <button className="btn-link" onClick={() => navigate("insights")}>
              <span className="arr" style={{ transform: "scaleX(-1)" }}>→</span> All insights
            </button>
            <button className="btn btn-ghost" onClick={() => navigate("contact")}>
              Speak with a lawyer about this
            </button>
          </div>
        </article>
      </div>
    </main>
  );
}

// =======================================================================
// CONTACT
// =======================================================================
function ContactPage({ navigate, t, prefillArea }) {
  return (
    <main>
      <div className="page-hero">
        <div className="container">
          <div className="crumbs">
            <a href="#" onClick={(e) => { e.preventDefault(); navigate("home"); }}>Home</a>
            <span className="sep">/</span>
            <span>Contact</span>
          </div>
          <h1>
            Request a <em>consultation.</em>
          </h1>
          <p className="lede">
            A short summary of the matter is all we need to begin. We will route your request to the
            right lawyer on day one and reply within two working days. All correspondence is treated
            in confidence.
          </p>
        </div>
      </div>

      <div className="container">
        <div className="contact-grid">
          <div>
            <div className="section-num">Send a request</div>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 400, marginBottom: 32 }}>
              Tell us about the matter.
            </h2>
            <ConsultationForm defaultArea={prefillArea || ""} t={t} />
          </div>

          <div>
            <div className="section-num">Find the firm</div>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 400, marginBottom: 32 }}>
              Office &amp; channels.
            </h2>

            <div className="info-stack">
              <div className="info-card">
                <div className="label">Office</div>
                <div className="val">{CONTACT.address}</div>
              </div>

              <div className="info-card">
                <div className="label">By phone</div>
                <div className="val">
                  <div className="row">
                    <span style={{ color: "var(--muted)", fontSize: 13 }}>Direct</span>
                    <a href={CONTACT.phone_link}>{CONTACT.phone}</a>
                  </div>
                  <div className="row">
                    <span style={{ color: "var(--muted)", fontSize: 13 }}>Mobile</span>
                    <a href={CONTACT.mobile_link}>{CONTACT.mobile}</a>
                  </div>
                  <div className="row">
                    <span style={{ color: "var(--muted)", fontSize: 13 }}>Fax</span>
                    <span>{CONTACT.fax}</span>
                  </div>
                </div>
              </div>

              <div className="info-card">
                <div className="label">By email</div>
                <div className="val">
                  {CONTACT.emails.map((e) => (
                    <div className="row" key={e}>
                      <span style={{ color: "var(--muted)", fontSize: 13 }}>
                        {e.split("@")[0] === "info" ? "General" : e.split("@")[0] === "inquiry" ? "Enquiries" : "Careers"}
                      </span>
                      <a href={"mailto:" + e}>{e}</a>
                    </div>
                  ))}
                </div>
              </div>

              <div className="info-card">
                <div className="label">Office hours</div>
                <div className="val">{CONTACT.hours}</div>
              </div>
            </div>

            <div className="map-block" role="img" aria-label="Map placeholder for The Prime Tower, Business Bay" />
          </div>
        </div>
      </div>
    </main>
  );
}

Object.assign(window, {
  HomePage, PracticeListPage, PracticeDetailPage, FirmPage, InsightsPage, InsightDetailPage, ContactPage,
});