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 blogPosts from "@/data/blog"

export const metadata: Metadata = {
  title: "Blog | TECHTONIC FAULT",
  description: "Insight e articoli su sviluppo software, tecnologia e trasformazione digitale",
}

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">
                  Ultimi articoli
                </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">
                  Resta aggiornato con i nostri ultimi post su tecnologia, sviluppo e trend d'industria.
                </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}>
              {blogPosts.map((post) => (
                <BlogCard key={post.slug} post={post} />
              ))}
            </Stagger>
          </div>
        </section>

        {!blogPosts.length && <>
          <section className="w-full py-12 md:py-24 bg-white dark:bg-gray-950">
            <div className="flex flex-col items-center text-center space-y-4 -mt-32 container px-4 md:px-6 mx-auto text-gray-500 dark:text-gray-400">
              <Animate delay={0.3}>
                Non ci sono post.
              </Animate>
            </div>
          </section>
        </>}
      </main>

      <Footer />
    </div>
  )
}