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

export function FooterNew() {
    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-16">

                    {/* Logo and Quick Links Column */}
                    <div className="lg:flex-shrink-0 lg:max-w-md">
                        {/* Logo */}
                        <div className="flex items-center mb-8">
                            <img
                                src={klcLogo}
                                alt="Kautilya Leadership Centre"
                                className="h-16 w-auto object-contain"
                                style={{ filter: 'brightness(0) invert(1)' }}
                            />
                        </div>

                        {/* Quick Links Section */}
                        <div className="mb-8">
                            <h3 className="text-subhead-white mb-6 text-[16px]">
                                Quicklinks
                            </h3>

                            {/* Navigation Links */}
                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 mb-8">
                                <button
                                    onClick={() => navigateTo('/')}
                                    className="block text-small-white transition-all duration-300 text-left"
                                    style={{
                                        color: 'white',
                                        opacity: 0.5
                                    }}
                                    onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
                                    onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
                                >
                                    Home
                                </button>
                                <button
                                    onClick={() => navigateTo('/learning/webcast')}
                                    className="block text-small-white transition-all duration-300 text-left"
                                    style={{
                                        color: 'white',
                                        opacity: 0.5
                                    }}
                                    onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
                                    onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
                                >
                                    Webcast
                                </button>
                                <button
                                    onClick={() => navigateTo('/about-us')}
                                    className="block text-small-white transition-all duration-300 text-left"
                                    style={{
                                        color: 'white',
                                        opacity: 0.5
                                    }}
                                    onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
                                    onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
                                >
                                    About Us
                                </button>
                                <button
                                    onClick={() => navigateTo('/learning/articles')}
                                    className="block text-small-white transition-all duration-300 text-left"
                                    style={{
                                        color: 'white',
                                        opacity: 0.5
                                    }}
                                    onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
                                    onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
                                >
                                    Blogs
                                </button>
                                <button
                                    onClick={() => navigateTo('/services')}
                                    className="block text-small-white transition-all duration-300 text-left"
                                    style={{
                                        color: 'white',
                                        opacity: 0.5
                                    }}
                                    onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
                                    onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
                                >
                                    Services
                                </button>
                                <button
                                    onClick={() => navigateTo('/faq')}
                                    className="block text-small-white transition-all duration-300 text-left"
                                    style={{
                                        color: 'white',
                                        opacity: 0.5
                                    }}
                                    onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
                                    onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
                                >
                                    FAQs
                                </button>
                                <button
                                    onClick={() => navigateTo('/learning-facility')}
                                    className="block text-small-white transition-all duration-300 text-left"
                                    style={{
                                        color: 'white',
                                        opacity: 0.5
                                    }}
                                    onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
                                    onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
                                >
                                    Learning facility
                                </button>
                                <button
                                    onClick={() => navigateTo('/learning-online')}
                                    className="block text-small-white transition-all duration-300 text-left"
                                    style={{
                                        color: 'white',
                                        opacity: 0.5
                                    }}
                                    onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
                                    onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
                                >
                                    Online courses
                                </button>
                            </div>
                        </div>

                    </div>

                    {/* DISCOVER LEADERSHIP Column */}
                    <div className="lg:flex-shrink-0 lg:max-w-3xl flex flex-col h-full">
                        {/* Discover Leadership Header */}
                        <h2 className="text-h3-white mb-6 text-[32px] text-[24px]">
                            DISCOVER LEADERSHIP
                        </h2>

                        {/* Company Description */}
                        <p
                            className="text-small-white leading-relaxed mb-6"
                            style={{ color: 'rgba(255, 255, 255, 0.85)' }}
                        >
                            Kautilya Leadership Centre is dedicated to building a world-class organisation, in thought and practice of leadership. We help people gain insights into their leadership orientations and enable them on a journey towards leadership development. This online platform allows a wide range of learning experiences, exposure to leadership thinking and concepts through online tools such as modules, webcasts of leaders, webinars, one-on-one consulting sessions.
                        </p>

                        <p
                            className="text-small-white leading-relaxed mb-6"
                            style={{ color: 'rgba(255, 255, 255, 0.85)' }}
                        >
                            Kautilya Leadership Centre also offers access to Kautilya Leadership Services, which is a learning space developed to discover, deliberate, reflect on one's capabilities and developments. This learning centre built over 2 acres is equipped with world-class facilities to help ease learning and development.
                        </p>

                        {/* Learning Journey Text */}
                        <div className="mb-8">
                            <p
                                className="text-small-white"
                                style={{ color: 'rgba(255, 255, 255, 0.75)' }}
                            >
                                Become Aware   |   Gain Insights   |   Discover Leadership
                            </p>
                        </div>

                        {/* Back To Top Button - Positioned to Bottom Right */}
                        <div className="flex-1 flex justify-end items-end">
                            <button
                                onClick={() => {
                                    window.scrollTo({
                                        top: 0,
                                        behavior: 'smooth'
                                    });
                                }}
                                className="group flex items-center gap-3 px-6 py-3 rounded-lg transition-all duration-300"
                                style={{
                                    backgroundColor: 'var(--color-brand-accent)',
                                    color: 'var(--color-brand-black)'
                                }}
                                aria-label="Back to top"
                            >
                                <ArrowUp className="w-5 h-5 transition-transform duration-300 group-hover:-translate-y-1" />
                                <span className="font-semibold">BACK TO TOP</span>
                            </button>
                        </div>
                    </div>
                </div>

                {/* Bottom Footer */}
                <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center space-y-6 lg:space-y-0 mt-16 pt-8"
                    style={{ borderTop: '1px solid rgba(255, 255, 255, 0.2)' }}>

                    {/* Social Media Icons - Moved from left column */}
                    <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>

                    {/* Copyright - Centered */}
                    <div className="flex-1 flex justify-center lg:absolute lg:left-1/2 lg:transform lg:-translate-x-1/2">
                        <p
                            className="text-body-white text-center"
                            style={{ color: 'rgba(255, 255, 255, 0.85)' }}
                        >
                            Copyright 2025 Kautilya Leadership Centre
                        </p>
                    </div>

                    {/* Legal Links */}
                    <div className="flex flex-col lg:flex-row lg:items-center space-y-2 lg:space-y-0 lg:space-x-8">
                        <button
                            onClick={() => navigateTo('/privacy-policy')}
                            className="text-body-white transition-colors duration-300 hover:text-yellow-300 text-left cursor-pointer"
                            style={{ color: 'rgba(255, 255, 255, 0.85)' }}
                        >
                            Privacy and Cookie Policy
                        </button>
                        <button
                            onClick={() => navigateTo('/term-condition')}
                            className="text-body-white transition-colors duration-300 cursor-pointer text-left hover:text-yellow-300"
                            style={{ color: 'rgba(255, 255, 255, 0.85)' }}
                        >
                            Terms of Service
                        </button>
                    </div>
                </div>
            </div>
        </footer>
    );
}