'use client';

import React from 'react';
import { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { FaFacebook, FaTwitter, FaLinkedin, FaInstagram, FaYoutube, FaWhatsapp, FaPhone } from 'react-icons/fa';

const Footer = () => {
  const [email, setEmail] = useState('');
  const [subscribeStatus, setSubscribeStatus] = useState<'idle' | 'success' | 'error'>('idle');

  const handleSubscribe = async (e: React.FormEvent) => {
    e.preventDefault();
    setSubscribeStatus('success');
    setEmail('');
  };

  return (
    <footer className="bg-gray-900 text-white pt-20 pb-10">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
          {/* Company Info */}
          <div>
            <div className="mb-6">
              <Image
                src="/images/logo-white.jpg"
                alt="TEAMJOINT Company Limited"
                width={150}
                height={40}
              />
            </div>
            <p className="text-gray-400 mb-6">
              Leading the way in sustainable e-waste management solutions across Kenya.
            </p>
            <div className="flex space-x-4">
              <a
                href="tel:+254715210069"
                className="text-[#4CAF50] hover:opacity-80 transition-opacity duration-300"
                aria-label="Call us"
              >
                <FaPhone size={24} />
              </a>
              <a
                href="https://www.facebook.com/profile.php?id=61564514841023"
                target="_blank"
                rel="noopener noreferrer"
                className="text-[#1877F2] hover:opacity-80 transition-opacity duration-300"
                aria-label="Visit our Facebook page"
              >
                <FaFacebook size={24} />
              </a>
              <a
                href="https://www.youtube.com/channel/UCtuNNE_IJ4eCFASL84EEquQ"
                target="_blank"
                rel="noopener noreferrer"
                className="text-[#FF0000] hover:opacity-80 transition-opacity duration-300"
                aria-label="Visit our YouTube channel"
              >
                <FaYoutube size={24} />
              </a>
              <a
                href="https://www.instagram.com/grizzly_technologies/"
                target="_blank"
                rel="noopener noreferrer"
                className="text-[#E4405F] hover:opacity-80 transition-opacity duration-300"
                aria-label="Visit our Instagram profile"
              >
                <FaInstagram size={24} />
              </a>
              <a
                href="#"
                target="_blank"
                rel="noopener noreferrer"
                className="text-[#0A66C2] hover:opacity-80 transition-opacity duration-300"
                aria-label="Visit our LinkedIn page"
              >
                <FaLinkedin size={24} />
              </a>
              <a
                href="#"
                target="_blank"
                rel="noopener noreferrer"
                className="text-[#1DA1F2] hover:opacity-80 transition-opacity duration-300"
                aria-label="Visit our X/Twitter profile"
              >
                <FaTwitter size={24} />
              </a>
              <a
                href="https://wa.me/+254115 366185"
                target="_blank"
                rel="noopener noreferrer"
                className="text-[#25D366] hover:opacity-80 transition-opacity duration-300"
                aria-label="Chat with us on WhatsApp"
              >
                <FaWhatsapp size={24} />
              </a>
            </div>
          </div>

          {/* Quick Links */}
          <div>
            <h3 className="text-lg font-bold mb-6">Quick Links</h3>
            <ul className="space-y-4">
              <li>
                <Link href="/about" className="text-gray-400 hover:text-white transition-colors duration-300">
                  About Us
                </Link>
              </li>
              <li>
                <Link href="/services" className="text-gray-400 hover:text-white transition-colors duration-300">
                  Services
                </Link>
              </li>
              <li>
                <Link href="/projects" className="text-gray-400 hover:text-white transition-colors duration-300">
                  Projects
                </Link>
              </li>
              <li>
                <Link href="/blog" className="text-gray-400 hover:text-white transition-colors duration-300">
                  Blog
                </Link>
              </li>
              <li>
                <Link href="/contact" className="text-gray-400 hover:text-white transition-colors duration-300">
                  Contact
                </Link>
              </li>
            </ul>
          </div>

          {/* Services */}
          <div>
            <h3 className="text-lg font-bold mb-6">Services</h3>
            <ul className="space-y-4">
              <li>
                <Link href="/services/collection" className="text-gray-400 hover:text-white transition-colors duration-300">
                  E-Waste Collection
                </Link>
              </li>
              <li>
                <Link href="/services/recycling" className="text-gray-400 hover:text-white transition-colors duration-300">
                  Recycling Process
                </Link>
              </li>
              <li>
                <Link href="/services/data" className="text-gray-400 hover:text-white transition-colors duration-300">
                  Data Destruction
                </Link>
              </li>
              <li>
                <Link href="/services/corporate" className="text-gray-400 hover:text-white transition-colors duration-300">
                  Corporate Solutions
                </Link>
              </li>
            </ul>
          </div>

          {/* Newsletter */}
          <div>
            <h3 className="text-lg font-bold mb-6">Newsletter</h3>
            <p className="text-gray-400 mb-4">
              Subscribe to our newsletter for the latest updates and insights.
            </p>
            <form onSubmit={handleSubscribe} className="space-y-4">
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="Enter your email"
                required
                className="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent text-white placeholder-gray-500"
              />
              <button
                type="submit"
                className="w-full btn-primary"
              >
                Subscribe
              </button>
              {subscribeStatus === 'success' && (
                <p className="text-green-500 text-sm">Thank you for subscribing!</p>
              )}
            </form>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="border-t border-gray-800 pt-8">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <p className="text-gray-400 text-sm mb-4 md:mb-0">
              © {new Date().getFullYear()} TEAMJOINT Company Limited. All rights reserved.
            </p>
            <div className="flex space-x-6">
              <Link href="/privacy" className="text-gray-400 hover:text-white text-sm transition-colors duration-300">
                Privacy Policy
              </Link>
              <Link href="/terms" className="text-gray-400 hover:text-white text-sm transition-colors duration-300">
                Terms of Service
              </Link>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;