import { Phone, Mail, MapPin, ExternalLink } from "lucide-react";
import { SiFacebook, SiInstagram, SiX, SiYoutube } from "react-icons/si";
import tkashLogo from "@assets/T-kash_Soko_2_1768661356739.png";

const GOOGLE_PLAY_BADGE = "https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png";

const quickLinks = [
  { name: "For Merchants", href: "#merchants" },
  { name: "For Services", href: "#services" },
  { name: "Personal Shopping", href: "#personal" },
  { name: "Features", href: "#features" },
  { name: "Pricing", href: "#pricing" },
  { name: "Service Portal", href: "https://bookservices.blipply.com", external: true },
];

const supportLinks = [
  { name: "Help Center", href: "https://telkom.co.ke/help-center/", external: true },
  { name: "Contact Us", href: "https://telkom.co.ke/help-center/contact-us/", external: true },
  { name: "Customer Portal", href: "https://telkom.co.ke/help-center/customer-portal/", external: true },
  { name: "T-kash FAQs", href: "https://telkom.co.ke/help-center/faqs/t-kash/", external: true },
];

export default function Footer() {
  const scrollToSection = (id: string) => {
    const element = document.getElementById(id.replace("#", ""));
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
    }
  };

  return (
    <footer className="bg-gray-900 text-white">
      <div className="max-w-7xl mx-auto px-4 py-16">
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-12 lg:gap-8">
          <div>
            <div className="mb-6 flex items-center gap-3">
              <img src={tkashLogo} alt="T-kash Soko" className="h-12 w-auto rounded-lg" />
              <div className="h-8 w-px bg-gray-600" />
              <span className="text-sm text-gray-400">by Telkom Kenya</span>
            </div>
            <p className="text-gray-400 text-sm leading-relaxed mb-6">
              One powerful app for merchants and everyday users. Shop, pay, sell, and manage your business, all in one place.
            </p>
            <a
              href="https://play.google.com/store/apps/details?id=com.Blipply.Merchant&hl=en"
              target="_blank"
              rel="noopener noreferrer"
              data-testid="link-footer-download"
            >
              <img 
                src={GOOGLE_PLAY_BADGE} 
                alt="Get it on Google Play" 
                className="h-14 w-auto"
              />
            </a>
          </div>
          
          <div>
            <h4 className="text-lg font-semibold mb-6">Quick Links</h4>
            <ul className="space-y-3">
              {quickLinks.map((link, index) => (
                <li key={index}>
                  {link.external ? (
                    <a
                      href={link.href}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-gray-400 hover:text-telkom-yellow transition-colors text-sm flex items-center gap-1"
                      data-testid={`footer-link-${index}`}
                    >
                      {link.name}
                      <ExternalLink className="w-3 h-3" />
                    </a>
                  ) : (
                    <button
                      onClick={() => scrollToSection(link.href)}
                      className="text-gray-400 hover:text-telkom-yellow transition-colors text-sm"
                      data-testid={`footer-link-${index}`}
                    >
                      {link.name}
                    </button>
                  )}
                </li>
              ))}
            </ul>
          </div>
          
          <div>
            <h4 className="text-lg font-semibold mb-6">Support</h4>
            <ul className="space-y-3">
              {supportLinks.map((link, index) => (
                <li key={index}>
                  <a
                    href={link.href}
                    target={link.external ? "_blank" : undefined}
                    rel={link.external ? "noopener noreferrer" : undefined}
                    className="text-gray-400 hover:text-telkom-yellow transition-colors text-sm flex items-center gap-1"
                    data-testid={`footer-support-${index}`}
                  >
                    {link.name}
                    {link.external && <ExternalLink className="w-3 h-3" />}
                  </a>
                </li>
              ))}
            </ul>
          </div>
          
          <div>
            <h4 className="text-lg font-semibold mb-6">Contact Us</h4>
            <ul className="space-y-4">
              <li className="flex items-start gap-3">
                <Phone className="w-4 h-4 text-telkom-orange mt-1 flex-shrink-0" />
                <div>
                  <div className="text-sm">Dial 100 (Merchant Support)</div>
                  <div className="text-sm text-gray-400">020 2221000 (Other)</div>
                </div>
              </li>
              <li className="flex items-start gap-3">
                <Mail className="w-4 h-4 text-telkom-orange mt-1 flex-shrink-0" />
                <div>
                  <a href="mailto:CustomerCare@telkom.co.ke" className="text-sm hover:text-telkom-yellow transition-colors">
                    CustomerCare@telkom.co.ke
                  </a>
                </div>
              </li>
              <li className="flex items-start gap-3">
                <MapPin className="w-4 h-4 text-telkom-orange mt-1 flex-shrink-0" />
                <div>
                  <div className="text-sm">Telkom Plaza</div>
                  <div className="text-sm text-gray-400">Ralph Bunche Road, Nairobi</div>
                </div>
              </li>
            </ul>
            
            <div className="mt-6 pt-6 border-t border-gray-800">
              <div className="text-sm text-gray-400 mb-3">Follow Telkom Kenya</div>
              <div className="flex gap-4">
                <a 
                  href="https://www.facebook.com/TelkomKenya" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="w-10 h-10 bg-gray-800 hover:bg-[#1877F2] rounded-full flex items-center justify-center transition-colors"
                  data-testid="footer-facebook"
                  title="Facebook"
                >
                  <SiFacebook className="w-5 h-5" />
                </a>
                <a 
                  href="https://www.instagram.com/telkom_ke/" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="w-10 h-10 bg-gray-800 hover:bg-gradient-to-br hover:from-[#833AB4] hover:via-[#FD1D1D] hover:to-[#F77737] rounded-full flex items-center justify-center transition-colors"
                  data-testid="footer-instagram"
                  title="Instagram"
                >
                  <SiInstagram className="w-5 h-5" />
                </a>
                <a 
                  href="https://twitter.com/TelkomKenya" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="w-10 h-10 bg-gray-800 hover:bg-black rounded-full flex items-center justify-center transition-colors"
                  data-testid="footer-twitter"
                  title="X (Twitter)"
                >
                  <SiX className="w-4 h-4" />
                </a>
                <a 
                  href="https://www.youtube.com/c/TelkomKenyaOfficial" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="w-10 h-10 bg-gray-800 hover:bg-[#FF0000] rounded-full flex items-center justify-center transition-colors"
                  data-testid="footer-youtube"
                  title="YouTube"
                >
                  <SiYoutube className="w-5 h-5" />
                </a>
              </div>
            </div>
          </div>
        </div>
        
        <div className="mt-12 pt-8 border-t border-gray-800">
          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
            <p className="text-sm text-gray-500">
              © {new Date().getFullYear()} Telkom Kenya - All Rights Reserved
            </p>
            <div className="flex items-center gap-4">
              <a 
                href="/terms" 
                className="text-sm text-gray-500 hover:text-telkom-yellow transition-colors"
                data-testid="footer-terms-link"
              >
                Terms & Conditions
              </a>
              <span className="text-gray-700">|</span>
              <p className="text-sm text-gray-500">
                T-kash Soko — Powered by Blipply technology
              </p>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}
