// Case studies — three client builds: client & industry → what they needed → what we built → live site.
// Copy lives in src/i18n.js (cs.*). /case-studies/ and /construction/ repeat these cards as static HTML.
const CASE_STUDIES = [
  { id: 'mm', name: 'MEGAHMAJU CONSTRUCTION', cat: 'construction', c: 'client-c1', dom: 'megahmaju.666website.com', href: 'https://megahmaju.666website.com/' },
  { id: 'dp', name: 'DIAGNO-PHARM (MALAYSIA) SDN BHD', cat: 'medical', c: 'client-c2', dom: 'www.diagno-pharm.com', href: 'https://www.diagno-pharm.com/' },
  { id: 'jt', name: 'Joy Japan Solution', cat: 'travel', c: 'client-c4', dom: 'joytravel2u.com', href: 'https://www.joytravel2u.com/' },
];

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

        <div className="case-grid">
          {CASE_STUDIES.map((c, i) => (
            <article key={c.id} className={'case-card reveal d' + (i + 1)}>
              <span className={'case-tag ' + c.c}>{t('cw.cat.' + c.cat)} · <span className="cn">{t('cw.cat.' + c.cat + '.alt')}</span></span>
              <div className="case-lab">{t('cs.label.client')}</div>
              <h3>{c.name}</h3>
              <div className="case-ind">{t('cs.' + c.id + '.ind')}</div>
              <div className="case-lab">{t('cs.label.need')}</div>
              <p>{t('cs.' + c.id + '.need')}</p>
              <div className="case-lab">{t('cs.label.built')}</div>
              <ul className="case-bullets">
                {[1, 2, 3].map((n) => <li key={n}><Icon.check/>{t('cs.' + c.id + '.b.' + n)}</li>)}
              </ul>
              <a className="case-link" href={c.href} target="_blank" rel="noopener">
                <span>{t('cs.visit')}<br/><span className="dom">{c.dom}</span></span>
                <span className="arr" aria-hidden="true"><Icon.arrowUR/></span>
              </a>
            </article>
          ))}
        </div>

        <div className="case-more reveal">
          <a href="/case-studies/" className="link-arrow">{t('cs.all')}<Icon.arrow/></a>
        </div>
      </div>
    </section>
  );
}
window.CaseStudies = CaseStudies;