import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { 
  Instagram, 
  Linkedin, 
  Facebook, 
  Phone, 
  Mail, 
  MapPin 
} from 'lucide-react';

gsap.registerPlugin(ScrollTrigger);

const Footer = () => {
  const footerRef = useRef<HTMLElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
  const borderRef = useRef<HTMLDivElement>(null);

  const quickLinks = [
    { name: 'Home', href: '#home' },
    { name: 'About Us', href: '#about' },
    { name: 'Services', href: '#services' },
    { name: 'Portfolio', href: '#portfolio' },
    { name: 'Blog', href: '#blog' },
    { name: 'Contact', href: '#contact' },
  ];

  const services = [
    'Website Development',
    'SaaS & Web Apps',
    'WordPress Development',
    'SEO Optimization',
    'Bug Fixing',
  ];

  const socialLinks = [
    { icon: Instagram, href: '#', label: 'Instagram' },
    { icon: Linkedin, href: '#', label: 'LinkedIn' },
    { icon: Facebook, href: '#', label: 'Facebook' },
  ];

  useEffect(() => {
    const ctx = gsap.context(() => {
      // Border animation
      if (borderRef.current) {
        gsap.fromTo(
          borderRef.current,
          { scaleX: 0 },
          {
            scaleX: 1,
            duration: 0.8,
            ease: 'expo.out',
            scrollTrigger: {
              trigger: footerRef.current,
              start: 'top 90%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }

      // Columns animation
      const columns = contentRef.current?.querySelectorAll('.footer-column');
      if (columns) {
        gsap.fromTo(
          columns,
          { y: 30, opacity: 0 },
          {
            y: 0,
            opacity: 1,
            duration: 0.6,
            stagger: 0.15,
            ease: 'expo.out',
            scrollTrigger: {
              trigger: contentRef.current,
              start: 'top 90%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }

      // Social icons animation
      const socials = contentRef.current?.querySelectorAll('.social-icon');
      if (socials) {
        gsap.fromTo(
          socials,
          { scale: 0 },
          {
            scale: 1,
            duration: 0.4,
            stagger: 0.1,
            ease: 'elastic.out(1, 0.5)',
            scrollTrigger: {
              trigger: contentRef.current,
              start: 'top 85%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }
    }, footerRef);

    return () => ctx.revert();
  }, []);

  return (
    <footer
      id="contact"
      ref={footerRef}
      className="relative pt-16 pb-8"
    >
      {/* Top Border */}
      <div 
        ref={borderRef}
        className="absolute top-0 left-0 right-0 h-px origin-center"
        style={{
          background: 'linear-gradient(90deg, transparent, rgba(59, 106, 255, 0.5), transparent)',
        }}
      />

      <div className="section-padding">
        <div className="container-max">
          <div
            ref={contentRef}
            className="grid sm:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-8 mb-12"
          >
            {/* Column 1 - Brand */}
            <div className="footer-column sm:col-span-2 lg:col-span-1">
              <a href="#home" className="inline-block mb-4">
                <span className="text-xl font-bold text-white font-['Outfit']">
                  Patil
                </span>
                <span className="text-xl font-bold gradient-text font-['Outfit']">
                  Web Solutions
                </span>
              </a>
              
              <p className="text-[#94a3b8] text-sm leading-relaxed mb-6">
                We build fast, secure, and modern web solutions tailored for 
                your business growth in Chhatrapati Sambhajinagar.
              </p>

              {/* Social Icons */}
              <div className="flex gap-3">
                {socialLinks.map((social, i) => (
                  <a
                    key={i}
                    href={social.href}
                    aria-label={social.label}
                    className="social-icon w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-[#94a3b8] hover:bg-[#3b6aff] hover:border-[#3b6aff] hover:text-white hover:-translate-y-1 transition-all duration-300"
                  >
                    <social.icon size={18} />
                  </a>
                ))}
              </div>
            </div>

            {/* Column 2 - Quick Links */}
            <div className="footer-column">
              <h4 className="text-white font-semibold mb-4 font-['Outfit']">
                Quick Links
              </h4>
              <ul className="space-y-3">
                {quickLinks.map((link, i) => (
                  <li key={i}>
                    <a
                      href={link.href}
                      className="text-[#94a3b8] text-sm hover:text-[#3b6aff] transition-colors duration-300 relative group"
                    >
                      {link.name}
                      <span className="absolute -bottom-0.5 left-0 w-0 h-px bg-[#3b6aff] group-hover:w-full transition-all duration-300" />
                    </a>
                  </li>
                ))}
              </ul>
            </div>

            {/* Column 3 - Services */}
            <div className="footer-column">
              <h4 className="text-white font-semibold mb-4 font-['Outfit']">
                Services
              </h4>
              <ul className="space-y-3">
                {services.map((service, i) => (
                  <li key={i}>
                    <a
                      href="#services"
                      className="text-[#94a3b8] text-sm hover:text-[#3b6aff] transition-colors duration-300 relative group"
                    >
                      {service}
                      <span className="absolute -bottom-0.5 left-0 w-0 h-px bg-[#3b6aff] group-hover:w-full transition-all duration-300" />
                    </a>
                  </li>
                ))}
              </ul>
            </div>

            {/* Column 4 - Contact */}
            <div className="footer-column">
              <h4 className="text-white font-semibold mb-4 font-['Outfit']">
                Contact Us
              </h4>
              <ul className="space-y-4">
                <li className="flex items-start gap-3">
                  <div className="w-8 h-8 rounded-lg bg-[#3b6aff]/20 flex items-center justify-center flex-shrink-0 mt-0.5">
                    <Phone size={14} className="text-[#3b6aff]" />
                  </div>
                  <div>
                    <p className="text-[#94a3b8] text-xs mb-0.5">Call / WhatsApp</p>
                    <a 
                      href="tel:+917057830490" 
                      className="text-white text-sm hover:text-[#3b6aff] transition-colors"
                    >
                      +91 70578 30490
                    </a>
                  </div>
                </li>
                
                <li className="flex items-start gap-3">
                  <div className="w-8 h-8 rounded-lg bg-[#3b6aff]/20 flex items-center justify-center flex-shrink-0 mt-0.5">
                    <Mail size={14} className="text-[#3b6aff]" />
                  </div>
                  <div>
                    <p className="text-[#94a3b8] text-xs mb-0.5">Email Us</p>
                    <a 
                      href="mailto:info@patilwebsolutions.com" 
                      className="text-white text-sm hover:text-[#3b6aff] transition-colors"
                    >
                      info@patilwebsolutions.com
                    </a>
                  </div>
                </li>
                
                <li className="flex items-start gap-3">
                  <div className="w-8 h-8 rounded-lg bg-[#3b6aff]/20 flex items-center justify-center flex-shrink-0 mt-0.5">
                    <MapPin size={14} className="text-[#3b6aff]" />
                  </div>
                  <div>
                    <p className="text-[#94a3b8] text-xs mb-0.5">Office Address</p>
                    <p className="text-white text-sm">
                      First Floor, Prozone Trade Centre,<br />
                      Chhatrapati Sambhajinagar, MH 431006
                    </p>
                  </div>
                </li>
              </ul>
            </div>
          </div>

          {/* Copyright */}
          <div className="pt-8 border-t border-white/10">
            <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
              <p className="text-[#94a3b8] text-sm text-center sm:text-left">
                © 2026 Patil Web Solutions. All Rights Reserved.
              </p>
              <div className="flex gap-6">
                <a href="#" className="text-[#94a3b8] text-sm hover:text-white transition-colors">
                  Privacy Policy
                </a>
                <a href="#" className="text-[#94a3b8] text-sm hover:text-white transition-colors">
                  Terms of Service
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;