import { Facebook, X, Linkedin, Instagram, User } from "lucide-react";
import { ImageWithFallback } from './figma/ImageWithFallback';
import { navigateTo } from './Router';
import klcLogo from 'figma:asset/e98caa8afd8d11246bbff1dde75bbaae6f6a0894.png';

export function Footer() {
  return (
    <footer 
      className="relative py-16"
      style={{ 
        backgroundColor: 'var(--color-brand-primary)',
        color: 'white'
      }}
    >
      {/* Main Footer Content */}
      <div className="max-w-7xl mx-auto section-margin-x">
        <div className="flex flex-col lg:flex-row lg:justify-between lg:items-start gap-12 lg:gap-8">
          
          {/* Logo and Description Column */}
          <div className="lg:flex-shrink-0 lg:w-80">
            {/* Logo */}
            <div className="flex items-center mb-6">
              <img 
                src={klcLogo}
                alt="Kautilya Leadership Centre" 
                className="h-16 w-auto object-contain"
                style={{ filter: 'brightness(0) invert(1)' }}
              />
            </div>

            {/* Company Description */}
            <p 
              className="text-sm leading-relaxed mb-8"
              style={{ color: 'rgba(255, 255, 255, 0.85)' }}
            >
              Empowering leaders with transformative development opportunities for achieving excellence, growth, and lasting impact.
            </p>



            {/* Social Media Icons */}
            <div className="flex space-x-4">
              {[
                { icon: X, label: 'X' },
                { icon: Facebook, label: 'Facebook' },
                { icon: Linkedin, label: 'LinkedIn' },
                { icon: Instagram, label: 'Instagram' }
              ].map(({ icon: Icon, label }) => (
                <a
                  key={label}
                  href="#"
                  className="w-8 h-8 rounded-full flex items-center justify-center transition-all duration-300 group"
                  style={{ backgroundColor: 'rgba(192, 192, 192, 0.1)' }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.backgroundColor = 'var(--color-brand-accent)';
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.backgroundColor = 'rgba(192, 192, 192, 0.1)';
                  }}
                  aria-label={label}
                >
                  <Icon 
                    className="w-4 h-4 transition-colors duration-300"
                    style={{ color: 'rgba(255, 255, 255, 0.85)' }}
                    onMouseEnter={(e) => {
                      e.currentTarget.style.color = 'var(--color-brand-black)';
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.color = 'rgba(255, 255, 255, 0.85)';
                    }}
                  />
                </a>
              ))}
            </div>
          </div>

          {/* Services */}
          <div className="lg:w-auto lg:flex-shrink-0">
            <h4 
              className="font-semibold mb-6 text-sm"
              style={{ color: 'white' }}
            >
              Services
            </h4>
            <div className="space-y-3">
              {[
                { text: 'Leadership Development', href: '/services/leadership-development', badge: null },
                { text: 'Executive Coaching', href: '/services/executive-coaching', badge: null },
                { text: 'Management Development', href: '/services/management-development', badge: null },
                { text: 'Consulting Services', href: '/services/consulting', badge: null },
                { text: 'Culture & Competence', href: '/services/culture-competence', badge: null },
                { text: 'Learning Facility', href: '/services/learning-facility', badge: 'Popular' }
              ].map((item) => (
                <div key={item.text} className="flex items-center gap-2">
                  <button
                    onClick={() => navigateTo(item.href)}
                    className="text-sm transition-colors duration-300 cursor-pointer text-left"
                    style={{ color: 'rgba(255, 255, 255, 0.85)' }}
                    onMouseEnter={(e) => {
                      e.currentTarget.style.color = 'white';
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.color = 'rgba(255, 255, 255, 0.85)';
                    }}
                  >
                    {item.text}
                  </button>
                  {item.badge && (
                    <span 
                      className="px-2 py-0.5 text-xs rounded"
                      style={{ 
                        backgroundColor: 'var(--color-brand-accent)',
                        color: 'var(--color-brand-black)'
                      }}
                    >
                      {item.badge}
                    </span>
                  )}
                </div>
              ))}
            </div>
          </div>

          {/* Company */}
          <div className="lg:w-auto lg:flex-shrink-0">
            <h4 
              className="font-semibold mb-6 text-sm"
              style={{ color: 'white' }}
            >
              About Us
            </h4>
            <div className="space-y-3">
              {[
                { text: 'Our vision', href: '/about/our-vision' },
                { text: 'Our Impact', href: '/about/our-impact' },
                { text: 'Our Expertise', href: '/about/our-expertise' }
              ].map((link) => (
                <button
                  key={link.text}
                  onClick={() => navigateTo(link.href)}
                  className="block text-sm transition-colors duration-300 cursor-pointer text-left"
                  style={{ color: 'rgba(255, 255, 255, 0.85)' }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.color = 'white';
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.color = 'rgba(255, 255, 255, 0.85)';
                  }}
                >
                  {link.text}
                </button>
              ))}
            </div>

          </div>

          {/* Explore */}
          <div className="lg:w-auto lg:flex-shrink-0">
            <h4 
              className="font-semibold mb-6 text-sm"
              style={{ color: 'white' }}
            >
              Explore
            </h4>
            <div className="space-y-3">
              {[
                { text: 'Learning facility', href: '/services/learning-facility' },
                { text: 'Online Courses', href: '/learning-online' },
                { text: 'Contact Us', href: '/contact' }
              ].map((link) => (
                <button
                  key={link.text}
                  onClick={() => navigateTo(link.href)}
                  className="block text-sm transition-colors duration-300 cursor-pointer text-left"
                  style={{ color: 'rgba(255, 255, 255, 0.85)' }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.color = 'white';
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.color = 'rgba(255, 255, 255, 0.85)';
                  }}
                >
                  {link.text}
                </button>
              ))}
            </div>
          </div>

          {/* Resources */}
          <div className="lg:w-auto lg:flex-shrink-0">
            <h4 
              className="font-semibold mb-6 text-sm"
              style={{ color: 'white' }}
            >
              Resources
            </h4>
            <div className="space-y-3">
              {[
                { text: 'Blog article', href: '/learning/articles' },
                { text: 'Webcast', href: '/learning/webcast' }
              ].map((link) => (
                <button
                  key={link.text}
                  onClick={() => navigateTo(link.href)}
                  className="block text-sm transition-colors duration-300 cursor-pointer text-left"
                  style={{ color: 'rgba(255, 255, 255, 0.85)' }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.color = 'white';
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.color = 'rgba(255, 255, 255, 0.85)';
                  }}
                >
                  {link.text}
                </button>
              ))}
              
              {/* Back To Top Button - Kept in Resources section */}
              <div className="pt-12">
                <button
                  onClick={() => {
                    window.scrollTo({
                      top: 0,
                      behavior: 'smooth'
                    });
                  }}
                  className="flex items-center gap-2 text-sm transition-all duration-300 group"
                  style={{ color: 'rgba(255, 255, 255, 0.85)' }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.color = 'var(--color-brand-accent)';
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.color = 'rgba(255, 255, 255, 0.85)';
                  }}
                  aria-label="Back to top"
                >
                  <svg 
                    className="w-4 h-4 transition-transform duration-300 group-hover:-translate-y-1" 
                    fill="none" 
                    stroke="currentColor" 
                    viewBox="0 0 24 24"
                  >
                    <path 
                      strokeLinecap="round" 
                      strokeLinejoin="round" 
                      strokeWidth={2} 
                      d="M5 10l7-7m0 0l7 7m-7-7v18" 
                    />
                  </svg>
                  <span className="transition-colors duration-300">
                    Back To Top
                  </span>
                </button>
              </div>
            </div>
          </div>


        </div>

        {/* Divider */}
        <div 
          className="w-full h-px my-12"
          style={{ backgroundColor: 'rgba(192, 192, 192, 0.2)' }}
        />

        {/* Bottom Footer */}
        <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center space-y-6 lg:space-y-0">
          
          {/* Copyright and Legal Links */}
          <div className="flex flex-col lg:flex-row lg:items-center space-y-4 lg:space-y-0 lg:space-x-8">
            <p 
              className="text-sm"
              style={{ color: 'rgba(255, 255, 255, 0.85)' }}
            >
              Copyright 2025 Kautilya Leadership Centre
            </p>
            <div className="flex space-x-6">
              <a
                href="#"
                className="text-sm transition-colors duration-300"
                style={{ color: 'rgba(255, 255, 255, 0.85)' }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.color = 'var(--color-brand-accent)';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.color = 'rgba(255, 255, 255, 0.85)';
                }}
              >
                Privacy and Cookie Policy
              </a>
              <button
                onClick={() => navigateTo('/terms')}
                className="text-sm transition-colors duration-300 cursor-pointer text-left"
                style={{ color: 'rgba(255, 255, 255, 0.85)' }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.color = 'var(--color-brand-accent)';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.color = 'rgba(255, 255, 255, 0.85)';
                }}
              >
                Terms of Service
              </button>
            </div>
          </div>

          {/* Contact Info */}
          <div className="text-right">
            <p 
              className="text-sm font-medium"
              style={{ color: 'rgba(255, 255, 255, 0.85)' }}
            >
              Follow Our Leadership Journey
            </p>
            <p 
              className="text-xs"
              style={{ color: 'rgba(255, 255, 255, 0.7)' }}
            >
              Discover leadership excellence with KLC
            </p>
          </div>
        </div>
      </div>
    </footer>
  );
}