// Services.jsx
const Services = () => {
  const t = useT();
  return (
    <section className="bp-section" id="services">
      <div className="bp-section__head">
        <span className="bp-eyebrow">{t.services.eyebrow}</span>
        <h2 className="bp-section__title">{t.services.title}</h2>
      </div>
      <div className="bp-services">
        {t.services.list.map((s, i) => {
          const n = String(i + 1).padStart(2, '0');
          return (
            <article key={i} className="bp-service">
              <header className="bp-service__head">
                <span className="bp-service__n">{n}</span>
                <span className="bp-tag">{s.tag}</span>
              </header>
              <h3 className="bp-service__title">{s.title}</h3>
              {s.subtitle ? <div className="bp-service__subtitle">{s.subtitle}</div> : null}
              <p className="bp-service__body">{s.body}</p>
              <footer className="bp-service__foot">
                <span className="bp-service__price">{s.foot}</span>
                <a href="#contact" className="bp-service__cta">{t.services.cta} <span>→</span></a>
              </footer>
            </article>
          );
        })}
      </div>
    </section>
  );
};
window.Services = Services;