import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Animate } from "@/components/animations/animate"
import { Stagger } from "@/components/animations/stagger"
import { services } from "@/data/services"

export function ServicesSection() {
  return (
    <section className="w-full py-12 md:py-24 lg:py-32 bg-white dark:bg-gray-950" id="services">
      <div className="container px-4 md:px-6 mx-auto">
        <div className="flex flex-col items-center justify-center space-y-4 text-center">
          <div className="space-y-2">
            <Animate animation="fadeInUp" delay={0.1}>
              <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl text-primary-900 dark:text-primary-400">
              Cosa offriamo
              </h2>
            </Animate>
            <Animate animation="fadeInUp" delay={0.2}>
              <p className="max-w-[900px] text-gray-500 dark:text-gray-400 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                Offriamo servizi di sviluppo end-to-end che si adattano alle vostre esigenze.
              </p>
            </Animate>
          </div>
        </div>
        <Stagger className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16" delay={0.3}>
          {services.map((service, index) => (
            <Card key={index} className="border-primary-100 dark:border-primary-800 hover:shadow-md transition-shadow">
              <CardHeader className="pb-2">
                <div className="w-12 h-12 rounded-lg bg-primary-100 dark:bg-primary-900/20 flex items-center justify-center mb-4">
                  {service.icon}
                </div>
                <CardTitle className="text-xl text-primary-900 dark:text-primary-400">{service.title}</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-500 dark:text-gray-400">{service.description}</p>
              </CardContent>
            </Card>
          ))}
        </Stagger>
      </div>
    </section>
  )
}