// ═══════════════════════════════════════════════════════════════════
// src/sections/Servicos.jsx
// Services grid — data driven from SERVICES constant in data.jsx.
// To add/remove services, edit data.jsx only.
// ═══════════════════════════════════════════════════════════════════

function Servicos() {
  return (
    <section id="servicos" className="section section-tint">
      <div className="container">

        <div className="section-head reveal">
          <div className="eyebrow">Tratamentos</div>
          <h2 className="display">
            Cuidado completo, <em>do básico</em><br/>ao mais sofisticado.
          </h2>
          <p>
            Cada tratamento começa com uma avaliação clínica detalhada e termina com um
            plano sob medida. Sem cobrança escondida, sem pressa.
          </p>
        </div>

        <div className="services-grid">
          {SERVICES.map((s, i) => (
            <article key={s.kind} className={`service-card reveal d${(i % 3) + 1}`}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                <div className="ico"><ServiceIcon kind={s.kind}/></div>
                <div className="num">— {s.num}</div>
              </div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <a href="#agendar" className="more">
                Saber mais <Icon.arrow width="14" height="14"/>
              </a>
            </article>
          ))}
        </div>

      </div>
    </section>
  );
}