/* mtz. website — services as a numbered editorial list.
   Copy from content.json (window.mtzContent.services). */
function Services() {
  const c = mtzContent.services;
  return (
    <section className="mtz-services-sec" id="servicos">
      <div className="mtz-sec-head">
        <span className="mtz-eyebrow-row">{eb(c.eyebrow)}</span>
        <h2 className="mtz-sec-title mtz-split">{rt(c.title)}</h2>
      </div>
      <div className="mtz-services">
        {c.items.map((it) => (
          <div className="mtz-service" key={it.n}>
            <span className="mtz-service__n">{it.n}</span>
            <h3 className="mtz-service__t">{rt(it.title)}</h3>
            <p className="mtz-service__d">{it.desc}</p>
            <div className="mtz-service__tags">
              {it.tags.map((tg) => <Tag key={tg} variant="outline">{tg}</Tag>)}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
window.Services = Services;