// Client work — nine live client sites, each card opens the site in a new tab.
// The same list is repeated as static HTML on /case-studies/ — keep both in step.
const CLIENT_SITES = [
  { dom: 'megahmaju.666website.com', href: 'https://megahmaju.666website.com/', cat: 'construction' },
  { dom: 'thenewproperties.com', href: 'https://www.thenewproperties.com/', cat: 'property' },
  { dom: 'artlanscape.com', href: 'https://www.artlanscape.com/', cat: 'landscape' },
  { dom: 'csoneconcept.com', href: 'https://www.csoneconcept.com/', cat: 'interiors' },
  { dom: 'sptbina.com', href: 'https://www.sptbina.com/', cat: 'construction' },
  { dom: 'agquartz.com', href: 'https://www.agquartz.com/', cat: 'stone' },
  { dom: 'mstehtuition.com', href: 'https://www.mstehtuition.com/', cat: 'education' },
  { dom: 'joytravel2u.com', href: 'https://www.joytravel2u.com/', cat: 'travel' },
  { dom: 'www.diagno-pharm.com', href: 'https://www.diagno-pharm.com/', cat: 'medical' },
];

function ClientWork() {
  const { t } = useLang();
  return (
    <section className="section" id="clients">
      <div className="wrap">
        <div className="section-head">
          <div className="reveal">
            <div className="kicker"><span className="dot"></span><span>{t('cw.kicker')}</span><span className="bar"></span><span>{t('cw.kicker.right')}</span></div>
            <h2 className="section-title" style={{marginTop:20}} dangerouslySetInnerHTML={tHtml('cw.title.html')}/>
          </div>
          <div className="reveal d1">
            <p className="lead">{t('cw.lead')}</p>
          </div>
        </div>

        <div className="client-grid">
          {CLIENT_SITES.map((s, i) => (
            <a key={s.dom} href={s.href} target="_blank" rel="noopener" className={'client-card client-c' + (i + 1) + ' reveal d' + (i % 3 + 1)}>
              <span className="client-ava" aria-hidden="true">{s.dom.replace(/^www\./, '').charAt(0).toUpperCase()}</span>
              <span className="body">
                <span className="dom">{s.dom}</span>
                <span className="cat">{t('cw.cat.' + s.cat)} · <span className="cn">{t('cw.cat.' + s.cat + '.alt')}</span></span>
              </span>
              <span className="arr" aria-hidden="true"><Icon.arrowUR/></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.ClientWork = ClientWork;