import { Badge } from "@/components/ui/badge"
import { ProjectCard } from "@/components/project-card"
import { Animate } from "@/components/animations/animate"
import { Stagger } from "@/components/animations/stagger"
import Link from "next/link"
import { Button } from "./ui/button"
import { ArrowRight } from "lucide-react"
import projects from "@/data/portfolio"

export function ProjectsSection() {
  return (
    <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-50 dark:bg-gray-900" id="projects">
      <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">
                Portfolio
              </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">
                Sfoglia i nostri lavori recenti e osserva come abbiamo aiutato i nostri partner a raggiungere i loro obiettivi.
              </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}>
          {projects.slice(0, 6).map((project, index) => (
            <ProjectCard
              key={index}
              project={project}
            />
          ))}
        </Stagger>
        <Animate animation="fadeInUp" delay={0.6} className="flex justify-center mt-12">
          <Link href="/portfolio">
            <Button className="bg-primary-900 hover:bg-primary-800 dark:bg-primary-700 dark:hover:bg-primary-600">
              Portfolio completo
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </Link>
        </Animate>
      </div>
    </section>
  )
}