function Services() {
  const items = [
    { icon: 'waves', title: 'Escavação para piscina', desc: 'Buracos precisos para piscinas residenciais e comerciais.' },
    { icon: 'home', title: 'Viga baldrame / fundações', desc: 'Escavação para baldrames e fundações leves.' },
    { icon: 'sprout', title: 'Valeta para irrigação', desc: 'Valetas para sistemas de irrigação e paisagismo.' },
    { icon: 'settings', title: 'Escavação para radier', desc: 'Preparação de terreno para radier residencial.' },
    { icon: 'mountain', title: 'Terraplanagem para contra piso', desc: 'Nivelamento e preparação para construção.' },
    { icon: 'drill', title: 'Perfuração de buracos', desc: 'Perfurações precisas para postes, mourões e fundações.' },
  ];

  return (
    <section id="services" className="py-20 bg-muted">
      <div className="container mx-auto px-4">
        <div className="text-center max-w-2xl mx-auto mb-12">
          <div className="text-xs font-semibold tracking-[0.12em] uppercase text-accent mb-3">
            Serviços
          </div>
          <h2 className="text-3xl md:text-4xl font-bold text-primary leading-tight mb-3">
            Soluções de escavação para qualquer obra.
          </h2>
          <p className="text-muted-foreground text-base">
            Da fundação ao acabamento — com a Bobcat E10 a obra anda mais rápido, mais limpa e mais segura.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
          {items.map((s) => (
            <div
              key={s.title}
              className="group bg-white rounded-lg p-7 shadow-card hover:shadow-elegant transition-smooth hover:-translate-y-1"
            >
              <div className="inline-flex items-center justify-center w-14 h-14 rounded-full bg-primary text-white mb-5 transition-smooth group-hover:bg-accent">
                <Icon name={s.icon} size={26} />
              </div>
              <h3 className="text-lg font-semibold text-primary mb-2">{s.title}</h3>
              <p className="text-muted-foreground text-sm leading-relaxed">{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Services = Services;