"use client";
import { motion } from "framer-motion";
import {
  Facebook,
  Instagram,
  Linkedin,
  Twitter,
  Youtube,
  Globe,
} from "lucide-react";
import React from "react";

const socialLinks = [
  {
    name: "Facebook",
    Icon: Facebook,
    href: "#",
    color: "bg-blue-600 hover:bg-blue-700",
  },
  {
    name: "Instagram",
    Icon: Instagram,
    href: "#",
    color: "bg-pink-600 hover:bg-pink-700",
  },
  {
    name: "LinkedIn",
    Icon: Linkedin,
    href: "#",
    color: "bg-blue-500 hover:bg-blue-600",
  },
  {
    name: "Twitter",
    Icon: Twitter,
    href: "#",
    color: "bg-sky-500 hover:bg-sky-600",
  },
  {
    name: "YouTube",
    Icon: Youtube,
    href: "#",
    color: "bg-red-600 hover:bg-red-700",
  },
  {
    name: "Website",
    Icon: Globe,
    href: "#",
    color: "bg-red-600 hover:bg-orange-600",
  },
];

export const SocialLinks = () => {
  return (
    <section className="relative z-10 max-w-7xl mx-auto px-4 -mt-16 mb-16">
      <div className="bg-white/10 backdrop-blur-md border border-white/20 p-8 rounded-2xl">
        <h3 className="text-2xl font-bold text-white text-center mb-8">
          Connect With Us
        </h3>
        <div className="grid grid-cols-3 md:grid-cols-6 gap-4">
          {socialLinks.map(({ name, Icon, href, color }) => (
            <motion.a
              key={name}
              href={href}
              target="_blank"
              rel="noopener noreferrer"
              className={`${color} flex flex-col items-center justify-center p-4 rounded-xl text-white transition-all duration-300`}
              whileHover={{ scale: 1.05, y: -5 }}
              whileTap={{ scale: 0.95 }}
            >
              <Icon className="w-8 h-8 mb-2" />
              <span className="text-sm font-medium">{name}</span>
            </motion.a>
          ))}
        </div>
      </div>
    </section>
  );
};