import { Zap, Instagram, Youtube, MessageCircle, Send, Mail } from 'lucide-react';
import { contactInfo } from '../data/content';

interface FooterProps {
  navigateTo?: (page: string) => void;
}

const footerLinks = {
  products: [
    { name: 'Canva Pro Free', page: 'products' },
    { name: 'ChatGPT Plus', page: 'products' },
    { name: 'Design Bundle', page: 'products' },
  ],
  resources: [
    { name: 'Blog', page: 'blog' },
    { name: 'Guides', page: 'guides' },
    { name: 'FAQ', page: 'contact' },
  ],
  company: [
    { name: 'About Us', page: 'about' },
    { name: 'Contact', page: 'contact' },
    { name: 'Privacy Policy', page: '#' },
  ],
};

const socialLinks = [
  { name: 'WhatsApp', icon: MessageCircle, href: contactInfo.whatsappLink },
  { name: 'Telegram', icon: Send, href: contactInfo.telegramLink },
  { name: 'Instagram', icon: Instagram, href: contactInfo.instagram },
  { name: 'YouTube', icon: Youtube, href: contactInfo.youtube },
  { name: 'Email', icon: Mail, href: contactInfo.emailLink },
];

export default function Footer({ navigateTo }: FooterProps) {
  const handleClick = (page: string) => {
    if (navigateTo && page !== '#') {
      navigateTo(page);
    }
  };

  return (
    <footer className="bg-dark-secondary border-t border-white/5">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 lg:gap-8">
          {/* Brand */}
          <div className="lg:col-span-2">
            <button 
              onClick={() => handleClick('home')}
              className="flex items-center gap-2 mb-4"
            >
              <div className="w-10 h-10 rounded-xl bg-neon flex items-center justify-center">
                <Zap className="w-6 h-6 text-dark" />
              </div>
              <span className="text-xl font-display font-bold">
                MFA <span className="text-neon">TOOLS</span>
              </span>
            </button>
            <p className="text-gray-400 text-sm leading-relaxed max-w-sm mb-6">
              Premium tools for creators. Without the premium price. Join over 1,000,000 students and educators worldwide.
            </p>
            {/* Social Links */}
            <div className="flex items-center gap-3">
              {socialLinks.map((social) => (
                <a
                  key={social.name}
                  href={social.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center text-gray-400 hover:text-neon hover:bg-neon/10 transition-all"
                  aria-label={social.name}
                >
                  <social.icon className="w-5 h-5" />
                </a>
              ))}
            </div>
          </div>

          {/* Products */}
          <div>
            <h3 className="text-white font-semibold mb-4">Products</h3>
            <ul className="space-y-3">
              {footerLinks.products.map((link) => (
                <li key={link.name}>
                  <button
                    onClick={() => handleClick(link.page)}
                    className="text-gray-400 text-sm hover:text-neon transition-colors"
                  >
                    {link.name}
                  </button>
                </li>
              ))}
            </ul>
          </div>

          {/* Resources */}
          <div>
            <h3 className="text-white font-semibold mb-4">Resources</h3>
            <ul className="space-y-3">
              {footerLinks.resources.map((link) => (
                <li key={link.name}>
                  <button
                    onClick={() => handleClick(link.page)}
                    className="text-gray-400 text-sm hover:text-neon transition-colors"
                  >
                    {link.name}
                  </button>
                </li>
              ))}
            </ul>
          </div>

          {/* Company */}
          <div>
            <h3 className="text-white font-semibold mb-4">Company</h3>
            <ul className="space-y-3">
              {footerLinks.company.map((link) => (
                <li key={link.name}>
                  <button
                    onClick={() => handleClick(link.page)}
                    className="text-gray-400 text-sm hover:text-neon transition-colors"
                  >
                    {link.name}
                  </button>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="mt-12 pt-8 border-t border-white/5 flex flex-col md:flex-row items-center justify-between gap-4">
          <p className="text-gray-500 text-sm text-center md:text-left">
            © 2026 MFA Tools. All rights reserved.
          </p>
          <p className="text-gray-500 text-sm text-center md:text-right">
            Independent educational initiative. Not affiliated with Canva.
          </p>
        </div>
      </div>
    </footer>
  );
}