import Link from 'next/link';
import { Mail, MapPin, Instagram, Youtube, Linkedin } from 'lucide-react';

// Handles supplied by UEF in "UEF Website changes.docx" (19 Aug 2026), section 1.
// The LinkedIn entry in that document was an /admin/dashboard/ URL, which only
// resolves for page administrators — the public company URL is used instead.
const SOCIALS = [
  { label: 'Instagram', handle: '@united.economic.forum', href: 'https://www.instagram.com/united.economic.forum/', Icon: Instagram },
  { label: 'YouTube', handle: '@UNITEDECONOMICFORUM', href: 'https://www.youtube.com/@UNITEDECONOMICFORUM', Icon: Youtube },
  { label: 'LinkedIn', handle: 'United Economic Forum', href: 'https://www.linkedin.com/company/86574815/', Icon: Linkedin },
];

export default function Footer() {
  return (
    <footer className="bg-slate-900 text-slate-300 py-16 border-t-[8px] border-primary relative overflow-hidden">
      <div className="container mx-auto px-6 md:px-12 grid grid-cols-1 md:grid-cols-4 gap-12 relative z-10">
        <div className="md:col-span-2 space-y-6">
          <h2 className="text-white text-2xl font-serif">United Economic Forum</h2>
          <p className="max-w-md text-slate-400 leading-relaxed">
            A platform. A purpose. A promise. Building India's most inclusive chamber of commerce since 1979.
          </p>

          <div className="flex flex-wrap gap-3">
            {SOCIALS.map(({ label, handle, href, Icon }) => (
              <a
                key={label}
                href={href}
                target="_blank"
                rel="noopener noreferrer"
                aria-label={`${label} — ${handle}`}
                title={handle}
                className="w-11 h-11 rounded-full border border-slate-700 flex items-center justify-center text-slate-300 transition-colors hover:border-primary hover:text-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
              >
                <Icon className="w-5 h-5" aria-hidden="true" />
              </a>
            ))}
          </div>
        </div>

        <div>
          <h3 className="text-white text-lg font-serif mb-6">Quick Links</h3>
          <ul className="space-y-3">
            <li><Link href="/about"><span className="hover:text-primary transition-colors cursor-pointer">About</span></Link></li>
            <li><Link href="/uef-angels"><span className="hover:text-primary transition-colors cursor-pointer">UEF Angels</span></Link></li>
            <li><Link href="/youth-wing"><span className="hover:text-primary transition-colors cursor-pointer">Youth Wing</span></Link></li>
            <li><Link href="/events"><span className="hover:text-primary transition-colors cursor-pointer">Events</span></Link></li>
            <li><Link href="/institutions"><span className="hover:text-primary transition-colors cursor-pointer">Institutions</span></Link></li>
            <li><Link href="/membership"><span className="hover:text-primary transition-colors cursor-pointer">Membership</span></Link></li>
            <li><Link href="/contact"><span className="hover:text-primary transition-colors cursor-pointer">Contact</span></Link></li>
          </ul>
        </div>

        <div>
          <h3 className="text-white text-lg font-serif mb-6">UEF</h3>
          <ul className="space-y-4 text-sm">
            <li className="flex items-start gap-3">
              <MapPin className="text-primary shrink-0 w-5 h-5 mt-0.5" />
              <span>No 4, Buhari Towers, 7th Floor, Moores Road, Chennai - 600 006, Tamil Nadu, India</span>
            </li>
            <li className="flex items-center gap-3">
              <Mail className="text-primary shrink-0 w-5 h-5" />
              <span>unitedeconomicforum@gmail.com</span>
            </li>
            <li className="flex items-center gap-3">
              <Mail className="text-primary shrink-0 w-5 h-5" />
              <span>info@unitedeconomicforum.com</span>
            </li>
          </ul>
        </div>
      </div>

      <div className="container mx-auto px-6 md:px-12 mt-16 pt-8 border-t border-slate-800 text-sm text-center md:text-left flex flex-col md:flex-row justify-between items-center gap-4 relative z-10">
        <p>© 2026 UEF Chamber of Commerce · All Rights Reserved · EST. 1979 · CHENNAI · INDIA</p>
        <div className="flex items-center gap-5 shrink-0">
          <Link href="/privacy" className="hover:text-primary transition-colors">
            Privacy Policy
          </Link>
          <Link href="/terms" className="hover:text-primary transition-colors">
            Terms of Use
          </Link>
        </div>
      </div>
    </footer>
  );
}