/* Hadef & Partners — page components */

const D2 = window.DATA;

/* ============ HOME ============ */
function HomePage({ setPage }) {
  const t = useT();
  const featured = D2.insights.slice(0, 3);
  const featuredLawyers = D2.lawyers; // all 3 verified
  return (
    <div className="page-enter">

      {/* ---- HERO ---- */}
      <section style={{position:'relative', borderBottom:'1px solid var(--ink)'}}>
        <div className="container" style={{paddingBlock:'56px 80px'}}>
          <div className="grid-12" style={{alignItems:'end'}}>
            <div style={{gridColumn:'span 7'}}>
              <div style={{display:'flex',alignItems:'center',gap:14,marginBottom:36}}>
                <span style={{display:'inline-block',width:42,height:1,background:'var(--gold)'}} />
                <span className="eyebrow" style={{color:'var(--gold)'}}>
                  {t("A world-class UAE law firm — Since 1980", "مكتب محاماة إماراتي رائد — منذ 1980")}
                </span>
              </div>
              <h1 className="display h-display" style={{textWrap:'balance'}}>
                {t("Where ", "حيث ")}
                <em>{t("Legacy", "الإرث")}</em>
                {t(" meets ", " يلتقي ")}
                <em>{t("Vision.", "بالرؤية.")}</em>
              </h1>
              <p className="lede" style={{marginTop:36, maxWidth:'46ch'}}>
                {t(
                  "Forty-five years inside one jurisdiction. The first IPO. The first Islamic-bank IPO. The first UAE Space Law. Hadef & Partners advises across the matters that shape the United Arab Emirates.",
                  "خمسة وأربعون عاماً ضمن ولاية قضائية واحدة. أول طرح عام. أول طرح لبنك إسلامي. أول قانون فضاء إماراتي. يقدّم هادف وشركاه المشورة في القضايا التي تُشكّل دولة الإمارات."
                )}
              </p>
              <div style={{display:'flex',gap:16,marginTop:40,flexWrap:'wrap'}}>
                <button className="btn btn-primary" onClick={() => setPage({name:'expertise'})}>
                  {t("Explore our expertise","استكشف خبراتنا")} <span className="arrow">→</span>
                </button>
                <button className="btn" onClick={() => setPage({name:'people'})}>
                  {t("Find a lawyer","ابحث عن محامٍ")} <span className="arrow">→</span>
                </button>
              </div>
            </div>
            <div style={{gridColumn:'span 5', display:'flex',flexDirection:'column',gap:24}}>
              <div className="img-wrap" style={{aspectRatio:'4/5'}}>
                <img src="media/office-dubai-1.webp" alt="" style={{width:'100%',height:'100%',objectFit:'cover'}} />
              </div>
              <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:12,paddingTop:8}}>
                <Metric n="1980" l={t("Founded","تأسست")} />
                <Metric n="90+"  l={t("Lawyers","محاميًا")} />
                <Metric n="14·12" l={t("Practices · Sectors","تخصصاً · قطاعاً")} />
              </div>
            </div>
          </div>
        </div>
      </section>

      <RankingsStrip />

      {/* ---- EXPERTISE PREVIEW ---- */}
      <section className="section container">
        <SectionHead
          num="01"
          eyebrow={t("Expertise","الخبرات")}
          title={t("Fourteen practices. Twelve sectors. One jurisdiction.","أربعة عشر تخصصاً. اثنا عشر قطاعاً. ولاية واحدة.")}
          kicker={t(
            "Our collaborative model means the experience of the whole firm is available on every mandate — corporate, contentious or advisory.",
            "نموذجنا التعاوني يعني أن خبرة المكتب بأكمله متاحة لكل قضية — تجارية، تقاضي أو استشارية."
          )}
          actions={[
            <button key="a" className="btn btn-ghost" onClick={() => setPage({name:'expertise'})}>
              {t("All practices","جميع التخصصات")} <span className="arrow">→</span>
            </button>
          ]}
        />
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'0 64px'}}>
          <div>
            {D2.practices.slice(0,7).map((p,i) => <PracticeCard key={p.slug} practice={p} setPage={setPage} idx={i} />)}
          </div>
          <div>
            {D2.practices.slice(7,14).map((p,i) => <PracticeCard key={p.slug} practice={p} setPage={setPage} idx={i+7} />)}
          </div>
        </div>
      </section>

      {/* ---- LEGACY MOMENT ---- */}
      <section style={{background:'var(--ink)', color:'var(--paper)'}}>
        <div className="container section">
          <div className="grid-12" style={{alignItems:'center',gap:'48px 24px'}}>
            <div style={{gridColumn:'span 5'}}>
              <div className="eyebrow" style={{color:'rgba(244,239,229,.5)'}}>02 · {t("Legacy","الإرث")}</div>
              <h2 className="display h-1" style={{marginTop:20,color:'var(--paper)'}}>
                {t("A record of ","سجلّ من ")}
                <em style={{color:'var(--gold)',fontStyle:'italic'}}>{t("firsts","الإنجازات الأولى")}</em>
                {t(" — published and attributed."," — منشورة وموثّقة.")}
              </h2>
              <p className="lede" style={{color:'rgba(244,239,229,.75)',marginTop:24}}>
                {t(
                  "The firm's published 'firsts' are not a flourish. They are how Dr. Hadef Al Dhaheri and his partners chose to build the UAE legal system — one landmark mandate at a time.",
                  "ليست 'الإنجازات الأولى' المنشورة من باب الزخرفة، بل هي الطريقة التي اختار بها د. هادف الظاهري وشركاؤه بناء المنظومة القانونية الإماراتية — مهمة بارزة تلو الأخرى."
                )}
              </p>
              <button className="btn" style={{marginTop:32,borderColor:'var(--paper)',color:'var(--paper)'}}
                      onClick={() => setPage({name:'about',scroll:'firsts'})}>
                {t("Read our story","اقرأ قصتنا")} <span className="arrow">→</span>
              </button>
            </div>
            <div style={{gridColumn:'span 7',display:'grid',gridTemplateColumns:'repeat(3, 1fr)',gap:14}}>
              {D2.firsts.slice(0,6).map((f,i) =>
                <div key={f.year} style={{display:'flex',flexDirection:'column',gap:10}}>
                  <div className="img-wrap" style={{aspectRatio:'4/3',background:'var(--ink-3)'}}>
                    <img src={f.img} alt="" className="img-fade" style={{width:'100%',height:'100%',objectFit:'cover',opacity:.92}}/>
                  </div>
                  <div style={{fontFamily:'var(--mono)',fontSize:11,color:'var(--gold)',letterSpacing:'.08em'}}>{f.year}</div>
                  <div style={{fontFamily:'var(--display)',fontSize:18,lineHeight:1.15,color:'var(--paper)'}}>{f.title}</div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* ---- PEOPLE ---- */}
      <section className="section container">
        <SectionHead
          num="03"
          eyebrow={t("People","المحامون")}
          title={t("Counsel who answer the phone.","محامون يردّون على الهاتف.")}
          kicker={t(
            "Ninety-plus lawyers across Dubai and Abu Dhabi. Each profile lists practices, credentials and a direct line.",
            "أكثر من تسعين محامياً بين دبي وأبوظبي. كل ملف يدرج التخصصات والمؤهلات وخط الاتصال المباشر."
          )}
          actions={[
            <button key="a" className="btn btn-ghost" onClick={() => setPage({name:'people'})}>
              {t("All people","الكل")} <span className="arrow">→</span>
            </button>
          ]}
        />
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:'24px'}}>
          {featuredLawyers.map(l => <LawyerCard key={l.slug} lawyer={l} setPage={setPage} large />)}
        </div>
      </section>

      {/* ---- INSIGHTS ---- */}
      <section style={{background:'var(--paper-2)'}}>
        <div className="container section">
          <SectionHead
            num="04"
            eyebrow={t("Insights","آراء قانونية")}
            title={t("What the firm is thinking.","ما يفكّر فيه المكتب.")}
            actions={[
              <button key="a" className="btn btn-ghost" onClick={() => setPage({name:'insights'})}>
                {t("All insights","الكل")} <span className="arrow">→</span>
              </button>
            ]}
          />
          <InsightCard insight={featured[0]} setPage={setPage} layout="wide" />
          <hr className="rule" style={{margin:'56px 0'}} />
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:48}}>
            <InsightCard insight={featured[1]} setPage={setPage} />
            <InsightCard insight={featured[2]} setPage={setPage} />
          </div>
        </div>
      </section>

      {/* ---- OFFICES TEASER ---- */}
      <section className="section container">
        <SectionHead num="05" eyebrow={t("Two UAE offices","مكتبان في الإمارات")}
          title={t("UAE-only. By strategy.","الإمارات فقط. باستراتيجية.")}
          kicker={t(
            "Our decision not to expand outside the UAE is deliberate. It enables us to deliver highly specialised legal advice, to international standards.",
            "قرارنا بعدم التوسّع خارج الإمارات قرار استراتيجي، يُمكّننا من تقديم استشارات قانونية متخصّصة بمعايير دولية."
          )}
        />
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:24}}>
          {D2.offices.map(o =>
            <div key={o.slug}>
              <div className="img-wrap" style={{aspectRatio:'5/4'}}>
                <img src={o.img} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}} className="img-fade" />
              </div>
              <div style={{marginTop:24,display:'grid',gridTemplateColumns:'auto 1fr auto',gap:24,alignItems:'start'}}>
                <span className="display num" style={{fontSize:14,color:'var(--gold)'}}>{o.slug === 'dubai' ? 'DXB' : 'AUH'}</span>
                <div>
                  <div className="display h-2">{t(o.city, o.ar_city)}</div>
                  <div style={{fontSize:14,color:'var(--muted)',marginTop:10,lineHeight:1.55,maxWidth:'40ch'}}>{t(o.address, o.ar_address)}</div>
                </div>
                <a href={`tel:${o.tel}`} className="num" style={{fontSize:14,whiteSpace:'nowrap',color:'var(--ink)',borderBottom:'1px solid var(--gold)',paddingBottom:2}}>{o.phone}</a>
              </div>
            </div>
          )}
        </div>
      </section>
    </div>
  );
}

function Metric({n,l}) {
  return (
    <div style={{borderTop:'1px solid var(--ink)', paddingTop:14, display:'flex',flexDirection:'column',gap:6}}>
      <div className="display num" style={{fontSize:30, lineHeight:1, color:'var(--ink)'}}>{n}</div>
      <div className="eyebrow">{l}</div>
    </div>
  );
}

/* ============ EXPERTISE HUB ============ */
function ExpertisePage({ setPage }) {
  const t = useT();
  const [tab, setTab] = useState("practices");
  return (
    <div className="page-enter">
      <PageHero
        eyebrow={t("Expertise","الخبرات")}
        title={
          <>{t("Collaborative across ","تعاون عبر ")}
            <em>{t("14 practices","14 تخصصاً")}</em>
            {t(", deep in ","، وعمق في ")}
            <em>{t("12 sectors","12 قطاعاً")}</em>.</>
        }
        copy={t(
          "Although many of our lawyers have a specialist focus, our collaborative approach ensures the expertise of the firm as a whole is available to meet the requirements of each transaction or case.",
          "رغم أن كثيرًا من محامينا متخصّصون، فإن نهجنا التعاوني يضمن إتاحة خبرة المكتب بأكمله لتلبية متطلبات كل معاملة أو قضية."
        )}
      />
      <section className="container section">
        <div style={{display:'flex',gap:24,borderBottom:'1px solid var(--ink)',marginBottom:48,paddingBottom:18}}>
          <Tab on={tab==='practices'} onClick={() => setTab('practices')}>
            {t("Practices","التخصصات")} <sup style={{fontSize:11,color:'var(--gold)',marginInlineStart:6}}>14</sup>
          </Tab>
          <Tab on={tab==='sectors'} onClick={() => setTab('sectors')}>
            {t("Sectors","القطاعات")} <sup style={{fontSize:11,color:'var(--gold)',marginInlineStart:6}}>12</sup>
          </Tab>
        </div>
        {tab === 'practices' ?
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'0 64px'}}>
            <div>{D2.practices.slice(0,7).map((p,i) => <PracticeCard key={p.slug} practice={p} setPage={setPage} idx={i}/>)}</div>
            <div>{D2.practices.slice(7,14).map((p,i) => <PracticeCard key={p.slug} practice={p} setPage={setPage} idx={i+7}/>)}</div>
          </div>
          :
          <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:24}}>
            {D2.sectors.map((s,i) =>
              <div key={s.slug} style={{padding:'28px 24px',border:'1px solid var(--line)',background:'var(--paper-3)',display:'flex',flexDirection:'column',gap:12,minHeight:160}}>
                <span className="num" style={{fontSize:11,color:'var(--muted)'}}>{String(i+1).padStart(2,'0')} / 12</span>
                <div className="display h-3" style={{lineHeight:1.1, textWrap:'balance'}}>{t(s.en, s.ar)}</div>
                <span style={{marginTop:'auto',color:'var(--gold)',fontFamily:'var(--mono)',fontSize:11,letterSpacing:'.08em',textTransform:'uppercase'}}>
                  {t("Speak to the team","تحدّث مع الفريق")} →
                </span>
              </div>
            )}
          </div>
        }
      </section>
    </div>
  );
}

function Tab({on,onClick,children}) {
  return (
    <button onClick={onClick}
            style={{
              fontFamily:'var(--display)',
              fontSize:24,
              paddingBottom:4,
              borderBottom: on ? '2px solid var(--gold)' : '2px solid transparent',
              color: on ? 'var(--ink)' : 'var(--muted)',
              transition:'all .3s var(--ease)',
            }}>{children}</button>
  );
}

/* ============ PRACTICE DETAIL ============ */
function PracticePage({ setPage, slug }) {
  const t = useT();
  const p = D2.practices.find(x => x.slug === slug) || D2.practices[4];
  const relLawyers = (p.lawyers || []).map(s => D2.lawyers.find(l => l.slug === s)).filter(Boolean);
  const relInsights = D2.insights.filter(i => relLawyers.some(l => l && l.slug === i.author)).slice(0,3);
  return (
    <div className="page-enter">
      {/* Breadcrumb hero */}
      <section className="container" style={{paddingBlock:'48px 96px',borderBottom:'1px solid var(--ink)'}}>
        <Breadcrumb setPage={setPage} crumbs={[
          {label:t("Expertise","الخبرات"), to:{name:'expertise'}},
          {label:t(p.en, p.ar)}
        ]}/>
        <div className="grid-12" style={{marginTop:48,alignItems:'end'}}>
          <div style={{gridColumn:'span 8'}}>
            <div className="eyebrow" style={{color:'var(--gold)'}}>{t("Practice","تخصص")} · 14 {t("of","من")} 14</div>
            <h1 className="display h-1" style={{marginTop:24,textWrap:'balance'}}>{t(p.en, p.ar)}</h1>
            <p className="lede" style={{marginTop:24,maxWidth:'52ch'}}>{p.blurb}</p>
            {p.band &&
              <div style={{marginTop:32,display:'inline-flex',alignItems:'center',gap:14, padding:'10px 16px',border:'1px solid var(--gold)',color:'var(--gold)',fontFamily:'var(--mono)',fontSize:11,letterSpacing:'.06em',textTransform:'uppercase'}}>
                <span style={{width:6,height:6,background:'var(--gold)'}}></span>{p.band}
              </div>
            }
          </div>
          <div style={{gridColumn:'span 4',display:'flex',flexDirection:'column',gap:16}}>
            <button className="btn btn-gold" onClick={() => setPage({name:'contact',scroll:'form',practice:p.slug})}>
              {t(`Speak to our ${p.en} team`, `تحدّث مع فريق ${p.ar}`)} <span className="arrow">→</span>
            </button>
            <a href="tel:+97144292999" className="btn">
              +971 4 429 2999 <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </section>

      <section className="container section">
        <div className="grid-12">
          <div style={{gridColumn:'span 8'}}>
            <div className="eyebrow">{t("Our approach","نهجنا")}</div>
            <div className="display h-2" style={{marginTop:16,maxWidth:'18ch'}}>
              {t("Substance over headline. Judgement over template.","الجوهر قبل العنوان. والاجتهاد قبل النموذج.")}
            </div>
            <div style={{marginTop:48,display:'grid',gridTemplateColumns:'1fr 1fr',gap:48,fontSize:15.5,lineHeight:1.65,color:'var(--ink-2)'}}>
              <p>{t(
                "We act for governments, multinationals, banks, family offices and the SMEs that build the UAE economy. Each instruction is staffed for the matter — not for the org chart.",
                "نمثّل الحكومات والشركات متعددة الجنسيات والبنوك والمكاتب العائلية والشركات الصغيرة والمتوسطة التي تبني الاقتصاد الإماراتي. كل تكليف يُشكَّل وفق متطلباته — لا وفق الهيكل التنظيمي."
              )}</p>
              <p>{t(
                "Our partners qualified in the UAE, England, France and beyond. We translate international standards into UAE practice, working in English and Arabic, in onshore and free-zone forums.",
                "تأهّل شركاؤنا في الإمارات وإنجلترا وفرنسا وغيرها. نُترجم المعايير الدولية إلى ممارسة إماراتية، عملاً باللغتين الإنجليزية والعربية، في المنصّات المحلّية ومنصّات المناطق الحرّة."
              )}</p>
            </div>
          </div>
          <aside style={{gridColumn:'span 4',padding:'32px',background:'var(--paper-3)',border:'1px solid var(--line)'}}>
            <div className="eyebrow">{t("What we do","ما نقوم به")}</div>
            <ul style={{listStyle:'none',marginTop:18,display:'flex',flexDirection:'column',gap:14}}>
              {capabilitiesFor(slug).map(c =>
                <li key={c} style={{display:'flex',gap:10,fontSize:14,lineHeight:1.5}}>
                  <span style={{color:'var(--gold)',marginTop:6,width:14,height:1,background:'var(--gold)',flexShrink:0}}/>
                  {c}
                </li>
              )}
            </ul>
          </aside>
        </div>
      </section>

      {relLawyers.length > 0 &&
        <section className="container section" style={{paddingBlockStart:0}}>
          <SectionHead num="·" eyebrow={t(`${p.en} team`, `فريق ${p.ar}`)}
            title={t("Lawyers on this practice.","محامو هذا التخصص.")}/>
          <div style={{display:'grid',gridTemplateColumns:`repeat(${Math.max(2,relLawyers.length)},1fr)`,gap:24}}>
            {relLawyers.map(l => <LawyerCard key={l.slug} lawyer={l} setPage={setPage} />)}
          </div>
        </section>
      }

      {relInsights.length > 0 &&
        <section style={{background:'var(--paper-2)'}}>
          <div className="container section">
            <SectionHead num="·" eyebrow={t("Related insights","مقالات ذات صلة")}
              title={t("Where the practice is heading.","إلى أين يتجه هذا التخصص.")}/>
            <div style={{display:'grid',gridTemplateColumns:`repeat(${relInsights.length},1fr)`,gap:32}}>
              {relInsights.map(i => <InsightCard key={i.slug} insight={i} setPage={setPage} />)}
            </div>
          </div>
        </section>
      }
    </div>
  );
}

function capabilitiesFor(slug) {
  const map = {
    'corporate-ma': ['Cross-border M&A', 'Domestic JVs', 'Foreign direct investment', 'Restructurings & spin-offs', 'Public M&A & take-privates', 'Governance & shareholder advice'],
    'dispute-resolution': ['Onshore UAE court litigation', 'DIFC & ADGM courts', 'Enforcement of foreign judgments', 'Regulatory investigations', 'White-collar defence', 'Class & multi-party claims'],
    'arbitration': ['DIAC, ADCCAC, DIFC-LCIA', 'ICC, LCIA, UNCITRAL', 'Investment treaty arbitration', 'Annulment & set-aside', 'Enforcement of awards', 'Expert determinations'],
    'banking-finance': ['Conventional & Islamic finance', 'Syndicated lending', 'Project & acquisition finance', 'Securitisation', 'Asset & trade finance', 'Restructuring & workouts'],
    'capital-markets': ['IPOs on ADX, DFM, Nasdaq Dubai', 'Sukuk & bond issuances', 'Rights issues & follow-ons', 'Public M&A', 'Listed-company governance', 'Regulatory submissions'],
    'commercial': ['Agency & distribution', 'Franchise & licensing', 'Supply & manufacturing', 'Outsourcing', 'Procurement', 'Strategic alliances'],
    'data-protection': ['UAE Federal PDPL compliance', 'DIFC DP Law / ADGM DPR', 'Data transfer impact assessments', 'Breach notification & response', 'Privacy by design', 'AI governance'],
    'employment-immigration': ['Workforce strategy', 'Executive separations', 'End-of-service & gratuity', 'Mobility & visas', 'WPS & wages protection', 'Disputes & labour court'],
    'engineering-construction': ['FIDIC EPC contracts', 'Delay & disruption claims', 'Adjudication', 'Construction arbitration', 'Defect & latent claims', 'Concession arrangements'],
    'intellectual-property': ['Trade mark portfolio strategy', 'Copyright & design rights', 'Patents & prosecution', 'Anti-counterfeiting & raids', 'Licensing & franchising', 'IP litigation'],
    'private-wealth': ['Succession & inheritance', 'Family governance & charters', 'Foundations (DIFC/ADGM)', 'Trusts & private structures', 'Pre-nuptial / matrimonial', 'Philanthropy'],
    'real-estate': ['Off-plan & development', 'Master-community structuring', 'Long-term leases', 'JOPs & owners associations', 'REIT formation', 'Hospitality & branded residences'],
    'regulatory-government': ['Federal & local regulators', 'Licensing strategy', 'PPP & concessions', 'Public procurement', 'Legislative drafting', 'Policy advisory'],
    'tax': ['UAE Corporate Tax', 'VAT compliance & disputes', 'Transfer pricing', 'OECD Pillar Two', 'Free-zone qualifying income', 'Tax controversy'],
  };
  return map[slug] || ['Strategic counsel', 'Transactional execution', 'Regulatory engagement', 'Disputes & enforcement', 'Cross-border coordination', 'Bilingual delivery'];
}

/* ============ PEOPLE HUB ============ */
function PeoplePage({ setPage }) {
  const t = useT();
  const [office, setOffice] = useState("All");
  const [practice, setPractice] = useState("All");

  // Render verified leaders + roster placeholders for ~120 (use 9 verified slots + 12 unconsented placeholders)
  const offices = ["All","Dubai","Abu Dhabi"];
  const practices = ["All", ...D2.practices.map(p => p.en)];

  return (
    <div className="page-enter">
      <PageHero
        eyebrow={t("People","المحامون")}
        title={
          <>{t("Counsel who know the ","محامون يعرفون ")}
            <em>{t("UAE","الإمارات")}</em>
            {t(" — and the rooms it is written in.","، والغرف التي تُكتب فيها قوانينها.")}
          </>
        }
        copy={t(
          "Ninety-plus lawyers, two offices, fourteen practices. The three founding leaders are shown below; further consented profiles are added as the client supplies verified bios.",
          "أكثر من تسعين محامياً، مكتبان، أربعة عشر تخصصاً. القيادات المؤسِّسة الثلاث معروضة أدناه؛ تُضاف الملفات الإضافية فور تزويدنا بسير معتمدة."
        )}
      />

      {/* filters */}
      <section className="container" style={{padding:'48px 0 24px'}}>
        <div style={{display:'flex',gap:24,flexWrap:'wrap',alignItems:'baseline',justifyContent:'space-between'}}>
          <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
            {offices.map(o =>
              <button key={o} onClick={() => setOffice(o)}
                style={{
                  padding:'8px 14px',
                  border:'1px solid var(--ink)',
                  background: office === o ? 'var(--ink)' : 'transparent',
                  color: office === o ? 'var(--paper)' : 'var(--ink)',
                  fontFamily:'var(--mono)',fontSize:11,letterSpacing:'.08em',textTransform:'uppercase'
                }}>{o === 'All' ? t("All offices","كل المكاتب") : (o === 'Dubai' ? t("Dubai","دبي") : t("Abu Dhabi","أبوظبي"))}</button>
            )}
          </div>
          <select value={practice} onChange={e => setPractice(e.target.value)}
            style={{padding:'10px 14px',background:'transparent',border:'1px solid var(--line)',fontFamily:'var(--mono)',fontSize:12,letterSpacing:'.06em',textTransform:'uppercase',color:'var(--ink)'}}>
            {practices.map(p => <option key={p} value={p}>{p === "All" ? "All practices" : p}</option>)}
          </select>
        </div>
      </section>

      {/* verified leaders */}
      <section className="container" style={{paddingBottom:'48px'}}>
        <div className="eyebrow" style={{marginBottom:24,color:'var(--gold)'}}>
          {t("Founding leadership · verified","القيادة المؤسِّسة · معتمد")}
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:24}}>
          {D2.lawyers.map(l => <LawyerCard key={l.slug} lawyer={l} setPage={setPage} large />)}
        </div>
      </section>

      {/* roster placeholders */}
      <section className="container section" style={{paddingBlockStart:24}}>
        <div className="eyebrow" style={{marginBottom:24}}>
          {t("Wider roster · awaiting consented bios","البقية · بانتظار سير معتمدة")}
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:16}}>
          {Array.from({length:16}).map((_,i) =>
            <div key={i} className="placeholder" style={{aspectRatio:'4/5',display:'flex',flexDirection:'column',justifyContent:'flex-end',padding:'18px 18px',alignItems:'flex-start',gap:6}}>
              <span style={{fontSize:10,color:'var(--muted)'}}>—</span>
              <span className="display" style={{fontSize:15,color:'var(--ink-2)',lineHeight:1.1,textTransform:'none',letterSpacing:0}}>
                {t("Partner / Counsel","شريك / مستشار")}
              </span>
              <span style={{fontSize:10,color:'var(--muted)',fontFamily:'var(--mono)'}}>{i % 2 === 0 ? 'DXB' : 'AUH'} · {D2.practices[i % D2.practices.length].en}</span>
            </div>
          )}
        </div>
        <p style={{marginTop:32,fontSize:13,color:'var(--muted)',fontStyle:'italic'}}>
          {t(
            "Portraits and bios for the wider roster are published as the firm supplies consented, verified detail.",
            "تُنشر الصور والسير الذاتية لبقية المحامين فور تزويدنا ببيانات معتمدة وموثّقة."
          )}
        </p>
      </section>
    </div>
  );
}

/* ============ LAWYER PROFILE ============ */
function LawyerPage({ setPage, slug }) {
  const t = useT();
  const l = D2.lawyers.find(x => x.slug === slug) || D2.lawyers[0];
  const authored = D2.insights.filter(i => i.author === l.slug);
  return (
    <div className="page-enter">
      <section className="container" style={{padding:'48px 0 64px'}}>
        <Breadcrumb setPage={setPage} crumbs={[
          {label:t("People","المحامون"), to:{name:'people'}},
          {label:t(l.name, l.ar_name)}
        ]}/>
      </section>
      <section className="container" style={{paddingBlockEnd:80}}>
        <div className="grid-12" style={{alignItems:'end',gap:'48px 24px'}}>
          <div style={{gridColumn:'span 5'}}>
            <div className="img-wrap" style={{aspectRatio:'4/5'}}>
              <img src={l.img} alt={l.name} style={{width:'100%',height:'100%',objectFit:'cover'}}/>
            </div>
          </div>
          <div style={{gridColumn:'span 7'}}>
            <div className="eyebrow" style={{color:'var(--gold)'}}>
              {t(l.role, l.ar_role)} · {l.office === 'Dubai' ? t("Dubai","دبي") : t("Abu Dhabi","أبوظبي")}
            </div>
            <h1 className="display h-1" style={{marginTop:18,textWrap:'balance'}}>
              {t(l.name, l.ar_name)}
            </h1>
            <p className="lede" style={{marginTop:28,maxWidth:'48ch'}}>{l.bio}</p>
            <div style={{display:'flex',gap:16,marginTop:36,flexWrap:'wrap'}}>
              {!l.legacyOnly &&
                <button className="btn btn-primary" onClick={() => setPage({name:'contact',scroll:'form',lawyer:l.slug})}>
                  {t("Contact this lawyer","تواصل مع المحامي")} <span className="arrow">→</span>
                </button>
              }
              {l.phone && <a href={`tel:${l.phone.replace(/\s/g,'')}`} className="btn">{l.phone} <span className="arrow">→</span></a>}
              {l.email && <a href={`mailto:${l.email}`} className="btn btn-ghost gold">{l.email} <span className="arrow">→</span></a>}
            </div>
          </div>
        </div>
      </section>

      <section className="container section" style={{paddingBlockStart:0}}>
        <div className="grid-12" style={{gap:'48px 64px'}}>
          <div style={{gridColumn:'span 7'}}>
            <div className="eyebrow">{t("Practices","التخصصات")}</div>
            <div style={{marginTop:20,display:'flex',flexWrap:'wrap',gap:10}}>
              {l.practices.map(slug => {
                const p = D2.practices.find(x => x.slug === slug);
                if (!p) return null;
                return <button key={slug} className="chip" onClick={() => setPage({name:'practice',slug,parent:'expertise'})}>
                  {t(p.en, p.ar)} <span style={{color:'var(--gold)'}}>→</span>
                </button>;
              })}
            </div>
            {l.experience && l.experience.length > 0 && <>
              <hr className="rule" style={{margin:'40px 0'}} />
              <div className="eyebrow">{t("Experience","الخبرة")}</div>
              <ul style={{listStyle:'none',marginTop:20,display:'flex',flexDirection:'column',gap:14}}>
                {l.experience.map((e,i) =>
                  <li key={i} style={{display:'grid',gridTemplateColumns:'24px 1fr',gap:18,fontSize:15.5,lineHeight:1.55}}>
                    <span className="num" style={{fontSize:11,color:'var(--muted)',marginTop:4}}>{String(i+1).padStart(2,'0')}</span>
                    <span>{e}</span>
                  </li>
                )}
              </ul>
            </>}
          </div>
          <aside style={{gridColumn:'span 5'}}>
            <div style={{padding:'32px',background:'var(--paper-3)',border:'1px solid var(--line)'}}>
              <div className="eyebrow">{t("Credentials","المؤهلات")}</div>
              <ul style={{listStyle:'none',marginTop:20,display:'flex',flexDirection:'column',gap:14}}>
                {l.credentials.map((c,i) =>
                  <li key={i} style={{display:'flex',gap:12,fontSize:15,lineHeight:1.5,paddingBottom:14,borderBottom: i < l.credentials.length-1 ? '1px solid var(--line)' : 'none'}}>
                    <span style={{color:'var(--gold)',marginTop:8,width:14,height:1,background:'var(--gold)',flexShrink:0}}/>
                    {c}
                  </li>
                )}
              </ul>
            </div>
            {!l.legacyOnly && (l.phone || l.email) &&
              <div style={{marginTop:24,padding:'28px',background:'var(--ink)',color:'var(--paper)'}}>
                <div className="eyebrow" style={{color:'rgba(244,239,229,.6)'}}>{t("Direct line","الخط المباشر")}</div>
                <div style={{marginTop:18,display:'flex',flexDirection:'column',gap:10}}>
                  {l.phone && <a href={`tel:${l.phone.replace(/\s/g,'')}`} className="num" style={{color:'var(--paper)',fontSize:18}}>{l.phone}</a>}
                  {l.email && <a href={`mailto:${l.email}`} className="num" style={{color:'var(--gold)',fontSize:14,borderBottom:'1px solid var(--gold)',alignSelf:'flex-start',paddingBottom:2}}>{l.email}</a>}
                </div>
                <button className="btn" style={{marginTop:22,borderColor:'var(--paper)',color:'var(--paper)',padding:'10px 16px',fontSize:11}}>
                  {t("Download vCard","تحميل بطاقة")} <span className="arrow">→</span>
                </button>
              </div>
            }
          </aside>
        </div>
      </section>

      {authored.length > 0 &&
        <section style={{background:'var(--paper-2)'}}>
          <div className="container section">
            <SectionHead num="·" eyebrow={t("Authored insights","مقالات بقلمه")} title={t("Recent writing.","مقالات حديثة.")}/>
            <div style={{display:'grid',gridTemplateColumns:`repeat(${Math.min(3,authored.length)},1fr)`,gap:32}}>
              {authored.slice(0,3).map(i => <InsightCard key={i.slug} insight={i} setPage={setPage} />)}
            </div>
          </div>
        </section>
      }
    </div>
  );
}

/* ============ INSIGHTS HUB ============ */
function InsightsPage({ setPage }) {
  const t = useT();
  const [topic, setTopic] = useState("All");
  const topics = ["All", ...Array.from(new Set(D2.insights.map(i => i.topic)))];
  const filtered = topic === "All" ? D2.insights : D2.insights.filter(i => i.topic === topic);
  const [hero, ...rest] = filtered;
  return (
    <div className="page-enter">
      <PageHero
        eyebrow={t("Insights","آراء قانونية")}
        title={
          <>{t("Sharp readings of the ","قراءات دقيقة لـ")}
            <em>{t("UAE legal","المنظومة القانونية الإماراتية")}</em>
            {t(" landscape.",".")}
          </>
        }
        copy={t(
          "Briefings, regulatory updates and event coverage written by our partners and authoring lawyers — and translated where it matters.",
          "نشرات، وتحديثات تنظيمية، وتغطيات فعاليات من قلم شركائنا ومحامي المكتب — وبترجمة عربية حيث يلزم."
        )}
      />
      <section className="container section">
        <div style={{display:'flex',gap:6,flexWrap:'wrap',marginBottom:48}}>
          {topics.map(tt =>
            <button key={tt} onClick={() => setTopic(tt)}
              style={{
                padding:'8px 14px',
                border:'1px solid var(--line)',
                background: topic === tt ? 'var(--ink)' : 'var(--paper-3)',
                color: topic === tt ? 'var(--paper)' : 'var(--ink-2)',
                borderColor: topic === tt ? 'var(--ink)' : 'var(--line)',
                fontFamily:'var(--mono)',fontSize:11,letterSpacing:'.06em',textTransform:'uppercase'
              }}>{tt}</button>
          )}
        </div>
        {hero && <InsightCard insight={hero} setPage={setPage} layout="wide" />}
        {rest.length > 0 && <hr className="rule" style={{margin:'64px 0 48px'}} />}
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:'48px 32px'}}>
          {rest.map(i => <InsightCard key={i.slug} insight={i} setPage={setPage} />)}
        </div>
        <div style={{marginTop:96,padding:'48px',background:'var(--ink)',color:'var(--paper)',display:'grid',gridTemplateColumns:'1.2fr 1fr',gap:48,alignItems:'center'}}>
          <div>
            <div className="eyebrow" style={{color:'rgba(244,239,229,.55)'}}>{t("Subscribe","اشترك")}</div>
            <h3 className="display h-2" style={{marginTop:14,color:'var(--paper)',maxWidth:'18ch'}}>
              {t("Get insights in your inbox before they're filed.","استلم آراءنا في بريدك قبل أن تُؤرشف.")}
            </h3>
          </div>
          <form style={{display:'flex',gap:0,borderBottom:'1px solid rgba(244,239,229,.4)'}} onSubmit={e=>{e.preventDefault();alert('Subscribed — demo');}}>
            <input type="email" placeholder={t("Your work email","بريدك المهني")} required
              style={{flex:1,background:'transparent',border:0,color:'var(--paper)',padding:'14px 0',fontSize:16,outline:'none'}} />
            <button className="btn btn-gold" type="submit" style={{padding:'12px 16px'}}>
              {t("Subscribe","اشترك")} <span className="arrow">→</span>
            </button>
          </form>
        </div>
      </section>
    </div>
  );
}

/* ============ ARTICLE ============ */
function ArticlePage({ setPage, slug }) {
  const t = useT();
  const i = D2.insights.find(x => x.slug === slug) || D2.insights[0];
  const author = D2.lawyers.find(l => l.slug === i.author);
  const related = D2.insights.filter(x => x.slug !== i.slug).slice(0,3);
  const dateFmt = new Date(i.date).toLocaleDateString(window.LOCALE === 'ar' ? 'ar-AE' : 'en-GB', { day:'numeric', month:'long', year:'numeric' });
  return (
    <div className="page-enter">
      <section className="container" style={{padding:'48px 0 0'}}>
        <Breadcrumb setPage={setPage} crumbs={[
          {label:t("Insights","آراء قانونية"), to:{name:'insights'}},
          {label:i.topic}
        ]}/>
      </section>
      <section className="container" style={{padding:'48px 0 64px',maxWidth:920,marginInline:'auto'}}>
        <div className="eyebrow" style={{color:'var(--gold)'}}>{i.topic} · {dateFmt}</div>
        <h1 className="display h-1" style={{marginTop:24,textWrap:'balance'}}>{i.title}</h1>
        <p className="lede" style={{marginTop:24}}>{i.excerpt}</p>
        {author &&
          <div style={{marginTop:32,display:'flex',alignItems:'center',gap:14,paddingBlock:'18px',borderBlock:'1px solid var(--line)'}}>
            <img src={author.img} alt="" style={{width:48,height:48,objectFit:'cover'}}/>
            <div>
              <div style={{fontFamily:'var(--display)',fontSize:18}}>{author.name}</div>
              <div style={{fontSize:12,color:'var(--muted)'}}>{author.role}</div>
            </div>
            <button onClick={() => setPage({name:'lawyer',slug:author.slug,parent:'people'})}
                    className="btn btn-ghost gold" style={{marginInlineStart:'auto'}}>
              {t("Read profile","عرض الملف")} <span className="arrow">→</span>
            </button>
          </div>
        }
      </section>
      <section className="container" style={{maxWidth:920,marginInline:'auto',paddingBlock:48}}>
        <div className="img-wrap" style={{aspectRatio:'16/9'}}>
          <img src={i.img} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
        </div>
        <div style={{marginTop:48,fontSize:17,lineHeight:1.7,color:'var(--ink-2)',display:'flex',flexDirection:'column',gap:24,maxWidth:'68ch'}}>
          <p style={{fontFamily:'var(--display)',fontSize:24,lineHeight:1.35,color:'var(--ink)'}}>
            {t(
              "This briefing summarises the firm's current view on the matter above. It is not legal advice; please contact us for advice on a specific transaction or dispute.",
              "تلخّص هذه النشرة الرأي الحالي للمكتب في الموضوع أعلاه. وهي ليست استشارة قانونية؛ يُرجى التواصل معنا للحصول على المشورة بشأن معاملة أو نزاع بعينه."
            )}
          </p>
          <p>{t(
            "Hadef & Partners has advised on the development of UAE legislation since the firm's founding in 1980. This article continues that thread — placing the new rule in the context of practitioners and the regulators we work alongside.",
            "قدّم هادف وشركاه المشورة في تطوير التشريع الإماراتي منذ تأسيس المكتب عام 1980. ويُكمل هذا المقال ذلك المسار — بوضع القاعدة الجديدة في سياق الممارسين والجهات التنظيمية التي نعمل إلى جوارها."
          )}</p>
          <p>{t(
            "We address: (i) the scope of the new framework, (ii) the practical compliance burden it imposes, and (iii) the choices businesses now have to make before the transition deadline. We provide a checklist below for in-house counsel.",
            "نتناول: (1) نطاق الإطار الجديد، (2) العبء العملي للامتثال، و(3) الخيارات التي على الشركات اتخاذها قبل الموعد النهائي للانتقال. ونُرفق قائمة تحقق أدناه للمستشارين الداخليين."
          )}</p>
          <p>{t(
            "If you would like to discuss the implications for your business, contact your usual Hadef & Partners contact or use the enquiry form below.",
            "للاستفسار عن انعكاسات ذلك على شركتك، يُرجى التواصل مع جهة الاتصال المعتادة لديكم في هادف وشركاه أو استخدام نموذج التواصل أدناه."
          )}</p>
        </div>
        <div style={{marginTop:48,padding:'28px',border:'1px solid var(--ink)',display:'grid',gridTemplateColumns:'1fr auto',gap:24,alignItems:'center'}}>
          <div>
            <div className="eyebrow">{t("Get advice","احصل على مشورة")}</div>
            <div className="display h-3" style={{marginTop:8}}>
              {t("Speak with our team about this matter.","تحدّث مع فريقنا حول هذه القضية.")}
            </div>
          </div>
          <button className="btn btn-gold" onClick={() => setPage({name:'contact',scroll:'form'})}>
            {t("Request consultation","طلب استشارة")} <span className="arrow">→</span>
          </button>
        </div>
      </section>

      <section style={{background:'var(--paper-2)'}}>
        <div className="container section">
          <SectionHead num="·" eyebrow={t("More from the firm","المزيد من المكتب")} title={t("Read next.","اقرأ التالي.")}/>
          <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:32}}>
            {related.map(r => <InsightCard key={r.slug} insight={r} setPage={setPage} />)}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ============ ABOUT ============ */
function AboutPage({ setPage, scroll }) {
  const t = useT();
  useEffect(() => {
    if (scroll === 'firsts') {
      const el = document.querySelector('#firsts');
      if (el) setTimeout(() => window.scrollTo({top:el.offsetTop - 100, behavior:'smooth'}), 50);
    }
  }, [scroll]);
  return (
    <div className="page-enter">
      <PageHero
        eyebrow={t("About","عن المكتب")}
        title={
          <>{t("A ","مكتب ")}
            <em>{t("UAE law firm","محاماة إماراتي")}</em>
            {t(", on purpose. Since 1980."," ، باختيارٍ مدروس. منذ 1980.")}
          </>
        }
        copy={t(
          "Founded by H.E. Dr. Hadef Al Dhaheri in 1980, Hadef & Partners is one of the UAE's leading independent law firms — UAE-only, by deliberate strategy, with international standards applied to every mandate.",
          "أسّسه معالي د. هادف الظاهري عام 1980، ويُعدّ هادف وشركاه أحد أبرز مكاتب المحاماة المستقلة في الإمارات — إماراتي حصراً، باختيار استراتيجي، بمعايير دولية في كل تكليف."
        )}
        img="media/about-who-we-are-1.webp"
      />

      {/* Principles */}
      <section className="section container">
        <SectionHead num="01" eyebrow={t("Principles","المبادئ")}
          title={t("Three principles. Forty-five years.","ثلاثة مبادئ. خمسة وأربعون عاماً.")}/>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:0}}>
          {D2.principles.map((p,i) =>
            <div key={p.num} style={{padding:'40px 32px 40px 0', borderInlineEnd: i<2 ? '1px solid var(--line)' : 'none', paddingInlineStart: i>0 ? 32 : 0}}>
              <div className="display" style={{fontSize:48, color:'var(--gold)', lineHeight:0.9}}>{p.num}</div>
              <div className="display h-3" style={{marginTop:24,lineHeight:1.05}}>{t(p.en, p.ar)}</div>
              <p style={{marginTop:18,fontSize:15,color:'var(--ink-2)',lineHeight:1.6, maxWidth:'30ch'}}>{p.copy}</p>
            </div>
          )}
        </div>
      </section>

      {/* Founder note */}
      <section style={{background:'var(--ink)',color:'var(--paper)'}}>
        <div className="container section">
          <div className="grid-12" style={{alignItems:'center',gap:'48px 24px'}}>
            <div style={{gridColumn:'span 5'}}>
              <div className="img-wrap" style={{aspectRatio:'4/5'}}>
                <img src="media/partner-dr-hadef-al-dhaheri.webp" alt="H.E. Dr. Hadef Al Dhaheri" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
              </div>
            </div>
            <div style={{gridColumn:'span 7'}}>
              <div className="eyebrow" style={{color:'rgba(244,239,229,.5)'}}>02 · {t("Founder","المؤسس")}</div>
              <h2 className="display h-1" style={{marginTop:18,color:'var(--paper)'}}>
                {t("H.E. Dr. Hadef Al Dhaheri","معالي د. هادف الظاهري")}
              </h2>
              <p className="lede" style={{marginTop:24,color:'rgba(244,239,229,.78)'}}>
                {t(
                  "Dr. Hadef founded the firm in 1980. He went on to serve as UAE Minister of Justice from 2008 to 2014, as President of the Supreme Judicial Council, and was Vice Chancellor of UAE University from 1994 to 2007.",
                  "أسّس د. هادف المكتب عام 1980. ثم تولّى منصب وزير العدل في دولة الإمارات بين عامَي 2008 و2014، ورأس المجلس القضائي الأعلى، وكان نائباً لرئيس جامعة الإمارات بين 1994 و2007."
                )}
              </p>
              <p className="lede" style={{marginTop:18,color:'rgba(244,239,229,.78)'}}>
                {t(
                  "The firm he founded remains independent, UAE-only, and built around the same belief: that highly specialised legal advice — to international standards — is best delivered by a firm rooted in this jurisdiction.",
                  "ما زال المكتب الذي أسّسه مستقلاً، إماراتياً حصراً، مبنياً على القناعة ذاتها: أن الاستشارات القانونية المتخصّصة بمعايير دولية تُقدَّم على نحو أفضل من مكتب متجذّر في هذه الولاية القضائية."
                )}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Firsts timeline */}
      <section id="firsts" className="section container">
        <SectionHead num="03" eyebrow={t("Legacy of firsts","سجلّ من الأوائل")}
          title={t("A record we did not invent. We attribute it.","سجلّ لم نختلقه. بل ننسبه إلى مصادره.")}
          kicker={t(
            "Every entry below is published by the firm and recorded against a matter. The pattern is the point: forty-five years of being the firm called when nothing existed yet.",
            "كل بند أدناه منشور من المكتب وموثّق ضمن قضية. النمط هو الفكرة: خمسة وأربعون عاماً ونحن المكتب الذي يُستدعى حين لا يوجد سابقة بعد."
          )}/>
        <div style={{display:'flex',flexDirection:'column'}}>
          {D2.firsts.map((f,i) =>
            <div key={f.year}
                 style={{display:'grid',gridTemplateColumns:'140px 1fr 1.2fr',gap:48,
                         paddingBlock:'40px',borderTop:'1px solid var(--ink)',alignItems:'center',
                         borderBottom: i === D2.firsts.length - 1 ? '1px solid var(--ink)' : 'none'}}>
              <div className="display num" style={{fontSize:36,color:'var(--gold)'}}>{f.year}</div>
              <div>
                <div className="display h-3" style={{lineHeight:1.1,maxWidth:'18ch'}}>{f.title}</div>
                <p style={{marginTop:14,fontSize:14.5,color:'var(--ink-2)',lineHeight:1.55,maxWidth:'46ch'}}>{f.copy}</p>
              </div>
              <div className="img-wrap" style={{aspectRatio:'16/10'}}>
                <img src={f.img} alt="" className="img-fade" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* Awards */}
      <section style={{background:'var(--paper-2)'}}>
        <div className="container section">
          <SectionHead num="04" eyebrow={t("Awards & recognition","الجوائز والتكريمات")}
            title={t("Attributed. Year by year.","موثّقة. عاماً بعد عام.")}
            actions={[
              <button key="a" className="btn btn-ghost" onClick={() => setPage({name:'awards'})}>
                {t("Full archive","الأرشيف الكامل")} <span className="arrow">→</span>
              </button>
            ]}
          />
          <div style={{display:'grid',gridTemplateColumns:'1fr',gap:0}}>
            {D2.awards.slice(0,8).map((a,i) =>
              <div key={i} style={{display:'grid',gridTemplateColumns:'80px 1fr auto',gap:32,paddingBlock:'20px',borderTop:'1px solid var(--line)',alignItems:'center'}}>
                <div className="display num" style={{fontSize:20,color:'var(--gold)'}}>{a.year}</div>
                <div style={{fontFamily:'var(--display)',fontSize:20,lineHeight:1.2}}>{a.name}</div>
                <div className="eyebrow">{a.issuer}</div>
              </div>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ============ CONTACT / OFFICES ============ */
function ContactPage({ setPage, scroll, practice, lawyer }) {
  const t = useT();
  const [form, setForm] = useState({
    name:'', email:'', phone:'', practice: practice || '', office:'Dubai', message:'', consent:false
  });
  const [submitted, setSubmitted] = useState(false);
  useEffect(() => {
    if (scroll === 'form') {
      const el = document.querySelector('#enquiry');
      if (el) setTimeout(() => window.scrollTo({top:el.offsetTop - 80, behavior:'smooth'}), 50);
    }
  }, [scroll]);
  const onSubmit = (e) => { e.preventDefault(); setSubmitted(true); };

  return (
    <div className="page-enter">
      <PageHero
        eyebrow={t("Contact","اتصل بنا")}
        title={
          <>{t("Two ","مكتبان ")}
            <em>{t("offices","")}</em>
            {t(". One firm. Direct lines."," . مكتب واحد. خطوط مباشرة.")}
          </>
        }
        copy={t(
          "Reach the right team in Dubai or Abu Dhabi. Every enquiry is reviewed by a partner within one business day.",
          "تواصل مع الفريق المناسب في دبي أو أبوظبي. تُراجَع كل استفسار من قِبل شريك خلال يوم عمل واحد."
        )}
      />

      {/* Two offices */}
      <section className="container section">
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:48}}>
          {D2.offices.map(o =>
            <div key={o.slug}>
              <div className="img-wrap" style={{aspectRatio:'5/3'}}>
                <img src={o.img} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
              </div>
              <div style={{marginTop:32,display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:24}}>
                <div>
                  <div className="eyebrow" style={{color:'var(--gold)'}}>
                    {o.slug === 'dubai' ? 'DXB · 25.197° N, 55.274° E *' : 'AUH · 24.476° N, 54.371° E *'}
                  </div>
                  <h3 className="display h-2" style={{marginTop:14}}>{t(o.city, o.ar_city)}</h3>
                  <p style={{marginTop:14,fontSize:15,color:'var(--ink-2)',lineHeight:1.6,maxWidth:'34ch'}}>
                    {t(o.address, o.ar_address)}
                  </p>
                </div>
              </div>
              <div style={{marginTop:24,display:'flex',gap:24,flexWrap:'wrap'}}>
                <a href={`tel:${o.tel}`} className="num" style={{fontSize:18,color:'var(--ink)',borderBottom:'1px solid var(--gold)',paddingBottom:4}}>{o.phone}</a>
                <a href="mailto:info@hadefpartners.com" className="num gold" style={{fontSize:14,paddingBottom:4,borderBottom:'1px solid var(--gold)'}}>info@hadefpartners.com</a>
              </div>
            </div>
          )}
        </div>
        <p style={{marginTop:24,fontSize:11,color:'var(--muted)',fontStyle:'italic'}}>
          * {t("Coordinates approximate. Final map pins to be confirmed with the firm.","الإحداثيات تقريبية. تُؤكَّد علامات الخريطة النهائية مع المكتب.")}
        </p>
      </section>

      {/* Enquiry form */}
      <section id="enquiry" style={{background:'var(--ink)',color:'var(--paper)'}}>
        <div className="container section">
          <div className="grid-12" style={{gap:'48px 64px',alignItems:'start'}}>
            <div style={{gridColumn:'span 4'}}>
              <div className="eyebrow" style={{color:'rgba(244,239,229,.55)'}}>{t("Enquiry","استفسار")}</div>
              <h2 className="display h-1" style={{marginTop:18,color:'var(--paper)'}}>
                {t("Request a ","طلب ")}
                <em style={{color:'var(--gold)',fontStyle:'italic'}}>{t("consultation","استشارة")}</em>.
              </h2>
              <p className="lede" style={{marginTop:24,color:'rgba(244,239,229,.75)'}}>
                {t(
                  "Tell us the area of law and the office closest to you. A partner with the right experience will respond within one business day.",
                  "حدّد مجال القانون والمكتب الأقرب إليك. سيردّ شريك مختصّ خلال يوم عمل واحد."
                )}
              </p>
              {lawyer &&
                <div style={{marginTop:32,padding:'18px 22px',background:'rgba(168,136,79,.1)',borderInlineStart:'2px solid var(--gold)',fontSize:13,color:'rgba(244,239,229,.85)'}}>
                  {t("Routed to: ","موجَّه إلى: ")}<strong>{D2.lawyers.find(l=>l.slug===lawyer)?.name}</strong>
                </div>
              }
            </div>
            <div style={{gridColumn:'span 8'}}>
              {!submitted ?
                <form onSubmit={onSubmit} style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'32px 24px'}}>
                  <DarkField label={t("Full name","الاسم الكامل")}>
                    <input required value={form.name} onChange={e=>setForm({...form,name:e.target.value})}/>
                  </DarkField>
                  <DarkField label={t("Email","البريد الإلكتروني")}>
                    <input type="email" required value={form.email} onChange={e=>setForm({...form,email:e.target.value})}/>
                  </DarkField>
                  <DarkField label={t("Phone","الهاتف")}>
                    <input type="tel" value={form.phone} onChange={e=>setForm({...form,phone:e.target.value})}/>
                  </DarkField>
                  <DarkField label={t("Preferred office","المكتب المفضّل")}>
                    <select value={form.office} onChange={e=>setForm({...form,office:e.target.value})}>
                      <option>Dubai</option>
                      <option>Abu Dhabi</option>
                      <option>{t("Either","أيٌّ منهما")}</option>
                    </select>
                  </DarkField>
                  <DarkField label={t("Area of law","مجال القانون")} colspan={2}>
                    <select value={form.practice} onChange={e=>setForm({...form,practice:e.target.value})}>
                      <option value="">{t("Select an area —","اختر مجالاً —")}</option>
                      {D2.practices.map(p => <option key={p.slug} value={p.slug}>{p.en}</option>)}
                      <option value="other">{t("Other","غير ذلك")}</option>
                    </select>
                  </DarkField>
                  <DarkField label={t("How can we help?","كيف يمكننا المساعدة؟")} colspan={2}>
                    <textarea rows={4} required value={form.message} onChange={e=>setForm({...form,message:e.target.value})}/>
                  </DarkField>
                  <div style={{gridColumn:'span 2', display:'flex',justifyContent:'space-between',gap:24,alignItems:'center',flexWrap:'wrap',paddingTop:16}}>
                    <label style={{display:'flex',gap:10,fontSize:12,color:'rgba(244,239,229,.7)',maxWidth:'40ch',lineHeight:1.4}}>
                      <input type="checkbox" required checked={form.consent} onChange={e=>setForm({...form,consent:e.target.checked})}/>
                      {t("I agree that my information will be used to respond to my enquiry, in line with the firm's privacy notice.","أوافق على استخدام بياناتي للردّ على استفساري، وفقاً لإشعار الخصوصية الخاص بالمكتب.")}
                    </label>
                    <button type="submit" className="btn btn-gold">
                      {t("Send enquiry","أرسل الاستفسار")} <span className="arrow">→</span>
                    </button>
                  </div>
                </form>
                :
                <div style={{padding:'48px',border:'1px solid var(--gold)',background:'rgba(168,136,79,.06)'}}>
                  <div className="display num" style={{fontSize:14,color:'var(--gold)',letterSpacing:'.1em'}}>✓ {t("RECEIVED","تم الاستلام")}</div>
                  <h3 className="display h-2" style={{marginTop:14,color:'var(--paper)'}}>
                    {t("Thank you, ","شكراً لك، ")} {form.name || t("colleague","زميلنا")}.
                  </h3>
                  <p className="lede" style={{marginTop:18,color:'rgba(244,239,229,.75)'}}>
                    {t("A partner will be in touch within one business day. We have logged your enquiry against","سيتواصل معك شريك خلال يوم عمل واحد. سجّلنا استفسارك تحت")} <em style={{color:'var(--gold)'}}>{form.practice || 'general'}</em> {t("for","لـ")} <em style={{color:'var(--gold)'}}>{form.office}</em>.
                  </p>
                </div>
              }
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function DarkField({label, children, colspan}) {
  return (
    <div className="field" style={{gridColumn: colspan ? `span ${colspan}` : 'auto'}}>
      <label style={{color:'rgba(244,239,229,.55)'}}>{label}</label>
      {React.Children.map(children, c => React.cloneElement(c, {
        style:{
          background:'transparent',border:0,borderBottom:'1px solid rgba(244,239,229,.3)',
          padding:'10px 0',fontSize:15,color:'var(--paper)',width:'100%',outline:'none',
          ...(c.props.style||{})
        },
        onFocus: (e) => { e.target.style.borderBottomColor = 'var(--gold)'; },
        onBlur: (e) => { e.target.style.borderBottomColor = 'rgba(244,239,229,.3)'; },
      }))}
    </div>
  );
}

/* ============ AWARDS ARCHIVE ============ */
function AwardsPage({ setPage }) {
  const t = useT();
  const grouped = D2.awards.reduce((a, x) => { (a[x.year] = a[x.year] || []).push(x); return a; }, {});
  const years = Object.keys(grouped).sort((a,b) => b-a);
  return (
    <div className="page-enter">
      <PageHero
        eyebrow={t("Awards & recognition","الجوائز والتكريمات")}
        title={
          <>{t("Independent ","تقييمات ")}
            <em>{t("rankings","مستقلّة")}</em>
            {t(" and attributed awards."," وجوائز موثّقة.")}
          </>
        }
        copy={t(
          "Recognition matters when it is independent and named. Below is a year-by-year record of awards conferred on the firm — by name, by year and by issuing body — with no badges and no embellishment.",
          "التقدير يكتسب قيمته حين يكون مستقلاً ومذكور المصدر. أدناه سجل سنوي بالجوائز التي مُنحت للمكتب — بالاسم، والسنة، والجهة المانحة — دون شارات أو زخرفة."
        )}
      />
      <section className="container section">
        {years.map(y =>
          <div key={y} style={{marginBottom:48}}>
            <div style={{display:'grid',gridTemplateColumns:'140px 1fr',gap:48,alignItems:'start'}}>
              <div className="display num" style={{fontSize:54,color:'var(--gold)',position:'sticky',top:100}}>{y}</div>
              <div>
                {grouped[y].map((a,i) =>
                  <div key={i} style={{paddingBlock:'18px',borderBottom:'1px solid var(--line)',display:'grid',gridTemplateColumns:'1fr auto',gap:24}}>
                    <div style={{fontFamily:'var(--display)',fontSize:22,lineHeight:1.25}}>{a.name}</div>
                    <div className="eyebrow" style={{whiteSpace:'nowrap'}}>{a.issuer}</div>
                  </div>
                )}
              </div>
            </div>
          </div>
        )}
        <p style={{marginTop:24,fontSize:12,color:'var(--muted)',fontStyle:'italic'}}>
          {t("Award marks omitted pending usage-rights confirmation. Each entry is verifiable against the issuing body's archive.","تُحجب شارات الجوائز إلى حين تأكيد حقوق الاستخدام. كل بند قابل للتحقّق من أرشيف الجهة المانحة.")}
        </p>
      </section>
    </div>
  );
}

/* ============ CAREERS ============ */
function CareersPage({ setPage }) {
  const t = useT();
  return (
    <div className="page-enter">
      <PageHero
        eyebrow={t("Careers","الوظائف")}
        title={<>{t("Join a firm with a ","انضمّ إلى مكتب يمتلك ")}<em>{t("record","سجلّاً")}</em>{t(" worth working on."," يستحق أن تشتغل عليه.")}</>}
        copy={t(
          "We hire across our practices in both UAE offices, from trainee to senior partner. We back curious, precise lawyers who want to work on the matters that shape this jurisdiction.",
          "نُوظّف عبر جميع تخصصاتنا في كلا مكتبَينا، من المتدرّب إلى الشريك الأقدم. ندعم المحامين الفضوليين الدقيقين الراغبين في العمل على القضايا التي تُشكّل هذه الولاية القضائية."
        )}
        img="media/careers-1.webp"
      />
      <section className="container section">
        <div className="grid-12">
          <div style={{gridColumn:'span 7'}}>
            <div className="eyebrow">{t("Open roles","شواغر مفتوحة")}</div>
            <div style={{marginTop:24}}>
              {[
                {role:"Senior Associate — Corporate / M&A", office:"Dubai", years:"6–9 PQE"},
                {role:"Associate — Dispute Resolution",     office:"Abu Dhabi", years:"3–5 PQE"},
                {role:"Counsel — Banking & Finance",        office:"Dubai", years:"8+ PQE"},
                {role:"Associate — Intellectual Property",  office:"Dubai", years:"2–4 PQE"},
                {role:"Senior Associate — Tax",             office:"Dubai", years:"5–8 PQE"},
              ].map((r,i) =>
                <div key={i} style={{display:'grid',gridTemplateColumns:'1fr auto auto',gap:24,paddingBlock:'22px',borderTop:'1px solid var(--line)',alignItems:'center'}}>
                  <div className="display h-3" style={{fontSize:22,lineHeight:1.15}}>{r.role}</div>
                  <div className="eyebrow">{r.office} · {r.years}</div>
                  <button className="btn btn-ghost gold">{t("Apply","قدّم")} →</button>
                </div>
              )}
            </div>
          </div>
          <aside style={{gridColumn:'span 5'}}>
            <div className="img-wrap" style={{aspectRatio:'4/5'}}>
              <img src="media/careers-1.webp" alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
            </div>
          </aside>
        </div>
      </section>
    </div>
  );
}

/* ============ Shared: PAGE HERO ============ */
function PageHero({eyebrow, title, copy, img}) {
  return (
    <section style={{borderBottom:'1px solid var(--ink)'}}>
      <div className="container" style={{paddingBlock:'80px 80px'}}>
        <div className="grid-12" style={{alignItems:'end'}}>
          <div style={{gridColumn: img ? 'span 7' : 'span 9'}}>
            <div className="eyebrow" style={{color:'var(--gold)'}}>{eyebrow}</div>
            <h1 className="display h-1" style={{marginTop:20,textWrap:'balance'}}>{title}</h1>
            {copy && <p className="lede" style={{marginTop:28, maxWidth:'52ch'}}>{copy}</p>}
          </div>
          {img &&
            <div style={{gridColumn:'span 5'}}>
              <div className="img-wrap" style={{aspectRatio:'4/3'}}>
                <img src={img} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
              </div>
            </div>
          }
        </div>
      </div>
    </section>
  );
}

/* ============ Breadcrumb ============ */
function Breadcrumb({crumbs, setPage}) {
  const t = useT();
  return (
    <div style={{display:'flex',gap:14,alignItems:'center',fontFamily:'var(--mono)',fontSize:11,letterSpacing:'.06em',textTransform:'uppercase',color:'var(--muted)'}}>
      <button onClick={() => setPage({name:'home'})} className="gold">{t("Home","الرئيسية")}</button>
      {crumbs.map((c,i) =>
        <React.Fragment key={i}>
          <span style={{opacity:.4}}>/</span>
          {c.to ? <button onClick={() => setPage(c.to)} style={{color:'var(--ink-2)'}}>{c.label}</button> :
                  <span style={{color:'var(--ink)'}}>{c.label}</span>}
        </React.Fragment>
      )}
    </div>
  );
}

Object.assign(window, {
  HomePage, ExpertisePage, PracticePage, PeoplePage, LawyerPage,
  InsightsPage, ArticlePage, AboutPage, ContactPage, AwardsPage, CareersPage,
  PageHero, Breadcrumb, DarkField,
});