'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Mail, Clock, ShieldCheck, BookOpen, Video, ArrowRight, ArrowUp, Sparkles, MessageCircle, Heart } from 'lucide-react';
import AuthModal from '@/components/AuthModal';

export default function Footer() {
  const [authModalOpen, setAuthModalOpen] = useState(false);
  const [authModalMode, setAuthModalMode] = useState<'login' | 'signup'>('login');
  const pathname = usePathname();

  const handleNavClick = (sectionId: string, e: React.MouseEvent) => {
    if (pathname === '/') {
      e.preventDefault();
      if (sectionId === 'home') {
        window.scrollTo({ top: 0, behavior: 'smooth' });
      } else {
        const elem = document.getElementById(sectionId);
        if (elem) {
          const yOffset = 40;
          const y = elem.getBoundingClientRect().top + window.pageYOffset + yOffset;
          window.scrollTo({ top: y, behavior: 'smooth' });
        }
      }
    }
  };

  const scrollToTop = () => {
    if (typeof window !== 'undefined') {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  };

  return (
    <footer className="w-full bg-[#080B11] text-white pt-16 pb-10 border-t border-gray-800/80 relative overflow-hidden">
      {/* Background Subtle Yellow Ambient Glow */}
      <div className="absolute top-0 left-1/3 w-[500px] h-[500px] bg-[#FECE00]/5 rounded-full blur-3xl pointer-events-none" />

      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-6 relative z-10">

        {/* Call to Action Banner Above Columns */}
        <div className="mb-14 p-8 sm:p-10 rounded-3xl bg-linear-to-r from-amber-500/10 via-[#FECE00]/15 to-amber-500/10 border border-[#FECE00]/30 flex flex-col md:flex-row items-center justify-between gap-6 backdrop-blur-md shadow-xl">
          <div className="space-y-2 text-center md:text-left">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#FECE00] text-black text-[11px] font-black uppercase tracking-wider">
              <Sparkles className="w-3.5 h-3.5" />
              <span>Start Learning Today</span>
            </div>
            <h3 className="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
              Ready to Master German & Pass Your B1 Exam?
            </h3>
            <p className="text-xs sm:text-sm text-gray-300 font-medium max-w-xl">
              Join thousands of students learning German with structured video lessons and instant mobile progress tracking.
            </p>
          </div>

          <Link
            href="/#courses"
            onClick={(e) => handleNavClick('courses', e)}
            className="px-8 py-3.5 rounded-xl bg-[#FECE00] hover:bg-black text-black hover:text-[#FECE00] font-extrabold text-sm uppercase tracking-wider shadow-md hover:shadow-lg transition-all active:scale-95 flex items-center justify-center gap-2 shrink-0 group cursor-pointer"
          >
            <span>Explore Course Catalog</span>
            <ArrowRight className="w-4 h-4 text-black group-hover:text-[#FECE00] transition-colors" />
          </Link>
        </div>

        {/* Navigation Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-10 lg:gap-12 pb-12 border-b border-gray-800/80">

          {/* Brand Info (Cols 1-4) */}
          <div className="lg:col-span-6 space-y-5">
            <Link href="/" className="inline-flex items-center gap-3.5 group">
              <div className="relative w-12 h-12 rounded-2xl bg-[#FECE00] shadow-md flex flex-col justify-between overflow-hidden shrink-0 transition-transform group-hover:scale-105 border border-amber-300">
                <div className="flex-1 flex items-center justify-center pt-0.5">
                  <span className="text-black font-black text-2xl leading-none">B1</span>
                </div>
                <div className="h-1.5 w-full flex">
                  <div className="w-1/2 h-full bg-black"></div>
                  <div className="w-1/2 h-full bg-[#DC2626]"></div>
                </div>
              </div>
              <span className="font-extrabold text-2xl tracking-tight text-white group-hover:text-[#FECE00] transition-colors">
                ApkaGermanSchool
              </span>
            </Link>

            <p className="text-xs sm:text-sm text-gray-400 font-medium leading-relaxed max-w-sm">
              Dedicated to empowering students worldwide with structured German language courses, recorded modules, and comprehensive B1 exam preparation.
            </p>

            {/* Social & Channel Badges */}
            <div className="pt-2 flex items-center gap-3">
              {/* <a
                href="https://youtube.com"
                target="_blank"
                rel="noopener noreferrer"
                className="w-10 h-10 rounded-xl bg-gray-800/90 hover:bg-[#DC2626] text-gray-300 hover:text-white flex items-center justify-center transition-all shadow-xs border border-gray-700/60 group"
                aria-label="YouTube Channel"
              >
                <Video className="w-5 h-5 transition-transform group-hover:scale-110" />
              </a>
              <a
                href="https://whatsapp.com"
                target="_blank"
                rel="noopener noreferrer"
                className="w-10 h-10 rounded-xl bg-gray-800/90 hover:bg-emerald-600 text-gray-300 hover:text-white flex items-center justify-center transition-all shadow-xs border border-gray-700/60 group"
                aria-label="WhatsApp Community"
              >
                <MessageCircle className="w-5 h-5 transition-transform group-hover:scale-110" />
              </a> */}
              <Link
                href="/#courses"
                onClick={(e) => handleNavClick('courses', e)}
                className="w-10 h-10 rounded-xl bg-gray-800/90 hover:bg-[#FECE00] text-gray-300 hover:text-black flex items-center justify-center transition-all shadow-xs border border-gray-700/60 group"
                aria-label="Courses Catalog"
              >
                <BookOpen className="w-5 h-5 transition-transform group-hover:scale-110" />
              </Link>
            </div>
          </div>

          {/* Quick Links (Cols 5-7) */}
          <div className="lg:col-span-4 space-y-4">
            <h4 className="font-extrabold text-xs uppercase tracking-widest text-[#FECE00]">
              Quick Navigation
            </h4>
            <ul className="space-y-3 text-xs sm:text-sm text-gray-300 font-medium">
              <li>
                <Link href="/" onClick={(e) => handleNavClick('home', e)} className="hover:text-[#FECE00] transition-all flex items-center gap-2 group hover:translate-x-1">
                  <span className="w-1.5 h-1.5 rounded-full bg-[#FECE00] group-hover:w-2.5 transition-all" />
                  <span>Home Page</span>
                </Link>
              </li>
              <li>
                <Link href="/#courses" onClick={(e) => handleNavClick('courses', e)} className="hover:text-[#FECE00] transition-all flex items-center gap-2 group hover:translate-x-1">
                  <span className="w-1.5 h-1.5 rounded-full bg-[#FECE00] group-hover:w-2.5 transition-all" />
                  <span>German Course Modules</span>
                </Link>
              </li>
              <li>
                <Link href="/#about" onClick={(e) => handleNavClick('about', e)} className="hover:text-[#FECE00] transition-all flex items-center gap-2 group hover:translate-x-1">
                  <span className="w-1.5 h-1.5 rounded-full bg-[#FECE00] group-hover:w-2.5 transition-all" />
                  <span>About Mobile App</span>
                </Link>
              </li>
              <li>
                <Link href="/#contact" onClick={(e) => handleNavClick('contact', e)} className="hover:text-[#FECE00] transition-all flex items-center gap-2 group hover:translate-x-1">
                  <span className="w-1.5 h-1.5 rounded-full bg-[#FECE00] group-hover:w-2.5 transition-all" />
                  <span>Contact & Support</span>
                </Link>
              </li>
            </ul>
          </div>

          {/* Student Portal & Legal (Cols 8-9) */}
          <div className="lg:col-span-2 space-y-4">
            <h4 className="font-extrabold text-xs uppercase tracking-widest text-[#FECE00]">
              Student Portal
            </h4>
            <ul className="space-y-3 text-xs sm:text-sm text-gray-300 font-medium">
              <li>
                <button
                  onClick={() => { setAuthModalMode('login'); setAuthModalOpen(true); }}
                  className="bg-transparent text-gray-300 hover:text-[#FECE00] transition-all flex items-center gap-1.5 hover:translate-x-1 outline-none text-left w-full"
                >
                  <span>Student Login</span>
                  <ArrowRight className="w-3.5 h-3.5 text-[#FECE00]" />
                </button>
              </li>
              <li>
                <button
                  onClick={() => { setAuthModalMode('signup'); setAuthModalOpen(true); }}
                  className="bg-transparent text-gray-300 hover:text-[#FECE00] transition-all flex items-center gap-1.5 hover:translate-x-1 outline-none text-left w-full"
                >
                  <span>Register Account</span>
                </button>
              </li>
              <li>
                <Link href="/privacy-policy" className="hover:text-[#FECE00] transition-all hover:translate-x-1 block">
                  Privacy Policy
                </Link>
              </li>
              <li>
                <Link href="/terms-conditions" className="hover:text-[#FECE00] transition-all hover:translate-x-1 block">
                  Terms & Conditions
                </Link>
              </li>
            </ul>
          </div>

          {/* Support Info Card (Cols 10-12) */}
          {/* <div className="lg:col-span-3 space-y-4">
            <h4 className="font-extrabold text-xs uppercase tracking-widest text-[#FECE00]">
              Direct Assistance
            </h4>

            <div className="p-5 rounded-2xl bg-gray-900/90 border border-gray-800 space-y-3 shadow-lg">
              <div className="flex items-start gap-3 text-xs text-gray-200 font-medium">
                <Mail className="w-4 h-4 text-[#FECE00] shrink-0 mt-0.5" />
                <span className="break-all font-semibold">support@apkagermanschool.com</span>
              </div>

              <div className="flex items-start gap-3 text-xs text-gray-400 font-medium">
                <Clock className="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" />
                <span>Mon - Fri: 09:00 - 18:00 CET</span>
              </div>

              <div className="flex items-start gap-3 text-xs text-gray-400 font-medium">
                <ShieldCheck className="w-4 h-4 text-blue-400 shrink-0 mt-0.5" />
                <span>Verified B1 Exam Prep Partner</span>
              </div>
            </div>
          </div> */}

        </div>

        {/* Bottom Bar */}
        <div className="pt-8 flex flex-col sm:flex-row items-center justify-between text-xs text-gray-400 gap-4">
          <p className="flex items-center gap-1 text-center sm:text-left">
            <span>© {new Date().getFullYear()} Apka German School. Crafted for German Language Mastery.</span>
          </p>

          <div className="flex items-center gap-6 font-medium">
            <button
              onClick={scrollToTop}
              className="p-2 rounded-xl bg-gray-800 hover:bg-[#FECE00] text-gray-300 hover:text-black transition-all flex items-center gap-1.5 cursor-pointer font-bold"
              aria-label="Scroll back to top"
            >
              <span>Back to Top</span>
              <ArrowUp className="w-3.5 h-3.5" />
            </button>
          </div>
        </div>

      </div>
      {/* Auth Modal Component */}
      <AuthModal
        isOpen={authModalOpen}
        onClose={() => setAuthModalOpen(false)}
        initialMode={authModalMode}
      />
    </footer>
  );
}