/* Pages: Home, Practices, PracticeDetail, Experts, ExpertProfile, Insights, About, Contact */

const HomePage = ({ setPage, openConsult, locale, t }) => (
  <>
    {/* Hero */}
    <section className="hero">
      <div className="hero-bg">
        <img src="media/hero-home-002.webp" alt="Dubai Sheikh Zayed Road skyline near Burj Al Salam"/>
      </div>
      <div className="hero-grid">
        <div className="hero-left">
          <div>
            <span className="eyebrow eyebrow-light" style={{ color: 'rgba(255,255,255,0.6)' }}>
              {t('heroEyebrow', 'Emirati-founded · Established 1999')}
            </span>
            <h1 className="hero-h1 serif-tight">
              {locale === 'AR' ? <>
                {t('heroH1', '')}<br/>
                <span className="under-saffron">{t('heroH1b', '')}</span>
              </> : <>
                Born local,<br/>advising global.<br/>
                <span className="under-saffron">Disputes focused.</span>
              </>}
            </h1>
            <p className="hero-sub">
              {locale === 'AR' ? t('heroSub', '') :
                'Established 1999, an Emirati-founded firm of 75+ UAE, GCC and international lawyers across Dubai and Abu Dhabi. We resolve business-critical disputes \u2014 in litigation, arbitration, and ADR \u2014 for corporates, boards, financial institutions and governments.'}
            </p>
            <div className="hero-cta-row">
              <button className="btn btn-primary" onClick={openConsult}>
                {t('consultCta', 'Request a consultation')} <Arrow />
              </button>
              <button className="btn btn-secondary" onClick={() => setPage('practices')}>
                {t('exploreCta', 'Explore practices')}
              </button>
            </div>
          </div>
          <div className="hero-meta">
            <div>
              <span className="num serif">B1</span>
              <span className="lbl">Chambers Global Band 1 — UAE Dispute Resolution: Domestic</span>
            </div>
            <div>
              <span className="num serif">2024 · 2025</span>
              <span className="lbl">Chambers ME — UAE Disputes Firm of the Year</span>
            </div>
          </div>
        </div>
        <div className="hero-right">
          <div className="hero-stamp">Burj Al Salam, Sheikh Zayed Road · Dubai HQ</div>
        </div>
      </div>
      <div className="hero-ticker">
        <div className="hero-ticker-track">
          {[...Array(2)].flatMap((_, n) => ['DIAC', 'arbitrateAD', 'IICRA', 'SCCA', 'LCIA', 'SIAC', 'ICC', 'DIFC Courts', 'ADGM Courts', 'UAE Court of Cassation', 'CIArb (FCIArb)', 'IBA', 'HKIAC']
            .map((x, i) => <span key={n+'-'+i}>{x}</span>))}
        </div>
      </div>
    </section>

    {/* Firm at a glance */}
    <section className="section-tight">
      <div className="wrap">
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 24, gap: 32, flexWrap: 'wrap' }}>
          <div>
            <span className="eyebrow">The firm at a glance</span>
            <h3 className="serif" style={{ fontSize: 28, margin: '8px 0 0' }}>Firm-stated metrics, attributed.</h3>
          </div>
          <span style={{ fontSize: 12, color: 'var(--muted)', fontStyle: 'italic' }}>Source: Horizons & Co.</span>
        </div>
        <div className="glance">
          {FIRM_GLANCE.map((g, i) => (
            <div key={i} className="glance-cell">
              <span className="num">{g.num}</span>
              <span className="lbl">{g.lbl}</span>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Practices */}
    <section className="section section-paper2">
      <div className="wrap">
        <SectionHead
          eyebrow={t('practicesEyebrow', 'Practices')}
          title={t('practicesH', 'A full-service UAE firm — with disputes at its core.')}
          lede="Twelve practice groups across litigation, arbitration, corporate, finance, criminal, real estate, regulatory and freezone courts. Our lawyers are licensed to appear before all levels of the UAE domestic courts and the DIFC & ADGM."
          action={<button className="btn btn-ghost" onClick={() => setPage('practices')}>All practices <Arrow /></button>}
        />
        <div className="practice-grid">
          {PRACTICES.slice(0, 9).map(p => (
            <PracticeCard key={p.id} p={p} locale={locale} onClick={() => setPage('practice/' + p.id)} />
          ))}
        </div>
      </div>
    </section>

    {/* Recent outcomes — Success Stories on dark */}
    <section className="section section-dark">
      <div className="wrap">
        <SectionHead
          eyebrow={t('outcomesEyebrow', 'Recent outcomes')}
          title="Real matters. Dated. Anonymised."
          lede="Directory bands tell you who is ranked. These tell you what happened. Anonymised to protect client confidentiality, dated to be verifiable."
        />
        <div className="outcomes">
          <article className="outcome">
            <span className="mono" style={{ color: 'var(--saffron)' }}>Real Estate · Court of Cassation</span>
            <div className="stat serif">AED 248.5M</div>
            <p className="summary">Dismissal of a claim against a major UAE real-estate developer — secured across three judicial tiers, with final dismissal at the Court of Cassation.</p>
            <div className="meta"><span className="tag">Apr 9, 2026</span><span>Dispute Resolution</span></div>
          </article>
          <article className="outcome">
            <span className="mono" style={{ color: 'var(--saffron)' }}>Banking · Bankruptcy</span>
            <div className="stat serif">AED 18.8bn</div>
            <p className="summary">Landmark victory defending a former board director in proceedings under the UAE Bankruptcy Law.</p>
            <div className="meta"><span className="tag">Mar 16, 2026</span><span>Banking & Finance</span></div>
          </article>
          <article className="outcome">
            <span className="mono" style={{ color: 'var(--saffron)' }}>Director defence · 3 tiers</span>
            <div className="stat serif">AED 17.6M</div>
            <p className="summary">Complete victory for a company director across all three levels of the UAE court system.</p>
            <div className="meta"><span className="tag">Mar 11, 2026</span><span>Dispute Resolution</span></div>
          </article>
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 28 }}>
          <button className="btn btn-ghost" style={{ color: 'var(--saffron)' }} onClick={() => setPage('insights')}>All success stories <Arrow /></button>
        </div>
      </div>
    </section>

    {/* Experts strip */}
    <section className="section">
      <div className="wrap">
        <SectionHead
          eyebrow="Our people"
          title="Ranked partners. Multilingual bench."
          lede="Practitioners drawn from over twenty nationalities, speaking 18+ languages, licensed to appear before all UAE domestic courts and registered with the DIFC and ADGM."
          action={<button className="btn btn-ghost" onClick={() => setPage('experts')}>Full directory <Arrow /></button>}
        />
        <div className="experts-strip">
          {EXPERTS.slice(0, 6).map(e => (
            <ExpertCard key={e.id} e={e} onClick={() => setPage('expert/' + e.id)} />
          ))}
        </div>
      </div>
    </section>

    {/* Awards */}
    <section className="section section-paper2">
      <div className="wrap">
        <SectionHead
          eyebrow="Recognition"
          title="Ranked, attributed, current band only."
          lede="No invented star ratings. No superlatives. Each band sits with its directory, category and year — and the current band only. Older Chambers Band 2 rankings are deliberately omitted."
        />
        <div className="awards">
          {AWARDS.map((a, i) => <AwardCard key={i} a={a}/>)}
        </div>
        {/* client logos */}
        <div style={{ marginTop: 64, paddingTop: 32, borderTop: '1px solid var(--line)' }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Acted for (selected, with permission required at build)</div>
          <div style={{ display: 'flex', gap: 48, alignItems: 'center', flexWrap: 'wrap', opacity: 0.85 }}>
            {CLIENT_LOGOS.map(c => (
              <div key={c.name} style={{ height: 48, display: 'flex', alignItems: 'center' }}>
                <img src={c.src} alt={c.name} style={{ maxHeight: 48, maxWidth: 130, objectFit: 'contain', filter: 'grayscale(1)' }}/>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>

    {/* Insights teaser */}
    <section className="section">
      <div className="wrap">
        <SectionHead
          eyebrow="Insights"
          title="Legal updates, success stories, firm news."
          lede="A continuously updated hub: dated outcomes, regulatory guidance, and firm news. Authoritative, never promotional."
          action={<button className="btn btn-ghost" onClick={() => setPage('insights')}>All insights <Arrow /></button>}
        />
        <div className="insights-grid">
          {INSIGHTS.slice(0, 3).map((i, idx) => (
            <InsightCard key={i.id} i={i} small={idx > 0} onClick={() => setPage('insights')} />
          ))}
        </div>
      </div>
    </section>

    {/* CTA */}
    <section className="section-tight" style={{ paddingTop: 16 }}>
      <div className="wrap">
        <div className="cta-block">
          <div>
            <span className="eyebrow eyebrow-light" style={{ color: 'var(--saffron)' }}>Engagement by consultation</span>
            <h3 className="serif">Discuss a matter, in confidence.</h3>
            <p>Reply within one business day. EN · AR · RU · ZH. Routed to the most appropriate partner for the matter.</p>
          </div>
          <div className="cta-actions">
            <button className="btn btn-saffron" onClick={openConsult}>Request a consultation <Arrow /></button>
            <a className="btn btn-secondary" href="tel:+97143544444" style={{ borderColor: 'rgba(255,255,255,0.4)', color: '#fff' }}><PhoneIcon /> +971 4 354 4444 — Dubai</a>
            <a className="btn btn-secondary" href="tel:+97126506333" style={{ borderColor: 'rgba(255,255,255,0.4)', color: '#fff' }}><PhoneIcon /> +971 2 650 6333 — Abu Dhabi</a>
          </div>
        </div>
      </div>
    </section>

    {/* Offices */}
    <section className="section-tight">
      <div className="wrap">
        <SectionHead eyebrow="Two offices, not merged" title="Dubai & Abu Dhabi." />
        <div className="offices">
          {OFFICES.map(o => (
            <div className="office" key={o.city}>
              <div>
                <span className="city-tag">{o.label}</span>
                <h4 className="serif">{o.city}</h4>
                <div className="meta">
                  <div><strong>Address</strong>{o.address.map((a, i) => <div key={i}>{a}</div>)}</div>
                  <div><strong>Phone</strong><a href={'tel:' + o.phoneRaw}>{o.phone}</a></div>
                  <div><strong>Email</strong><a href={'mailto:' + o.email}>{o.email}</a></div>
                </div>
              </div>
              <MapPlate city={o.city} />
            </div>
          ))}
        </div>
      </div>
    </section>
  </>
);

// ============================ PRACTICES HUB ============================
const PracticesPage = ({ setPage, locale }) => (
  <>
    <header className="page-head">
      <div className="wrap">
        <div className="crumb">Practices</div>
        <h1>Twelve practices.<br/>One disputes-led firm.</h1>
        <p className="lede">A full-service UAE firm with a pronounced disputes focus. Our lawyers are licensed to appear before all levels of the UAE domestic courts (commercial, civil, criminal) and the DIFC and ADGM freezone courts, and practice under the major arbitral institutions.</p>
      </div>
    </header>
    <section className="section">
      <div className="wrap">
        <div className="practice-grid">
          {PRACTICES.map(p => (
            <PracticeCard key={p.id} p={p} locale={locale} onClick={() => setPage('practice/' + p.id)} />
          ))}
        </div>
      </div>
    </section>
  </>
);

// ============================ PRACTICE DETAIL ============================
const PracticeDetailPage = ({ id, setPage, openConsult }) => {
  const p = PRACTICES.find(x => x.id === id);
  if (!p) return <div className="wrap section">Practice not found.</div>;
  const relatedExperts = EXPERTS.filter(e => e.filters?.some(f => p.id.startsWith(f) || f === p.id.split('-')[0])).slice(0, 4);
  const relatedInsights = INSIGHTS.filter(i => i.practice.toLowerCase().includes(p.title.toLowerCase().split(' ')[0].toLowerCase())).slice(0, 3);
  return (
    <>
      <section className="wrap">
        <div className="practice-hero">
          <div>
            <div className="crumb mono" style={{ color: 'var(--muted)' }}>
              <a onClick={() => setPage('practices')} style={{ cursor: 'pointer' }}>Practices</a> / {p.num}
            </div>
            <h1>{p.title}</h1>
          </div>
          <div>
            <p style={{ fontSize: 19, lineHeight: 1.5, color: 'var(--ink-2)', margin: 0 }}>{p.detail}</p>
            <div style={{ display: 'flex', gap: 12, marginTop: 28 }}>
              <button className="btn btn-primary" onClick={() => openConsult({ practice: p.id })}>Request a consultation <Arrow /></button>
            </div>
          </div>
        </div>
      </section>
      {p.subs?.length ? (
        <section className="practice-section">
          <div className="wrap">
            <span className="eyebrow">Sub-practices</span>
            <h3 className="serif" style={{ marginTop: 12 }}>Scope of work.</h3>
            <div className="practice-subs">
              {p.subs.map((s, i) => (
                <div className="practice-sub-card" key={i}>
                  <h4>{s}</h4>
                  <p>Included within {p.title}.</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      ) : null}
      {p.institutions ? (
        <section className="practice-section">
          <div className="wrap">
            <span className="eyebrow">Courts & institutions</span>
            <h3 className="serif" style={{ marginTop: 12 }}>Where we appear.</h3>
            <p style={{ fontSize: 18, color: 'var(--ink-2)', maxWidth: '60ch' }}>{p.institutions}</p>
          </div>
        </section>
      ) : null}
      {relatedExperts.length ? (
        <section className="practice-section">
          <div className="wrap">
            <span className="eyebrow">Related experts</span>
            <h3 className="serif" style={{ marginTop: 12 }}>Practitioners in this group.</h3>
            <div className="experts-strip" style={{ marginTop: 28 }}>
              {relatedExperts.map(e => <ExpertCard key={e.id} e={e} onClick={() => setPage('expert/' + e.id)} />)}
            </div>
          </div>
        </section>
      ) : null}
      {relatedInsights.length ? (
        <section className="practice-section">
          <div className="wrap">
            <span className="eyebrow">Related insights</span>
            <h3 className="serif" style={{ marginTop: 12 }}>Recent work & analysis.</h3>
            <div className="insights-grid" style={{ marginTop: 28 }}>
              {relatedInsights.map((i, idx) => <InsightCard key={i.id} i={i} small={idx > 0} onClick={() => setPage('insights')} />)}
            </div>
          </div>
        </section>
      ) : null}
      <section className="section">
        <div className="wrap">
          <div className="cta-block">
            <div>
              <span className="eyebrow eyebrow-light" style={{ color: 'var(--saffron)' }}>Engagement by consultation</span>
              <h3 className="serif">Discuss a {p.title.toLowerCase()} matter.</h3>
              <p>Pre-routed to the {p.title} partner. Reply within one business day, in your preferred language.</p>
            </div>
            <div className="cta-actions">
              <button className="btn btn-saffron" onClick={() => openConsult({ practice: p.id })}>Request consultation <Arrow /></button>
              <a className="btn btn-secondary" href="tel:+97143544444" style={{ borderColor: 'rgba(255,255,255,0.4)', color: '#fff' }}><PhoneIcon /> +971 4 354 4444</a>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

// ============================ EXPERTS ============================
const ExpertsPage = ({ setPage }) => {
  const [filter, setFilter] = useState('all');
  const filters = [
    { id: 'all', label: 'All' },
    { id: 'partners', label: 'Partners' },
    { id: 'arbitration', label: 'Arbitration' },
    { id: 'corporate', label: 'Corporate' },
    { id: 'dispute-resolution', label: 'Dispute Resolution' },
    { id: 'private-notary', label: 'Private Notary' },
  ];
  const filtered = filter === 'all' ? EXPERTS : EXPERTS.filter(e => e.filters?.includes(filter));
  const counts = useMemo(() => Object.fromEntries(filters.map(f => [f.id, f.id === 'all' ? EXPERTS.length : EXPERTS.filter(e => e.filters?.includes(f.id)).length])), []);
  return (
    <>
      <header className="page-head">
        <div className="wrap">
          <div className="crumb">Experts</div>
          <h1>The bench.</h1>
          <p className="lede">75+ practitioners and support staff across Dubai and Abu Dhabi. Verified credentials only — every bar admission, court registration and arbitral panel below has been confirmed against the lawyer’s own record.</p>
          <div className="filter-bar">
            {filters.map(f => (
              <button key={f.id} className={'chip' + (filter === f.id ? ' active' : '')} onClick={() => setFilter(f.id)}>
                {f.label} <span className="ct">{counts[f.id]}</span>
              </button>
            ))}
          </div>
        </div>
      </header>
      <section className="section">
        <div className="wrap">
          <div className="experts-grid">
            {filtered.map(e => <ExpertCard key={e.id} e={e} onClick={() => setPage('expert/' + e.id)} />)}
          </div>
          {filtered.length === 0 ? <p style={{ color: 'var(--muted)' }}>No experts in this filter.</p> : null}
          <p style={{ marginTop: 40, fontSize: 13, color: 'var(--muted)', fontStyle: 'italic' }}>
            ⚠️ Portrait photography is being commissioned for the wider team. Founder portrait (Adv. Ali Al Zarooni) is pending — placeholder shown.
          </p>
        </div>
      </section>
    </>
  );
};

// ============================ EXPERT PROFILE ============================
const ExpertProfilePage = ({ id, setPage, openConsult }) => {
  const e = EXPERTS.find(x => x.id === id);
  if (!e) return <div className="wrap section">Expert not found.</div>;
  return (
    <>
      <section className="wrap">
        <div style={{ padding: '32px 0 0' }}>
          <div className="crumb mono" style={{ color: 'var(--muted)' }}>
            <a onClick={() => setPage('experts')} style={{ cursor: 'pointer' }}>Experts</a> / {e.role}
          </div>
        </div>
        <div className="profile-grid">
          <div>
            <div className="profile-photo">
              {e.placeholder ? <PortraitPlaceholder name={e.name} /> : <img src={e.photo} alt={e.name}/>}
              {e.verified ? <span className="verified" style={{ background: 'var(--saffron)' }}>Verified</span> : <span className="verified">Client to confirm</span>}
            </div>
            <div style={{ marginTop: 20, padding: 20, background: 'var(--paper-2)', border: '1px solid var(--line)' }}>
              <div className="eyebrow" style={{ marginBottom: 8 }}>Direct</div>
              {e.phone ? <div style={{ fontSize: 14 }}><a href={'tel:' + e.phone.replace(/\s/g, '')}>{e.phone}</a></div> : <div style={{ fontSize: 14, color: 'var(--muted)' }}>Direct line on request</div>}
              {e.email ? <div style={{ fontSize: 14 }}><a href={'mailto:' + e.email}>{e.email}</a></div> : <div style={{ fontSize: 14, color: 'var(--muted)' }}>info@horizlaw.ae</div>}
              <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 8 }}>Languages: {e.languages?.join(', ')}</div>
            </div>
          </div>
          <div className="profile-content">
            <h1>{e.name}</h1>
            <div className="title">{e.role}</div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', margin: '0 0 24px' }}>
              {e.practices?.map((p, i) => (
                <span key={i} className="chip" style={{ fontSize: 11, padding: '4px 10px' }}>{p}</span>
              ))}
            </div>
            <p className="bio">{e.bio}</p>
            <div className="profile-block">
              <h4>Education & Qualifications</h4>
              <ul>{e.education.map((x, i) => <li key={i}>{x}</li>)}</ul>
            </div>
            <div className="profile-block">
              <h4>Licensed before</h4>
              <ul>{e.licensed.map((x, i) => <li key={i}>{x}</li>)}</ul>
            </div>
            <div className="profile-block">
              <h4>Professional memberships</h4>
              <ul>{e.memberships.map((x, i) => <li key={i}>{x}</li>)}</ul>
            </div>
            <div style={{ display: 'flex', gap: 12, marginTop: 28 }}>
              <button className="btn btn-primary" onClick={() => openConsult({ lawyer: e.id })}>Request consultation with {e.name.split(' ')[0]} <Arrow /></button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

// ============================ INSIGHTS ============================
const InsightsPage = () => {
  const [cat, setCat] = useState('all');
  const cats = ['all', ...Array.from(new Set(INSIGHTS.map(i => i.cat)))];
  const filtered = cat === 'all' ? INSIGHTS : INSIGHTS.filter(i => i.cat === cat);
  const feature = filtered[0];
  const rest = filtered.slice(1);
  return (
    <>
      <header className="page-head">
        <div className="wrap">
          <div className="crumb">Insights</div>
          <h1>Legal updates, success stories &amp; firm news.</h1>
          <p className="lede">Dated, attributed, anonymised where required. We replace testimonials with verifiable outcomes.</p>
          <div className="filter-bar">
            {cats.map(c => (
              <button key={c} className={'chip' + (cat === c ? ' active' : '')} onClick={() => setCat(c)}>
                {c === 'all' ? 'All' : c}
              </button>
            ))}
          </div>
        </div>
      </header>
      <section className="section">
        <div className="wrap">
          {feature ? (
            <div className="insights-feature">
              <div className="img"><img src={feature.image} alt=""/></div>
              <div>
                <span className="eyebrow">{feature.cat} · {feature.practice}</span>
                <h2 className="serif" style={{ fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1.05, margin: '14px 0 16px' }}>{feature.title}</h2>
                <p style={{ fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.5 }}>{feature.excerpt}</p>
                <div style={{ marginTop: 16, fontSize: 13, color: 'var(--muted)' }}>{feature.date}</div>
                <button className="btn btn-ghost" style={{ marginTop: 24 }}>Read in full <Arrow /></button>
              </div>
            </div>
          ) : null}
          <div className="insights-page-grid">
            {rest.map(i => <InsightCard key={i.id} i={i} small />)}
          </div>
        </div>
      </section>
    </>
  );
};

// ============================ ABOUT ============================
const AboutPage = ({ openConsult }) => (
  <>
    <header className="page-head">
      <div className="wrap">
        <div className="crumb">About</div>
        <h1>An Emirati-founded firm, since 1999.</h1>
        <p className="lede">"Established in 1999, Horizons & Co. is an Emirati-founded firm made up of UAE, GCC and international practitioners, uniquely combining deep local knowledge with a global outlook."</p>
      </div>
    </header>
    <section className="wrap">
      <div className="about-intro">
        <img src="media/about-us-2019.webp" alt="Horizons & Co. team event" style={{ width: '100%', borderRadius: 2, aspectRatio: '16/10', objectFit: 'cover' }}/>
        <div>
          <p>Three lawyers became seventy-five. The firm was founded in 1999 by <strong>Adv. Ali Al Zarooni</strong>, two years after he graduated from the United Arab Emirates University with a degree in Sharia Law.</p>
          <p>The proposition has been steady: <em>be the UAE firm that international clients can rely on for the hardest dispute, with no compromise on local depth.</em> Today that means Chambers Global Band 1 for UAE Dispute Resolution: Domestic, and back-to-back recognition as Chambers Middle East UAE Domestic Dispute Resolution Firm of the Year for 2024 and 2025.</p>
          <div className="founder">
            — Adv. Ali Al Zarooni, Founder & Managing Partner
          </div>
        </div>
      </div>
    </section>
    <section className="wrap" style={{ paddingBottom: 64 }}>
      <span className="eyebrow">Timeline</span>
      <h3 className="serif" style={{ fontSize: 36, margin: '12px 0 28px' }}>Twenty-five years and counting.</h3>
      <div className="about-timeline">
        {TIMELINE.map((s, i) => (
          <div className="timeline-step" key={i}>
            <div className="yr">{s.yr}</div>
            <div className="lbl">{s.lbl}</div>
          </div>
        ))}
      </div>
    </section>
    <section className="wrap" style={{ paddingBottom: 96 }}>
      <span className="eyebrow">Values</span>
      <h3 className="serif" style={{ fontSize: 36, margin: '12px 0 28px' }}>How we work.</h3>
      <div className="about-values">
        {VALUES.map((v, i) => (
          <div className="value" key={i}>
            <h4>{v.h}</h4>
            <p>{v.t}</p>
          </div>
        ))}
      </div>
    </section>
    <section className="section section-dark">
      <div className="wrap">
        <SectionHead eyebrow="Office life" title="A team across two cities." lede="A bench of more than seventy-five, from twenty-plus nationalities, speaking eighteen-plus languages."/>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4 }}>
          {['firm-photo-people-001.webp', 'about-001.webp', 'about-003.webp'].map((src, i) => (
            <div key={i} style={{ aspectRatio: '4/5', overflow: 'hidden' }}>
              <img src={'media/' + src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
            </div>
          ))}
        </div>
      </div>
    </section>
    <section className="section">
      <div className="wrap">
        <div className="cta-block">
          <div>
            <h3 className="serif">Work with us, or come work with us.</h3>
            <p>Consultation enquiries, partnerships, or careers — we are interested in conversations.</p>
          </div>
          <div className="cta-actions">
            <button className="btn btn-saffron" onClick={() => openConsult({})}>Request consultation <Arrow /></button>
            <a className="btn btn-secondary" style={{ borderColor: 'rgba(255,255,255,0.4)', color: '#fff' }}>Careers →</a>
          </div>
        </div>
      </div>
    </section>
  </>
);

// ============================ CONTACT ============================
const ContactPage = ({ openConsult }) => {
  const [form, setForm] = useState({ name: '', email: '', subject: '', message: '' });
  const [sent, setSent] = useState(false);
  return (
    <>
      <header className="page-head">
        <div className="wrap">
          <div className="crumb">Contact</div>
          <h1>Two offices, not merged.</h1>
          <p className="lede">Dubai (HQ) and Abu Dhabi. Same firm, separate addresses. Email lands in both inboxes — phones do not.</p>
        </div>
      </header>
      <section className="wrap">
        <div className="contact-grid">
          <div>
            <span className="eyebrow">Offices</span>
            {OFFICES.map((o, idx) => (
              <div key={o.city} style={{ padding: '24px 0', borderBottom: '1px solid var(--line)' }}>
                <span className="city-tag" style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.16em', color: 'var(--saffron-deep)', textTransform: 'uppercase' }}>{o.label}</span>
                <h3 className="serif" style={{ fontSize: 34, margin: '8px 0 16px' }}>{o.city}</h3>
                <div style={{ fontSize: 14, lineHeight: 1.7, color: 'var(--ink-2)' }}>
                  {o.address.map((a, i) => <div key={i}>{a}</div>)}
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 16 }}>
                  <div>
                    <div className="eyebrow" style={{ fontSize: 10, marginBottom: 4 }}>Phone</div>
                    <a href={'tel:' + o.phoneRaw} style={{ fontSize: 14 }}>{o.phone}</a>
                    <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 4 }}>{o.altPhone} (alt.)</div>
                  </div>
                  <div>
                    <div className="eyebrow" style={{ fontSize: 10, marginBottom: 4 }}>Email</div>
                    <a href={'mailto:' + o.email} style={{ fontSize: 14 }}>{o.email}</a>
                  </div>
                </div>
              </div>
            ))}
            <div style={{ padding: '24px 0', fontSize: 13, color: 'var(--muted)' }}>
              <p style={{ margin: '0 0 8px' }}>Office hours, map coordinates and the role of the secondary Dubai numbers will be confirmed before publish.</p>
              <a href="https://www.linkedin.com/company/horizons-&-co-law-firm" target="_blank" rel="noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--ink)' }}>
                <LinkedinIcon /> Follow on LinkedIn
              </a>
            </div>
          </div>
          <div>
            <div className="contact-form">
              {!sent ? <>
                <h3>General enquiry.</h3>
                <p style={{ color: 'var(--muted)', fontSize: 14, marginTop: -8 }}>For confidential matters, use the <a onClick={() => openConsult({})} style={{ cursor: 'pointer', borderBottom: '1px solid' }}>consultation form</a>.</p>
                <form onSubmit={e => { e.preventDefault(); setSent(true); }}>
                  <div className="field">
                    <label>Name</label>
                    <input required value={form.name} onChange={e => setForm({...form, name: e.target.value})} />
                  </div>
                  <div className="field">
                    <label>Email</label>
                    <input type="email" required value={form.email} onChange={e => setForm({...form, email: e.target.value})} />
                  </div>
                  <div className="field">
                    <label>Subject</label>
                    <input value={form.subject} onChange={e => setForm({...form, subject: e.target.value})} />
                  </div>
                  <div className="field">
                    <label>Message</label>
                    <textarea rows={5} value={form.message} onChange={e => setForm({...form, message: e.target.value})} />
                  </div>
                  <button type="submit" className="btn btn-primary">Send enquiry <Arrow /></button>
                </form>
              </> : (
                <div style={{ textAlign: 'center', padding: '40px 16px' }}>
                  <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'var(--saffron)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                    <svg width="22" height="22" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10" stroke="#16161A" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </div>
                  <h3 style={{ margin: '0 0 8px' }}>Enquiry received.</h3>
                  <p style={{ color: 'var(--muted)' }}>We will reply within one business day.</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>
      <section className="section-tight">
        <div className="wrap">
          <div className="offices">
            {OFFICES.map(o => (
              <div className="office" key={o.city}>
                <div>
                  <span className="city-tag">{o.label}</span>
                  <h4 className="serif">{o.city}</h4>
                  <div className="meta">
                    <div><strong>Phone</strong><a href={'tel:' + o.phoneRaw}>{o.phone}</a></div>
                    <div><strong>Email</strong><a href={'mailto:' + o.email}>{o.email}</a></div>
                  </div>
                </div>
                <MapPlate city={o.city} />
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
};

Object.assign(window, { HomePage, PracticesPage, PracticeDetailPage, ExpertsPage, ExpertProfilePage, InsightsPage, AboutPage, ContactPage });