import React from 'react';
import { Mail, Phone, MapPin, MessageSquare, ArrowUpRight, ShieldCheck, HeartHandshake } from 'lucide-react';

interface FooterProps {
  onNavigate: (path: string) => void;
  onOpenEnquiry: (mode?: 'learner' | 'guidance' | 'corporate' | 'partnership' | 'advisory') => void;
}

export function Footer({ onNavigate, onOpenEnquiry }: FooterProps) {
  const handleNav = (path: string) => {
    onNavigate(path);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <footer className="bg-[#0B4035] text-stone-300 border-t border-stone-800">
      {/* Upper Footer Action Band */}
      <div className="bg-[#072C24] py-8 border-b border-white/10 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6 text-center md:text-left">
          <div>
            <span className="text-[#D5E64D] text-xs font-semibold tracking-wider uppercase block">
              Start Your Learning Journey
            </span>
            <h3 className="text-xl sm:text-2xl font-serif font-bold text-white mt-1">
              Building skills. Advancing careers. Strengthening workplaces.
            </h3>
            <p className="text-xs sm:text-sm text-stone-300 mt-1 max-w-xl">
              All 22 programmes are available and delivered fully online through Zoom, Google Meet and WhatsApp.
            </p>
          </div>

          <div className="flex flex-wrap items-center justify-center gap-3">
            <button
              onClick={() => onOpenEnquiry('guidance')}
              className="px-5 py-2.5 rounded-lg bg-[#D5E64D] text-[#0B4035] font-bold text-xs hover:bg-[#C2D33C] transition-all shadow-xs"
            >
              Get Course Guidance
            </button>
            <button
              onClick={() => onOpenEnquiry('corporate')}
              className="px-5 py-2.5 rounded-lg bg-white/10 text-white hover:bg-white/20 font-semibold text-xs border border-white/20 transition-all"
            >
              Discuss Team Training
            </button>
          </div>
        </div>
      </div>

      {/* Main Footer Links & Info */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10">
          {/* Col 1 & 2: Brand & Identity */}
          <div className="lg:col-span-2 space-y-4">
            <div className="flex items-center gap-3">
              <img
                src="/assets/aistudio/Transparent_green_logo_with_citron_ribbon_a9ac7fbd.png"
                alt="PANIA Digital Academy"
                className="h-12 w-auto object-contain brightness-110"
              />
            </div>
            
            <p className="text-xs text-stone-300 leading-relaxed max-w-sm">
              <strong className="text-white">PANIA</strong> is a Swahili word meaning to be determined to accomplish a purpose. Founded in 2026, we connect digital training with practical workplace capability, mentorship, and career growth.
            </p>

            <div className="pt-2 space-y-2 text-xs">
              <div className="flex items-center gap-2.5 text-stone-300">
                <MapPin className="w-4 h-4 text-[#D5E64D] shrink-0" />
                <span>Nairobi, Kenya · Fully Online Delivery</span>
              </div>
              <div className="flex items-center gap-2.5 text-stone-300">
                <Mail className="w-4 h-4 text-[#D5E64D] shrink-0" />
                <a href="mailto:contact@pania.com" className="hover:text-white transition-colors">
                  contact@pania.com
                </a>
              </div>
              <div className="flex items-center gap-2.5 text-stone-300">
                <MessageSquare className="w-4 h-4 text-[#25D366] shrink-0" />
                <a
                  href="https://wa.me/254101936893?text=Hello%20PANIA%20Digital%20Academy%2C%20I%20have%20an%20enquiry."
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-white transition-colors"
                >
                  WhatsApp: +254 101 936 893
                </a>
              </div>
            </div>
          </div>

          {/* Col 3: Programme Portfolio */}
          <div>
            <h4 className="text-white text-xs font-bold uppercase tracking-wider mb-4 border-b border-white/10 pb-1.5">
              Programme Portfolio
            </h4>
            <ul className="space-y-2 text-xs">
              <li>
                <button onClick={() => handleNav('/programmes')} className="hover:text-[#D5E64D] transition-colors text-left">
                  Browse All 22 Programmes
                </button>
              </li>
              <li>
                <button onClick={() => handleNav('/programmes?category=Cloud+Computing')} className="hover:text-[#D5E64D] transition-colors text-left">
                  Cloud Computing (AWS, GCP, Azure)
                </button>
              </li>
              <li>
                <button onClick={() => handleNav('/programmes?category=Artificial+Intelligence')} className="hover:text-[#D5E64D] transition-colors text-left">
                  Artificial Intelligence
                </button>
              </li>
              <li>
                <button onClick={() => handleNav('/programmes?category=Cybersecurity')} className="hover:text-[#D5E64D] transition-colors text-left">
                  Cybersecurity Courses
                </button>
              </li>
              <li>
                <button onClick={() => handleNav('/programmes?category=Data+Science')} className="hover:text-[#D5E64D] transition-colors text-left">
                  Data Science
                </button>
              </li>
              <li>
                <button onClick={() => handleNav('/programmes?category=Data+Annotation')} className="hover:text-[#D5E64D] transition-colors text-left">
                  Data Annotation (Image, Audio, 3D)
                </button>
              </li>
              <li>
                <button onClick={() => handleNav('/programmes?category=Virtual+Assistance')} className="hover:text-[#D5E64D] transition-colors text-left">
                  Virtual Assistant Training (10 Modules)
                </button>
              </li>
              <li>
                <button onClick={() => handleNav('/programmes/online-work-readiness')} className="hover:text-[#D5E64D] transition-colors text-left">
                  Online Work Readiness
                </button>
              </li>
            </ul>
          </div>

          {/* Col 4: Organisations & Services */}
          <div>
            <h4 className="text-white text-xs font-bold uppercase tracking-wider mb-4 border-b border-white/10 pb-1.5">
              Organisations & Services
            </h4>
            <ul className="space-y-2 text-xs">
              <li>
                <button onClick={() => handleNav('/organisations')} className="hover:text-[#D5E64D] transition-colors text-left">
                  Corporate Training Overview
                </button>
              </li>
              <li>
                <button onClick={() => handleNav('/organisations#aws-workshops')} className="hover:text-[#D5E64D] transition-colors text-left">
                  AWS Corporate Workshops (9 Topics)
                </button>
              </li>
              <li>
                <button onClick={() => handleNav('/organisations#partnerships')} className="hover:text-[#D5E64D] transition-colors text-left">
                  Cohort & Partner Programmes
                </button>
              </li>
              <li>
                <button onClick={() => handleNav('/services')} className="hover:text-[#D5E64D] transition-colors text-left">
                  Six Core Service Lines
                </button>
              </li>
              <li>
                <button onClick={() => handleNav('/career-support')} className="hover:text-[#D5E64D] transition-colors text-left">
                  Career Guidance & Mentorship
                </button>
              </li>
              <li>
                <button onClick={() => handleNav('/learning')} className="hover:text-[#D5E64D] transition-colors text-left">
                  Learning Delivery (Zoom/Meet/WA)
                </button>
              </li>
              <li>
                <button onClick={() => handleNav('/learner-access')} className="hover:text-[#D5E64D] transition-colors text-left">
                  Enrolled Learner Access Portal
                </button>
              </li>
            </ul>
          </div>

          {/* Col 5: Institution & Policies */}
          <div>
            <h4 className="text-white text-xs font-bold uppercase tracking-wider mb-4 border-b border-white/10 pb-1.5">
              About & Governance
            </h4>
            <ul className="space-y-2 text-xs">
              <li>
                <button onClick={() => handleNav('/about')} className="hover:text-[#D5E64D] transition-colors text-left">
                  About PANIA & Values
                </button>
              </li>
              <li>
                <button onClick={() => handleNav('/about#founder')} className="hover:text-[#D5E64D] transition-colors text-left">
                  Founder & CEO James Omego
                </button>
              </li>
              <li>
                <button onClick={() => handleNav('/contact')} className="hover:text-[#D5E64D] transition-colors text-left">
                  Contact & Enquiries
                </button>
              </li>
              <li>
                <button onClick={() => handleNav('/privacy')} className="hover:text-[#D5E64D] transition-colors text-left">
                  Privacy Notice
                </button>
              </li>
              <li>
                <button onClick={() => handleNav('/terms')} className="hover:text-[#D5E64D] transition-colors text-left">
                  Terms of Service
                </button>
              </li>
            </ul>

            <div className="mt-5 p-3 rounded-lg bg-black/20 border border-white/5 text-[11px] text-stone-400 space-y-1">
              <div className="flex items-center gap-1.5 text-stone-300 font-semibold">
                <ShieldCheck className="w-3.5 h-3.5 text-[#D5E64D]" />
                <span>Ethical Integrity</span>
              </div>
              <p>
                PANIA prepares candidates for official vendor exams; independent certification bodies issue formal awards. No employment or income guarantees are made.
              </p>
            </div>
          </div>
        </div>

        {/* Lower Footer Bottom Bar */}
        <div className="mt-12 pt-6 border-t border-white/10 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-stone-400">
          <p>© 2026 PANIA Digital Academy. All rights reserved. Nairobi, Kenya.</p>
          <div className="flex items-center gap-6">
            <button onClick={() => handleNav('/privacy')} className="hover:text-stone-200 transition-colors">
              Privacy
            </button>
            <button onClick={() => handleNav('/terms')} className="hover:text-stone-200 transition-colors">
              Terms
            </button>
            <a href="/sitemap.xml" target="_blank" rel="noopener noreferrer" className="hover:text-stone-200 transition-colors">
              Sitemap
            </a>
            <button onClick={() => handleNav('/learning')} className="hover:text-stone-200 transition-colors">
              Delivery Channels
            </button>
            <button onClick={() => handleNav('/learner-access')} className="text-[#D5E64D] hover:underline">
              LMS Access
            </button>
          </div>
        </div>
      </div>
    </footer>
  );
}