import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Facebook, Github, Instagram, Linkedin, Twitter } from "lucide-react"
import { services } from "@/data/services"
import { Animate } from "@/components/animations/animate"
import { Logo } from "@/components/logo"

const company = [
  { item: "Servizi", href: "/#services" },
  { item: "Progetti", href: "/portfolio" },
  { item: "Testimonianze", href: "/#testimonials" },
  { item: "Blog", href: "/blog" },
  { item: "Contattaci", href: "/#contact" },
]

export function Footer() {
  return (
    <footer className="w-full py-12 md:py-16 lg:py-20 bg-primary-900 dark:bg-gray-950 text-white">
      <div className="container px-4 md:px-6 mx-auto">
        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
          <Animate animation="fadeInUp" delay={0.1} className="md:col-span-2 lg:col-span-1">
            <div className="space-y-4">
              <Logo showText={true} showColor={"dark"} className="opacity-90 block" />
              <p className="text-gray-300">
                Where innovation meets impact.
              </p>
              {/* <div className="flex space-x-4">
                {[
                  { icon: <Twitter className="h-5 w-5" />, label: "Twitter" },
                  { icon: <Facebook className="h-5 w-5" />, label: "Facebook" },
                  { icon: <Instagram className="h-5 w-5" />, label: "Instagram" },
                  { icon: <Linkedin className="h-5 w-5" />, label: "LinkedIn" },
                  { icon: <Github className="h-5 w-5" />, label: "GitHub" },
                ].map((social, index) => (
                  <Link key={index} href="#" className="text-gray-300 hover:text-white transition-colors">
                    {social.icon}
                    <span className="sr-only">{social.label}</span>
                  </Link>
                ))}
              </div> */}
            </div>
          </Animate>
          <Animate animation="fadeInUp" delay={0.2}>
            <div className="space-y-4">
              <h3 className="text-lg font-semibold">Servizi</h3>
              <ul className="space-y-2">
                {services.map((service, index) => (
                  <li key={index}>
                    <Link href="#" className="text-gray-300 hover:text-white transition-colors">
                      {service.title}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          </Animate>
          <Animate animation="fadeInUp" delay={0.3}>
            <div className="space-y-4">
              <h3 className="text-lg font-semibold">Azienda</h3>
              <ul className="space-y-2">
                {company.map(({ item, href }, index) => (
                  <li key={index}>
                    <Link href={href} className="text-gray-300 hover:text-white transition-colors">
                      {item}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          </Animate>
          {/* <Animate animation="fadeInUp" delay={0.4}>
            <div className="space-y-4">
              <h3 className="text-lg font-semibold">Subscribe</h3>
              <p className="text-gray-300">Subscribe to our newsletter for the latest updates and insights.</p>
              <form className="flex space-x-2">
                <Input
                  className="border-primary-700 text-white placeholder:text-gray-400"
                  placeholder="Enter your email"
                  type="email"
                />
                <Button className="bg-white text-primary-900 hover:bg-gray-100">Subscribe</Button>
              </form>
            </div>
          </Animate> */}
        </div>
        <Animate animation="fadeInUp" delay={0.5}>
          <div className="mt-12 pt-8 border-t border-primary-800 dark:border-gray-800 text-center text-gray-300">
            <p>© {new Date().getFullYear()} TECHTONIC FAULT. Tutti i diritti riservati. {/* P.IVA 12345678901 */}</p>
          </div>
        </Animate>
      </div>
    </footer>
  )
}