"use client";

import { motion } from "framer-motion";
import { Instagram, Globe, Mail, Phone } from "lucide-react";

const socialLinks = [
  { icon: Instagram, href: "https://instagram.com/cihathanofficial", label: "Instagram" },
  { icon: Globe, href: "https://dijitalwebsite.com", label: "Dijital Website" },
  { icon: Globe, href: "https://www.cocukmont.com.tr", label: "CocukMont" },
  { icon: Mail, href: "mailto:info@dijitalwebsite.com", label: "Email" },
];

export function Footer() {
  return (
    <footer className="relative border-t border-gray-900/50 bg-black w-full">
      <div className="max-w-[1400px] mx-auto px-8 sm:px-12 lg:px-16 xl:px-20 py-12">
        <div className="flex flex-col md:flex-row items-center justify-between gap-6">
          <motion.p
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            className="text-xs text-gray-600 font-light tracking-wide"
          >
            © 2025 · Cihat Cengiz · Digital Ventures & Systems
          </motion.p>

          <div className="flex items-center gap-6">
            {socialLinks.map((social, index) => (
              <motion.a
                key={social.label}
                href={social.href}
                target="_blank"
                rel="noopener noreferrer"
                initial={{ opacity: 0 }}
                whileInView={{ opacity: 1 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.05 }}
                whileHover={{ y: -2 }}
                className="text-gray-600 hover:text-gray-400 transition-colors duration-300"
                aria-label={social.label}
              >
                <social.icon className="w-4 h-4" />
              </motion.a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

