import React from 'react';
import { Facebook, Instagram, Twitter, Phone, Mail, MapPin, MessageCircle, Music, Globe } from 'lucide-react';
import { Language } from '../types';
import { translations } from '../data';
import Logo from './Logo';

interface FooterProps {
  lang: Language;
}

export default function Footer({ lang }: FooterProps) {
  const t = translations[lang];

  return (
    <footer 
      className="bg-gray-900 text-gray-300 pt-16 pb-8 border-t border-teal-900/40 relative overflow-hidden"
      dir={lang === 'ar' ? 'rtl' : 'ltr'}
    >
      {/* Background traditional geometric pattern opacity element */}
      <div className="absolute inset-0 opacity-[0.02] pointer-events-none bg-[radial-gradient(#d97706_1px,transparent_1px)] [background-size:16px_16px]"></div>

      <div className="max-w-7xl mx-auto px-4 md:px-8 relative z-10">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
          
          {/* Column 1: Academy Brand Info */}
          <div className="space-y-4">
            <div className="bg-white/5 p-2 rounded-xl inline-block">
              <Logo className="h-11" />
            </div>
            <p className="text-xs md:text-sm text-gray-400 leading-relaxed">
              {t.bilingualNotice}
            </p>
            {/* Social handles with icons */}
            <div className="space-y-2 pt-2">
              <h4 className="text-xs font-bold text-amber-500 uppercase tracking-wider font-mono">
                {t.socialMedia}
              </h4>
              <div className="flex gap-3">
                {/* Facebook */}
                <a 
                  href="https://facebook.com/daralfikr" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="bg-gray-800 hover:bg-teal-700 hover:text-white p-2 rounded-lg transition-all text-gray-400"
                  title="Facebook"
                >
                  <Facebook size={16} />
                </a>
                
                {/* WhatsApp */}
                <a 
                  href="https://wa.me/2348134200006" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="bg-gray-800 hover:bg-green-600 hover:text-white p-2 rounded-lg transition-all text-gray-400"
                  title="WhatsApp Chat"
                >
                  <MessageCircle size={16} />
                </a>

                {/* X (formerly Twitter) */}
                <a 
                  href="https://x.com/daralfikr" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="bg-gray-800 hover:bg-teal-550 hover:text-white p-2 rounded-lg transition-all text-gray-400"
                  title="X (Twitter)"
                >
                  <Twitter size={16} />
                </a>

                {/* TikTok (Music icon proxy or similar) */}
                <a 
                  href="https://tiktok.com/@daralfikr" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="bg-gray-800 hover:bg-pink-600 hover:text-white p-2 rounded-lg transition-all text-gray-400"
                  title="TikTok"
                >
                  <Music size={16} />
                </a>

                {/* Instagram */}
                <a 
                  href="https://instagram.com/daralfikr" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="bg-gray-800 hover:bg-amber-600 hover:text-white p-2 rounded-lg transition-all text-gray-400"
                  title="Instagram"
                >
                  <Instagram size={16} />
                </a>
              </div>
            </div>
          </div>

          {/* Column 2: Academics */}
          <div className="space-y-4">
            <h3 className="font-sans font-bold text-sm tracking-widest text-amber-500 uppercase border-b border-gray-850 pb-2">
              {lang === 'en' ? 'Core Curriculums' : 'البرامج الدراسية'}
            </h3>
            <ul className="space-y-2 text-xs md:text-sm text-gray-400">
              <li>
                <a href="#courses" className="hover:text-amber-500 transition-colors">
                  {lang === 'en' ? 'Linguistics & Classic Arabic' : 'اللسانيات واللغة العربية الكلاسيكية'}
                </a>
              </li>
              <li>
                <a href="#courses" className="hover:text-amber-500 transition-colors">
                  {lang === 'en' ? 'Full-Stack Software Engineering' : 'هندسة البرمجيات والويب الكاملة'}
                </a>
              </li>
              <li>
                <a href="#courses" className="hover:text-amber-500 transition-colors">
                  {lang === 'en' ? 'Islamic Finance & Wealth Management' : 'التمويل الإسلامي وإدارة الثروات والأصول'}
                </a>
              </li>
              <li>
                <a href="#courses" className="hover:text-amber-500 transition-colors">
                  {lang === 'en' ? 'Tajweed & Qur’anic Phonetics' : 'أحكام التجويد ومخارج الحروف'}
                </a>
              </li>
              <li>
                <a href="#courses" className="hover:text-amber-500 transition-colors">
                  {lang === 'en' ? 'Modern Data Science & AI' : 'علم البيانات التطبيقي والذكاء الاصطناعي'}
                </a>
              </li>
            </ul>
          </div>

          {/* Column 3: Contact Details (Explicitly requested by user) */}
          <div className="space-y-4 lg:col-span-2">
            <h3 className="font-sans font-bold text-sm tracking-widest text-amber-500 uppercase border-b border-gray-850 pb-2">
              {t.contactUs}
            </h3>
            <div className="space-y-3.5 text-xs md:text-sm text-gray-400">
              <div className="flex items-start gap-3">
                <MapPin size={18} className="text-teal-500 shrink-0 mt-0.5" />
                <div>
                  <span className="font-semibold text-gray-200 block text-[11px] uppercase tracking-wider font-mono">
                    {t.officeAddressLabel}
                  </span>
                  <p className="mt-0.5 leading-relaxed">
                    Zone B, Sagwari-Bwari Rd, Bmuko, Dutse 901101, FCT, Nigeria
                  </p>
                </div>
              </div>

              <div className="flex items-start gap-3">
                <Phone size={18} className="text-teal-500 shrink-0 mt-0.5" />
                <div>
                  <span className="font-semibold text-gray-200 block text-[11px] uppercase tracking-wider font-mono">
                    {t.phoneLabel}
                  </span>
                  <p className="mt-0.5 font-mono text-gray-300">
                    +234 813 420 0006 • +234 902 646 1916
                  </p>
                </div>
              </div>

              <div className="flex items-start gap-3">
                <Mail size={18} className="text-teal-500 shrink-0 mt-0.5" />
                <div>
                  <span className="font-semibold text-gray-200 block text-[11px] uppercase tracking-wider font-mono">
                    {t.emailLabel}
                  </span>
                  <a href="mailto:habuamar36@gmail.com" className="mt-0.5 font-mono text-teal-400 hover:underline block">
                    habuamar36@gmail.com
                  </a>
                </div>
              </div>
            </div>
          </div>

        </div>

        {/* Bottom Bar */}
        <div className="border-t border-gray-850 mt-12 pt-6 text-center md:flex md:justify-between md:items-center text-xs text-gray-500">
          <p className="font-sans">
            © 2026 Dar Al-Fikr International Academy. {lang === 'en' ? 'All rights reserved.' : 'جميع الحقوق محفوظة.'}
          </p>
          <div className="flex items-center justify-center gap-1.5 mt-3 md:mt-0 text-[10px] uppercase font-mono">
            <Globe size={12} className="text-teal-600" />
            <span>Hosted for domain: <strong className="text-gray-400">daralfikr.sch.ng</strong></span>
          </div>
        </div>
      </div>
    </footer>
  );
}
