/* Hadef & Partners — shared components */

const { useState, useEffect, useRef, useMemo, useCallback } = React;
const D = window.DATA;
const useT = () => {
  const [, force] = useState(0);
  useEffect(() => {
    const f = () => force(n => n + 1);
    window.addEventListener("locale-change", f);
    return () => window.removeEventListener("locale-change", f);
  }, []);
  return (en, ar) => (window.LOCALE === "ar" ? ar : en);
};

/* === LOGO (inline SVG so we can recolor with currentColor) === */
function Logo({ light = false }) {
  // simplified mark using firm's exact logo paths, retinted via CSS var
  return (
    <span className="logo" aria-label="Hadef & Partners">
      <svg width="158" height="64" viewBox="0 0 158 64" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M18.7721 27.7442H21.1234C21.6912 27.7442 21.9748 27.4202 21.9748 26.8118V16.2818H6.56826V26.8118C6.56826 27.4202 6.81133 27.7442 7.41969 27.7442H9.73068V29.5283H0V27.7442H2.31122C2.91912 27.7442 3.16245 27.4202 3.16245 26.8118V2.71659C3.16245 2.10863 2.91912 1.78386 2.31122 1.78386H0V-0.000135422H9.73068V1.78386H7.41969C6.81133 1.78386 6.56826 2.10863 6.56826 2.71659V14.3647H21.9748V2.71659C21.9748 2.10863 21.6912 1.78386 21.1234 1.78386H18.7721V-0.000135422H28.543V1.78386H26.1916C25.6239 1.78386 25.3806 2.10863 25.3806 2.71659V26.8118C25.3806 27.4202 25.6239 27.7442 26.1916 27.7442H28.543V29.5283H18.7721V27.7442Z" />
        <path d="M42.2312 20.8118H39.4742C35.7846 20.8118 34.4467 22.028 34.4467 24.339C34.4467 26.4878 35.7035 27.6638 38.0147 27.6638C39.9607 27.6638 41.6228 26.4067 42.2312 25.4743V20.8118ZM32.541 10.9187C33.6763 10.1891 36.0685 9.74293 38.7442 9.74293C43.6908 9.74293 45.3936 11.527 45.3936 15.3787V26.4878C45.3936 27.5421 45.7586 27.7447 46.691 27.7447H48.1506V29.5288C46.9216 29.5288 45.9613 29.5041 44.7853 29.5041C42.2312 29.5041 42.4338 29.741 42.4338 27.5826V27.4611H42.2717C41.2581 28.5962 39.5552 29.9341 36.7982 29.9341C33.1086 29.9341 31.1626 27.6231 31.1626 24.6633C31.1626 20.8927 33.7979 19.0276 39.0687 19.0276H42.2312V16.1084C42.2312 13.1487 41.0554 12.0541 37.6497 12.0541C35.5413 12.0541 33.7979 12.4594 32.8248 12.9866L32.541 13.1435V10.9187Z" />
        <path d="M63.3802 12.1759C62.8531 11.9325 62.0828 11.7297 60.8663 11.7297C55.6767 11.7297 53.1631 14.7299 53.1631 20.0412C53.1631 25.1904 55.3524 27.5826 58.9204 27.5826C61.15 27.5826 62.6907 26.3661 63.3802 25.4743V12.1759ZM63.3802 27.5017H63.2178C62.3261 28.6774 60.5825 29.9341 57.7849 29.9341C52.6766 29.9341 49.7573 26.204 49.7573 20.3656C49.7573 14.0813 53.7712 9.74293 60.2178 9.74293C61.7175 9.74293 62.8126 9.94555 63.3802 10.1486V2.71634C63.3802 2.10893 63.1369 1.78417 62.5289 1.78417H60.623V0.000167847H65.6912C66.2992 0.000167847 66.5425 0.324385 66.5425 0.932905V26.8123C66.5425 27.4207 66.7858 27.7447 67.3943 27.7447H69.2997V29.5288H64.2314C63.6235 29.5288 63.3802 29.2045 63.3802 28.5962V27.5017Z" />
        <path d="M83.1878 17.406C83.8767 17.406 84.161 17.0817 84.161 16.3114C84.161 13.6761 82.7821 11.6889 79.9035 11.6889C76.6193 11.6889 74.9168 14.0813 74.5926 17.406H83.1878ZM74.4706 19.5546C74.4706 25.2309 76.903 27.5826 81.6471 27.5826C83.512 27.5826 85.2799 27.2315 86.2936 26.7045L86.6743 26.5264V28.7179C85.7017 29.2855 83.4311 29.9341 80.593 29.9341C74.2678 29.9341 71.1055 26.1635 71.1055 19.9603C71.1055 13.9192 74.633 9.74293 80.0659 9.74293C85.0122 9.74293 87.4446 12.9866 87.4446 16.9598C87.4446 17.6898 87.4685 17.7892 87.4685 19.3119H74.4706V19.5546Z" />
        <path d="M90.0467 27.7447H91.9527C92.5202 27.7447 92.8039 27.4207 92.8039 26.8123V11.7874H89.6416V10.0033H91.9527C92.5202 10.0033 92.8039 9.71713 92.8039 9.12634V7.49802C92.8039 2.67364 95.3987 0.000131607 99.7371 0.000131607C100.71 0.000131607 101.602 0.121504 102.21 0.283886V2.64537C102.21 2.64537 100.264 2.24025 98.9667 2.24025C96.6557 2.24025 95.9662 3.29435 95.9662 6.21337V10.0033H100.791V11.7874H95.9662V26.8123C95.9662 27.4207 96.2095 27.7447 96.818 27.7447H99.2909V29.5288H90.0467V27.7447Z" />
        <path d="M40.2743 50.1694C46.0071 50.1694 48.6214 46.9572 48.6214 43.3849C48.6214 38.985 45.7683 36.1869 39.9123 36.1869H30.5752V37.4882H33.4911C33.8149 37.4882 34.0024 37.585 34.0024 38.0783V61.7734C34.0024 62.2665 33.8149 62.3631 33.4911 62.3631H30.5752V63.625H39.6766V62.3631H36.4455C36.0339 62.3631 35.895 62.2146 35.895 61.7734V37.5274H39.5577C44.5025 37.5274 46.9214 39.4046 46.9214 43.4358C46.9214 46.7593 44.2326 48.722 40.2098 48.722H37.8209V50.1694H40.2743Z" />
        <path d="M60.6589 60.1238C59.7528 61.2811 58.0369 62.5015 55.8927 62.5015C53.2131 62.5015 51.7968 61.1941 51.7968 58.7201C51.7968 56.0969 53.5749 54.8214 57.2322 54.8214H60.6589V60.1238ZM63.4565 62.3629C62.6823 62.3629 62.4723 62.2503 62.4723 61.4578V49.5022C62.4723 45.9053 60.6617 44.3013 56.6021 44.3013C56.1698 44.3013 53.0969 44.2964 51.2437 45.3937V46.8057C52.8683 45.991 55.7381 45.8393 56.208 45.8393C59.4939 45.8393 60.6589 46.8804 60.6589 49.8175V53.5196H57.0748C52.3837 53.5196 49.9043 55.3723 49.9043 58.8779C49.9043 62.0852 51.9958 64 55.4992 64C58.1023 64 59.8165 62.6831 60.6982 61.7594C60.6982 63.6454 61.2934 63.6248 62.7471 63.6248C63.6571 63.6248 65.4666 63.6248 65.4666 63.6248V62.3629H63.4565Z" />
        <path d="M77.4812 44.3015C75.1662 44.3015 73.3224 45.5806 72.4395 46.916V45.5632C72.4395 45.1408 72.3453 44.6564 71.6115 44.6564H67.6323V45.9579H70.1146C70.5114 45.9579 70.6262 46.0901 70.6262 46.5478V61.7734C70.6262 62.231 70.5114 62.3631 70.1146 62.3631H67.6323V63.625H75.552V62.3631H72.9904C72.5786 62.3631 72.4395 62.2146 72.4395 61.7734V48.6044C73.5668 46.9219 75.3874 45.9579 77.4424 45.9579C78.0808 45.9579 79.1333 46.0815 79.5306 46.2055V44.5299C79.4857 44.52 78.5929 44.3015 77.4812 44.3015Z" />
        <path d="M141.504 44.3015C139.189 44.3015 137.345 45.5806 136.463 46.916V45.5632C136.463 45.1408 136.368 44.6564 135.635 44.6564H131.655V45.9579H134.138C134.534 45.9579 134.649 46.0901 134.649 46.5478V61.7734C134.649 62.231 134.534 62.3631 134.138 62.3631H131.655V63.625H139.574V62.3631H137.013C136.601 62.3631 136.463 62.2146 136.463 61.7734V48.6044C137.59 46.9219 139.41 45.9579 141.465 45.9579C142.104 45.9579 143.156 46.0815 143.553 46.2055V44.5299C143.508 44.52 142.615 44.3015 141.504 44.3015Z" />
        <path d="M89.0523 62.5407C87.0167 62.5407 86.2951 61.7676 86.2951 59.5869V45.9579H90.6285V44.6562H86.2951V40.244H84.9573L84.9545 40.3989C84.9168 42.2096 84.8071 43.3674 84.3532 43.935C83.9076 44.5666 83.094 44.7395 81.606 44.9095V45.9579H84.4817V59.6261C84.4817 62.6511 85.7697 64 88.6583 64C90.0161 64 91.0048 63.6603 91.2758 63.5566L91.3772 63.5172V62.1129C90.7631 62.3921 89.6852 62.5407 89.0523 62.5407Z" />
        <path d="M110.219 61.7734V49.7391C110.219 46.1817 108.312 44.3015 104.703 44.3015C102.531 44.3015 100.279 45.2041 98.6373 46.7249V45.5632C98.6373 45.1408 98.5431 44.6564 97.8094 44.6564H93.8296V45.9579H96.3124C96.7093 45.9579 96.8234 46.0901 96.8234 46.5478V61.7734C96.8234 62.231 96.7093 62.3631 96.3124 62.3631H93.8296V63.625H101.671V62.3631H99.1882C98.7759 62.3631 98.6373 62.2146 98.6373 61.7734V48.2293C100.156 46.7349 102.205 45.8788 104.27 45.8788C107.13 45.8788 108.405 47.1668 108.405 50.054V61.7734C108.405 62.2146 108.266 62.3631 107.855 62.3631H105.372V63.625H113.213V62.3631H110.73C110.334 62.3631 110.219 62.231 110.219 61.7734Z" />
        <path d="M116.233 52.1804C116.733 47.9879 118.904 45.8466 122.359 45.8466C125.445 45.8466 127.361 47.9158 127.361 51.5112C127.361 52.0707 127.145 52.1804 126.771 52.1804H116.233ZM122.438 44.3013C117.537 44.3013 114.244 48.2434 114.244 54.1113C114.244 60.4879 117.378 64 123.068 64C124.795 64 127.34 63.6569 128.742 62.7043V61.3593C128.742 61.3593 126.588 62.4958 123.62 62.4621C118.514 62.4045 116.136 59.6832 116.136 53.717V53.4423H129.199C129.199 52.7786 130.048 44.3013 122.438 44.3013Z" />
        <path d="M146.305 58.2473H144.885V62.1079C144.885 62.6112 145.081 62.9147 145.566 63.1576C145.981 63.3549 147.545 64 150.243 64C154.6 64 157.098 61.9893 157.098 58.4839C157.098 54.7917 153.979 53.8281 151.474 53.0544C149.18 52.3157 147.014 51.6178 147.014 48.9903C147.014 46.9499 148.704 45.6823 151.425 45.6823C153.133 45.6823 154.275 45.9581 154.823 46.5067C155.256 46.9057 155.324 47.6727 155.324 48.4375H156.744V46.1934C156.744 45.6707 156.518 45.326 156.065 45.1457C155.438 44.832 153.789 44.3013 151.583 44.3013C147.694 44.3013 145.279 46.1584 145.279 49.1481C145.279 52.966 148.398 53.9469 150.907 54.7361C153.235 55.4303 155.324 56.2538 155.324 58.6813C155.324 61.2943 153.628 62.6201 150.283 62.6201C147.87 62.6201 147.1 62.1289 146.737 61.7661C146.426 61.4208 146.305 60.9579 146.305 59.9337V58.2473Z" />
        <path className="accent" d="M24.9673 50.1694V48.722H16.561V50.1694H24.9673Z" />
        <path d="M9.2103 62.5801C4.64736 62.5801 1.9233 60.2385 1.9233 56.3175C1.9233 53.7086 3.45343 51.3653 6.4719 49.3514L16.323 59.1247C14.4677 61.322 11.8832 62.5801 9.2103 62.5801ZM25.0466 62.3629C22.9559 62.3629 21.4115 61.7145 20.0359 60.3007L18.3971 58.6991C19.9658 56.3363 20.6521 53.0143 20.7798 51.6548H19.4393C18.9773 55.1515 17.7847 57.0048 17.3745 57.6792L6.88002 47.1841C4.89156 45.1963 3.81432 43.74 3.81432 41.7423C3.81432 38.6894 6.615 37.6063 9.01328 37.6063C10.9153 37.6063 12.2537 37.9184 12.8802 38.5057C13.2415 38.8666 13.4248 39.2957 13.4248 40.324H14.8444V38.157C14.8444 37.5082 14.5746 37.2729 14.0903 37.0715C13.4697 36.7429 11.7267 36.1868 9.13149 36.1868C3.84484 36.1868 1.96118 39.1375 1.96118 41.8992C1.96118 45.0105 4.71469 47.4058 5.54321 48.3978C3.411 49.6906 0.0307617 52.3746 0.0307617 56.3963C0.0307617 61.0865 3.44261 64 8.93469 64C12.1712 64 15.1474 62.629 17.3338 60.1344L18.3952 61.1963C20.0195 62.8206 21.3907 63.6248 24.377 63.6248H25.2048V62.3629H25.0466Z" />
      </svg>
    </span>
  );
}

/* === NAVBAR === */
function Navbar({ page, setPage, lang, setLang }) {
  const t = useT();
  const links = [
    { id: "home", en: "Home", ar: "الرئيسية", hidden: true },
    { id: "expertise", en: "Expertise", ar: "الخبرات" },
    { id: "people", en: "People", ar: "المحامون" },
    { id: "insights", en: "Insights", ar: "آراء قانونية" },
    { id: "about", en: "About", ar: "عن المكتب" },
    { id: "contact", en: "Contact", ar: "اتصل بنا" },
  ];
  return (
    <header className="navbar">
      <div className="container navbar-inner">
        <button onClick={() => setPage({ name: "home" })} aria-label="Hadef & Partners — Home"
                style={{display:'flex',alignItems:'center'}}>
          <Logo />
        </button>
        <nav className="nav-links">
          {links.filter(l => !l.hidden).map(l => (
            <button key={l.id}
                    className={page.name === l.id || page.parent === l.id ? "active" : ""}
                    onClick={() => setPage({ name: l.id })}>
              {t(l.en, l.ar)}
            </button>
          ))}
        </nav>
        <div className="nav-right">
          <div className="lang-toggle" role="group" aria-label="Language">
            <button onClick={() => setLang("en")} className={lang === "en" ? "active" : ""}>EN</button>
            <button onClick={() => setLang("ar")} className={lang === "ar" ? "active" : ""}>ع</button>
          </div>
          <button className="btn btn-primary" onClick={() => setPage({ name: "contact", scroll: "form" })}>
            {t("Request consultation", "طلب استشارة")}
            <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </header>
  );
}

/* === FOOTER === */
function Footer({ setPage }) {
  const t = useT();
  return (
    <footer className="footer">
      <div className="container">
        <div className="grid-12" style={{rowGap:64}}>
          <div style={{gridColumn:"span 4"}}>
            <div style={{filter:"invert(1)",mixBlendMode:"luminosity"}}>
              <Logo light />
            </div>
            <div className="display h-3" style={{marginTop:32, lineHeight:1.15, maxWidth:'22ch'}}>
              {t("Where Legacy meets ", "حيث يلتقي الإرث ")}
              <em>{t("Vision.", "بالرؤية.")}</em>
            </div>
            <p className="lede" style={{color:'rgba(244,239,229,.7)', marginTop:24, fontSize:14}}>
              {t(D.brand.purpose.en, D.brand.purpose.ar)}
            </p>
          </div>
          <div style={{gridColumn:"span 2"}}>
            <div className="eyebrow" style={{color:'rgba(244,239,229,.5)'}}>{t("Expertise","الخبرات")}</div>
            <ul style={{listStyle:'none', marginTop:18, display:'flex',flexDirection:'column',gap:8, fontSize:14}}>
              {D.practices.slice(0,8).map(p =>
                <li key={p.slug}>
                  <button onClick={() => setPage({name:'practice', slug:p.slug, parent:'expertise'})}
                          style={{color:'rgba(244,239,229,.85)'}}>
                    {t(p.en, p.ar)}
                  </button>
                </li>
              )}
              <li>
                <button onClick={() => setPage({name:'expertise'})} className="gold" style={{fontFamily:'var(--mono)',fontSize:11,letterSpacing:'.1em',textTransform:'uppercase',marginTop:8}}>
                  {t("All 14 practices →","جميع التخصصات الـ 14 →")}
                </button>
              </li>
            </ul>
          </div>
          <div style={{gridColumn:"span 2"}}>
            <div className="eyebrow" style={{color:'rgba(244,239,229,.5)'}}>{t("Firm","المكتب")}</div>
            <ul style={{listStyle:'none', marginTop:18, display:'flex',flexDirection:'column',gap:8, fontSize:14}}>
              <li><button onClick={() => setPage({name:'about'})} style={{color:'rgba(244,239,229,.85)'}}>{t("About","عن المكتب")}</button></li>
              <li><button onClick={() => setPage({name:'people'})} style={{color:'rgba(244,239,229,.85)'}}>{t("People","المحامون")}</button></li>
              <li><button onClick={() => setPage({name:'insights'})} style={{color:'rgba(244,239,229,.85)'}}>{t("Insights","آراء قانونية")}</button></li>
              <li><button onClick={() => setPage({name:'awards'})} style={{color:'rgba(244,239,229,.85)'}}>{t("Awards","الجوائز")}</button></li>
              <li><button onClick={() => setPage({name:'careers'})} style={{color:'rgba(244,239,229,.85)'}}>{t("Careers","الوظائف")}</button></li>
            </ul>
          </div>
          <div style={{gridColumn:"span 4"}}>
            <div className="eyebrow" style={{color:'rgba(244,239,229,.5)'}}>{t("Two UAE offices","مكتبان في الإمارات")}</div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:24, marginTop:18, fontSize:14}}>
              {D.offices.map(o =>
                <div key={o.slug}>
                  <div className="display h-3" style={{fontSize:22, color:'var(--paper)'}}>{t(o.city, o.ar_city)}</div>
                  <div style={{color:'rgba(244,239,229,.7)',marginTop:8,lineHeight:1.5}}>{t(o.address, o.ar_address)}</div>
                  <a href={`tel:${o.tel}`} className="num" style={{color:'var(--gold)',marginTop:8,display:'inline-block'}}>{o.phone}</a>
                </div>
              )}
            </div>
            <a href="mailto:info@hadefpartners.com" className="num" style={{display:'inline-block',marginTop:24,color:'var(--gold)',borderBottom:'1px solid var(--gold)'}}>
              info@hadefpartners.com
            </a>
          </div>
        </div>
        <hr className="rule" style={{marginTop:72,marginBottom:24}} />
        <div style={{display:'flex',justifyContent:'space-between',gap:24,flexWrap:'wrap',fontSize:12,color:'rgba(244,239,229,.55)',fontFamily:'var(--mono)',letterSpacing:'.06em'}}>
          <div>© 1980—2026 Hadef &amp; Partners LLC · UAE</div>
          <div style={{display:'flex',gap:24}}>
            <a href="https://www.linkedin.com/company/hadefpartners/" target="_blank" rel="noopener">LinkedIn</a>
            <button>Privacy</button>
            <button>Disclaimer</button>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* === RANKINGS STRIP === */
function RankingsStrip({ inverted = false }) {
  const t = useT();
  return (
    <section style={{
      padding: '28px 0',
      borderTop: '1px solid var(--line)',
      borderBottom: '1px solid var(--line)',
      background: inverted ? 'var(--ink)' : 'transparent',
      color: inverted ? 'var(--paper)' : 'inherit',
    }}>
      <div className="container" style={{display:'grid',gridTemplateColumns:'auto 1fr',gap:48,alignItems:'center'}}>
        <div className="eyebrow" style={{color: inverted ? 'rgba(244,239,229,.5)' : 'var(--muted)', whiteSpace:'nowrap'}}>
          {t("Ranked by", "تصنيفنا لدى")}
        </div>
        <div style={{display:'flex',gap:'40px 56px',flexWrap:'wrap',alignItems:'baseline'}}>
          {D.rankings.map((r,i) =>
            <div key={i} style={{display:'flex',flexDirection:'column',gap:4}}>
              <div className="display" style={{fontSize:22,lineHeight:1}}>{r.issuer}</div>
              <div style={{fontFamily:'var(--mono)',fontSize:11,letterSpacing:'.08em',color: inverted ? 'rgba(244,239,229,.6)' : 'var(--muted)',textTransform:'uppercase'}}>
                {r.band} · {r.area} · {r.year}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* === Section Header === */
function SectionHead({ num, eyebrow, title, kicker, actions }) {
  return (
    <div style={{display:'grid',gridTemplateColumns:'auto 1fr auto',gap:48,alignItems:'end',marginBottom:64,paddingBottom:24,borderBottom:'1px solid var(--ink)'}}>
      <div className="display num" style={{fontSize:18,letterSpacing:'.04em',color:'var(--gold)'}}>{num}</div>
      <div>
        <div className="eyebrow" style={{marginBottom:18}}>{eyebrow}</div>
        <h2 className="display h-1" style={{maxWidth:'14ch'}}>{title}</h2>
        {kicker && <p className="lede" style={{marginTop:18,maxWidth:'42ch'}}>{kicker}</p>}
      </div>
      {actions && <div style={{display:'flex',gap:12}}>{actions}</div>}
    </div>
  );
}

/* === Practice Card === */
function PracticeCard({ practice, setPage, idx }) {
  const t = useT();
  return (
    <button onClick={() => setPage({name:'practice', slug:practice.slug, parent:'expertise'})}
            className="card-link"
            style={{
              textAlign:'start',
              padding:'28px 24px 28px',
              borderTop:'1px solid var(--line)',
              display:'grid',
              gridTemplateColumns:'48px 1fr auto',
              gap:24, alignItems:'start',
              width:'100%',
              cursor:'pointer'
            }}>
      <span className="num" style={{fontSize:11,color:'var(--muted)',marginTop:6}}>{String(idx+1).padStart(2,'0')}</span>
      <div>
        <div className="display h-3" style={{lineHeight:1.05}}>{t(practice.en, practice.ar)}</div>
        <div style={{fontSize:13,color:'var(--muted)',marginTop:8,maxWidth:'52ch',lineHeight:1.5}}>{practice.blurb}</div>
        {practice.band &&
          <div style={{marginTop:12,display:'inline-flex',alignItems:'center',gap:8,fontFamily:'var(--mono)',fontSize:11,color:'var(--gold)',letterSpacing:'.06em',textTransform:'uppercase'}}>
            <span style={{width:18,height:1,background:'var(--gold)'}}></span>{practice.band}
          </div>
        }
      </div>
      <span style={{color:'var(--ink)',fontSize:16,marginTop:8}}>→</span>
    </button>
  );
}

/* === Lawyer Card === */
function LawyerCard({ lawyer, setPage, large = false }) {
  const t = useT();
  return (
    <button onClick={() => setPage({name:'lawyer', slug:lawyer.slug, parent:'people'})}
            className="card-link"
            style={{textAlign:'start',width:'100%',cursor:'pointer'}}>
      <div className="img-wrap" style={{aspectRatio: large ? '4/5' : '3/4', background:'var(--paper-2)'}}>
        <img src={lawyer.img} alt={lawyer.name} className="img-fade"
             style={{width:'100%',height:'100%',objectFit:'cover'}}/>
      </div>
      <div style={{marginTop:16,display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:16}}>
        <div>
          <div className="display" style={{fontSize: large ? 30 : 22, lineHeight:1.1}}>
            {t(lawyer.name, lawyer.ar_name)}
          </div>
          <div style={{fontSize:12,color:'var(--muted)',marginTop:6,letterSpacing:'.02em'}}>
            {t(lawyer.role, lawyer.ar_role)} · {t(lawyer.office, lawyer.office === 'Dubai' ? 'دبي' : 'أبوظبي')}
          </div>
        </div>
        <span style={{marginTop:8}}>→</span>
      </div>
    </button>
  );
}

/* === Insight Card === */
function InsightCard({ insight, setPage, layout = "default" }) {
  const t = useT();
  const author = D.lawyers.find(l => l.slug === insight.author);
  const dateFmt = new Date(insight.date).toLocaleDateString(window.LOCALE === 'ar' ? 'ar-AE' : 'en-GB',
    { day:'numeric', month:'long', year:'numeric' });
  if (layout === "wide") {
    return (
      <button onClick={() => setPage({name:'article',slug:insight.slug,parent:'insights'})}
              className="card-link"
              style={{textAlign:'start',width:'100%',display:'grid',gridTemplateColumns:'1.2fr 1fr',gap:40,alignItems:'center',cursor:'pointer'}}>
        <div className="img-wrap" style={{aspectRatio:'4/3'}}>
          <img src={insight.img} alt="" className="img-fade" style={{width:'100%',height:'100%',objectFit:'cover'}} />
        </div>
        <div>
          <div className="eyebrow" style={{color:'var(--gold)'}}>{insight.topic} · <span style={{color:'var(--muted)'}}>{dateFmt}</span></div>
          <h3 className="display h-2" style={{marginTop:16,lineHeight:1.05}}>{insight.title}</h3>
          <p className="lede" style={{marginTop:16}}>{insight.excerpt}</p>
          {author &&
            <div style={{marginTop:24,display:'flex',alignItems:'center',gap:12}}>
              <img src={author.img} alt="" style={{width:36,height:36,objectFit:'cover',borderRadius:0}}/>
              <div style={{fontSize:12,color:'var(--muted)'}}>{author.name}</div>
            </div>
          }
        </div>
      </button>
    );
  }
  return (
    <button onClick={() => setPage({name:'article',slug:insight.slug,parent:'insights'})}
            className="card-link"
            style={{textAlign:'start',width:'100%',cursor:'pointer',display:'flex',flexDirection:'column',gap:18}}>
      <div className="img-wrap" style={{aspectRatio:'5/4'}}>
        <img src={insight.img} alt="" className="img-fade" style={{width:'100%',height:'100%',objectFit:'cover'}} />
      </div>
      <div className="eyebrow" style={{color:'var(--gold)'}}>{insight.topic}</div>
      <h3 className="display h-3" style={{lineHeight:1.1}}>{insight.title}</h3>
      <div style={{fontSize:12,color:'var(--muted)',fontFamily:'var(--mono)',letterSpacing:'.06em'}}>{dateFmt}</div>
    </button>
  );
}

/* === Sticky CTA Bar (mobile / scroll-revealed) === */
function StickyCTA({ setPage }) {
  const t = useT();
  const [show, setShow] = useState(false);
  useEffect(() => {
    const h = () => setShow(window.scrollY > 600);
    window.addEventListener("scroll", h);
    return () => window.removeEventListener("scroll", h);
  }, []);
  return (
    <div style={{
      position:'fixed', insetInlineEnd:24, insetBlockEnd:24, zIndex:40,
      transform: show ? 'translateY(0)' : 'translateY(140%)',
      opacity: show ? 1 : 0,
      transition:'transform .5s var(--ease), opacity .3s var(--ease)',
    }}>
      <button onClick={() => setPage({name:'contact',scroll:'form'})} className="btn btn-gold"
              style={{boxShadow:'0 16px 36px -16px rgba(15,26,43,.4)'}}>
        {t("Request consultation","طلب استشارة")} <span className="arrow">→</span>
      </button>
    </div>
  );
}

Object.assign(window, {
  Logo, Navbar, Footer, RankingsStrip, SectionHead,
  PracticeCard, LawyerCard, InsightCard, StickyCTA, useT,
});
