import Link from "next/link"
import { motion } from "framer-motion"
import { Facebook, Twitter, Instagram, Youtube, PhoneIcon as Whatsapp, ArrowRight } from "lucide-react"


const footerLinks = [
  {
    title: "Exclusive Services",
    links: [
      { name: "Return And Cancellation Policy", href: "/policies/refund-policy" },
      { name: "Privacy Policy", href: "/policies/privacy-policy" },
      { name: "Book a Consultation", href: "/products/premium-rudraksha-consultation-astrology" },
    ],
  },
  {
    title: "May We Help You?",
    links: [
      { name: "Help and Contact", href: "/pages/contact-us" },
      { name: "Track Order", href: "/pages/track-order" },
      { name: "Shipping Information", href: "/pages/shipping-information" },
    ],
  },
  {
    title: "Our Brands",
    links: [
      // { name: "Why Gupta Rudraksha?", href: "/pages/about-us" },
      { name: "Certification and Guarantee", href: "/pages/certification-and-guarantee" },
      { name: "Terms of Service", href: "/policies/terms-of-services" },
    ],
  },
]

const socialLinks = [
  { name: "Facebook", icon: Facebook, href: "https://www.facebook.com/share/15qi5L1EsK/" },
  { name: "Instagram", icon: Instagram, href: "https://www.instagram.com/grb.religiongoods?igsh=ejNqZXZmMTVudzk=" },
  { name: "YouTube", icon: Youtube, href: "https://youtube.com/@guptarudrakshabeads?si=bCVPn8GsneXcFv0s" },
  {
    name: "WhatsApp",
    icon: Whatsapp,
    href: "https://api.whatsapp.com/send/?phone=9779803287986&text&type=phone_number&app_absent=0",
  },
]



const Footer = () => {
  return (
    <footer className="bg-[#304938] text-primary-foreground">
      <div className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
          {footerLinks.map((column, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
            >
              <h3 className="text-xl font-bold mb-4 text-primary-foreground/90">{column.title}</h3>
              <ul className="space-y-2">
                {column.links.map((link, linkIndex) => (
                  <li key={linkIndex}>
                    <Link href={link.href} className="hover:text-primary-foreground/70 transition-colors">
                      {link.name}
                    </Link>
                  </li>
                ))}
              </ul>
            </motion.div>
          ))}

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.3 }}
          >
            <h3 className="text-xl font-bold mb-4 text-primary-foreground/90">Stay Connected</h3>
            <div className="flex flex-wrap gap-4">
              {socialLinks.map((social, index) => (
                <a
                  key={index}
                  href={social.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="bg-primary-foreground/10 p-2 rounded-full hover:bg-primary-foreground/20 transition-colors"
                >
                  <social.icon size={24} />
                </a>
              ))}
            </div>

          </motion.div>
        </div>



        <div className="border-t border-primary-foreground/20 pt-8 text-center">
          <p className="text-sm text-primary-foreground/70">
            © {new Date().getFullYear()} Gupta Rudraksha. All rights reserved.
          </p>
        </div>
      </div>
    </footer>
  )
}

export default Footer