/* Services — mirrors the current site's six services, with FR/EN translations. */

const SERVICE_KEYS = ['webDev', 'mobile', 'cloud', 'devops', 'database', 'softwareDev'];

function Services() {
  window.useLang();
  const t = window.t;
  return (
    <section className="section" id="services">
      <div className="container">

        <div className="section-label reveal">
          <span className="num">06</span>
          <span>{t('services.title')}</span>
          <span className="bar" />
          <span>{t('services.sectionLabel')}</span>
        </div>

        <h2 className="section-title reveal">{t('services.title')}</h2>
        <p className="section-lede reveal delay-1">{t('services.subtitle')}</p>

        <div className="services-grid">
          {SERVICE_KEYS.map((key, i) => (
            <div className={`service reveal delay-${i % 3}`} key={key}>
              <span className="service-num">/{String(i + 1).padStart(2, '0')}</span>
              <h3 className="service-title">{t(`services.${key}.title`)}</h3>
              <p className="service-desc">{t(`services.${key}.desc`)}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Services = Services;