import { Navbar } from "@/components/navbar"
import { Footer } from "@/components/footer"
import { Badge } from "@/components/ui/badge"
import { BlogCard } from "@/components/blog-card"
import type { Metadata } from "next"
import { Animate } from "@/components/animations/animate"
import { Stagger } from "@/components/animations/stagger"
import { ProjectCard } from "@/components/project-card"
import projects from "@/data/portfolio"

export const metadata: Metadata = {
  title: "Portfolio | TECHTONIC FAULT",
  description: "Tutti i progetti ai quali abbiamo lavorato",
}

export default function BlogPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <Navbar />

      <main className="flex-1">
        {/* Hero Section */}
        <section className="w-full py-12 md:py-24 lg:py-32 bg-primary-50 dark:bg-gray-900">
          <div className="container px-4 md:px-6 mx-auto">
            <div className="flex flex-col items-center text-center space-y-4">
              <Animate animation="fadeInUp" delay={0.1}>
                <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl text-primary-900 dark:text-primary-300">
                  Portfolio
                </h1>
              </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>
        </section>

        {/* Blog Posts */}
        <section className="w-full py-12 md:py-24 bg-white dark:bg-gray-950">
          <div className="container px-4 md:px-6 mx-auto">
            <Stagger className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" delay={0.3}>
              {projects.map((project, index) => (
                <ProjectCard
                  key={index}
                  project={project}
                />
              ))}
            </Stagger>
          </div>
        </section>
      </main>

      <Footer />
    </div>
  )
}