import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { MessageSquare, Phone, Users } from "lucide-react"
import Image from "next/image"
import { ContactForm } from "@/components/contact-form"
import { Testimonials, TestimonialsSection } from "@/components/testimonials"
import { Navbar } from "@/components/navbar"
import { Footer } from "@/components/footer"
import { HeroSection } from "@/components/hero-section"
import { ServicesSection } from "@/components/services-section"
import { ProjectsSection } from "@/components/projects-section"
import { BlogSection } from "@/components/blog-section"
import { Animate } from "@/components/animations/animate"
import { AboutSection } from "@/components/about-section"

export default function Home() {
  return (
    <div className="flex min-h-screen flex-col">
      <Navbar />
      <HeroSection />
      <ServicesSection />
      <ProjectsSection />
      <AboutSection />

      {/* Blog Section */}
      <BlogSection />

      {/* Testimonials Section */}
      <TestimonialsSection />

      {/* Contact Section */}
      <section className="w-full py-12 md:py-24 lg:py-32 bg-white dark:bg-gray-950" id="contact">
        <div className="container px-4 md:px-6 mx-auto">
          <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 items-start">
            <div className="flex flex-col justify-center space-y-4">
              <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">
                    Contattaci
                  </h2>
                </Animate>
                <Animate animation="fadeInUp" delay={0.2}>
                  <p className="max-w-[600px] text-gray-500 dark:text-gray-400 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                    Pronto a iniziare il tuo prossimo progetto? Contattaci per scoprire come possiamo aiutarti.
                  </p>
                </Animate>
              </div>
              <div className="space-y-4">
                {/* <Animate animation="fadeInUp" delay={0.3}>
                  <div className="flex items-center gap-3">
                    <Phone className="h-5 w-5 text-primary-900 dark:text-primary-400" />
                    <span className="text-gray-500 dark:text-gray-400">(555) 123-4567</span>
                  </div>
                </Animate> */}
                <Animate animation="fadeInUp" delay={0.4}>
                  <div className="flex items-center gap-3">
                    <MessageSquare className="h-5 w-5 text-primary-900 dark:text-primary-400" />
                    <span className="text-gray-500 dark:text-gray-400">info@techtonicfault.com</span>
                  </div>
                </Animate>
                <Animate animation="fadeInUp" delay={0.5}>
                  <div className="flex items-center gap-3">
                    <Users className="h-5 w-5 text-primary-900 dark:text-primary-400" />
                    <span className="text-gray-500 dark:text-gray-400">Pianifica una consulenza</span>
                  </div>
                </Animate>
              </div>
            </div>
            <div className="space-y-4">
              <ContactForm />
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  )
}