import { useState, useEffect, useRef } from "react";
import { motion } from "motion/react";
import {
    Users,
    Settings,
    User,
    Globe,
    MessageSquare,
    GraduationCap,
    ArrowRight
} from "lucide-react";
import { BrandedTag } from "./about/BrandedTag";
import { PrimaryCTAButton } from "./PrimaryCTAButton";
import { navigateTo } from "./Router";

// Services data
const recognitionItems = [
    {
        id: 1,
        title: "Leadership Development",
        description: "Comprehensive programs designed to cultivate strategic thinking and emotional intelligence. Develop capabilities that drive organizational success through authentic leadership practices.",
        icon: <Users size={28} />,
        badge: "CORE PROGRAM",
        badgeColor: "#F8C301"
    },
    {
        id: 2,
        title: "Management Development",
        description: "Essential skills training for first-time and experienced managers seeking growth. Focus on communication, delegation, and performance management excellence.",
        icon: <Settings size={28} />,
        badge: "POPULAR",
        badgeColor: "#04045B"
    },
    {
        id: 3,
        title: "Culture Competence",
        description: "Build cultural awareness and inclusive practices that enhance team collaboration. Navigate cultural differences with confidence and create inclusive environments.",
        icon: <Globe size={28} />,
        badge: "GLOBAL FOCUS",
        badgeColor: "#F8C301"
    },
    {
        id: 4,
        title: "Executive Coaching",
        description: "One-on-one personalized development for senior leaders and high-potential talent. Strategic guidance for complex leadership challenges and career advancement.",
        icon: <User size={28} />,
        badge: "PREMIUM",
        badgeColor: "#04045B"
    },
    {
        id: 5,
        title: "Communication Excellence",
        description: "Master the art of influential communication across all organizational levels. Develop presentation skills, difficult conversation navigation, and stakeholder engagement.",
        icon: <MessageSquare size={28} />,
        badge: "ESSENTIAL",
        badgeColor: "#F8C301"
    },
    {
        id: 6,
        title: "Change Leadership",
        description: "Guide organizations through transformation with confidence and clarity. Learn frameworks for managing resistance, building momentum, and sustaining change initiatives.",
        icon: <GraduationCap size={28} />,
        badge: "STRATEGIC",
        badgeColor: "#04045B"
    }
];

export function ServicesSectionNew() {
    const [isVisible, setIsVisible] = useState(false);
    const cardRefs = useRef<(HTMLDivElement | null)[]>([]);
    const sectionRef = useRef<HTMLDivElement>(null);

    // Add card refs helper
    const addCardRef = (el: HTMLDivElement | null, index: number) => {
        cardRefs.current[index] = el;
    };

    // Intersection observer for animations
    useEffect(() => {
        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        setIsVisible(true);
                    }
                });
            },
            { threshold: 0.2 }
        );

        if (sectionRef.current) {
            observer.observe(sectionRef.current);
        }

        return () => observer.disconnect();
    }, []);

    // Keyboard navigation
    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {
        if (e.key === 'ArrowDown' && index < cardRefs.current.length - 1) {
            cardRefs.current[index + 1]?.focus();
            e.preventDefault();
        } else if (e.key === 'ArrowUp' && index > 0) {
            cardRefs.current[index - 1]?.focus();
            e.preventDefault();
        }
    };

    return (
        <section
            ref={sectionRef}
            className="py-16 lg:py-20"
            style={{
                backgroundColor: '#F7F7FD',
                fontFamily: 'var(--font-family-brand)'
            }}
            aria-labelledby="recognition-section-heading"
        >
            <div className="section-margin-x">
                <div className="max-w-7xl mx-auto">
                    {/* Desktop Layout - Grid with Sticky Sidebar */}
                    <div className="hidden lg:grid grid-cols-12 gap-12 min-h-screen">
                        {/* Left Side - Sticky Content */}
                        <div className="col-span-5 sticky top-24 self-start">
                            <div className="recognition-header pr-8">
                                <BrandedTag
                                    text="Our Services"
                                />
                                <h2
                                    id="recognition-section-heading"
                                    className="text-h2 mb-6"
                                >
                                    Shaping Leaders, Cultures, and Institutions
                                </h2>
                                <p className="text-body-lg text-muted mb-8">
                                    No two institutions are alike — and neither are their leadership needs. That's why every KLC service is rooted in research, tailored to context, and aligned with strategy. From shaping leaders and managers to shaping culture, developing talent frameworks, and offering practical high impact learning, we partner with you to create leadership solutions that deliver lasting value.
                                </p>
                                {/* CTA Button - Left aligned */}
                                <div className="primary-cta-container-left cta-left-locked">
                                    <PrimaryCTAButton
                                        text="Services Page"
                                        onClick={() => navigateTo('/services')}
                                        ariaLabel="Explore our services"
                                        className="services-cta-override"
                                    />
                                </div>
                            </div>
                        </div>

                        {/* Right Side - Scrolling Cards */}
                        <div className="col-span-7">
                            <div
                                className="recognition-cards space-y-6"
                                role="list"
                                aria-label="Leadership development services"
                            >
                                {recognitionItems.map((item, index) => (
                                    <div
                                        key={item.id}
                                        ref={(el) => addCardRef(el, index)}
                                        className={`recognition-card group scroll-animate-stagger focus-ring ${isVisible ? 'animate-in' : ''}`}
                                        role="listitem"
                                        aria-labelledby={`recognition-title-${item.id}`}
                                        aria-describedby={`recognition-desc-${item.id}`}
                                        tabIndex={0}
                                        onKeyDown={(e) => handleKeyDown(e, index)}
                                        style={{
                                            transitionDelay: `${(index + 1) * 150}ms`,
                                            opacity: isVisible ? 1 : 0
                                        }}
                                    >
                                        <div
                                            className="p-8 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border bg-white"
                                            style={{
                                                borderColor: 'var(--color-border)',
                                                borderRadius: '12px',
                                                fontFamily: 'var(--font-family-brand)'
                                            }}
                                        >
                                            <div className="flex items-start justify-between mb-6">
                                                <div
                                                    className="w-14 h-14 flex items-center justify-center transition-transform duration-300 group-hover:scale-110"
                                                    style={{
                                                        backgroundColor: 'var(--color-brand-primary)',
                                                        borderRadius: '12px',
                                                        color: 'white'
                                                    }}
                                                >
                                                    {item.icon}
                                                </div>
                                                {item.badge && (
                                                    <div
                                                        className="px-3 py-1 text-xs font-bold uppercase tracking-wider"
                                                        style={{
                                                            backgroundColor: item.badgeColor,
                                                            color: item.badgeColor === '#F8C301' ? 'var(--color-brand-black)' : 'white',
                                                            borderRadius: '20px',
                                                            fontFamily: 'var(--font-family-brand)'
                                                        }}
                                                    >
                                                        {item.badge}
                                                    </div>
                                                )}
                                            </div>

                                            <div className="recognition-card-content">
                                                <h3
                                                    id={`recognition-title-${item.id}`}
                                                    className="text-h4 mb-4"
                                                >
                                                    {item.title}
                                                </h3>
                                                <p
                                                    id={`recognition-desc-${item.id}`}
                                                    className="text-small text-muted leading-relaxed"
                                                >
                                                    {item.description}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>

                    {/* Mobile Layout - Stacked Header + Horizontal Scrollable Cards */}
                    <div className="lg:hidden">
                        {/* Mobile Header */}
                        <div className="text-center mb-8">
                            <BrandedTag
                                text="Our Services"
                            />
                            <h2
                                id="recognition-section-heading-mobile"
                                className="text-h2 mb-6"
                            >
                                Shaping Leaders, Cultures, and Institutions
                            </h2>
                            <p className="text-body-lg text-muted mb-8">
                                No two institutions are alike — and neither are their leadership needs. That's why every KLC service is rooted in research, tailored to context, and aligned with strategy. From shaping leaders and managers to shaping culture, developing talent frameworks, and offering practical high impact learning, we partner with you to create leadership solutions that deliver lasting value.
                            </p>
                            {/* CTA Button - Left aligned for mobile */}
                            <div className="primary-cta-container-left cta-left-locked">
                                <PrimaryCTAButton
                                    text="Services Page"
                                    onClick={() => navigateTo('/services')}
                                    ariaLabel="Explore our services"
                                    className="services-cta-override"
                                />
                            </div>
                        </div>

                        {/* Mobile Horizontal Scrollable Cards */}
                        <div className="relative">
                            <div
                                className="flex gap-6 overflow-x-auto scrollbar-hide pb-4"
                                style={{
                                    scrollSnapType: 'x mandatory',
                                    WebkitOverflowScrolling: 'touch'
                                }}
                                role="list"
                                aria-label="Leadership development services"
                            >
                                {recognitionItems.map((item, index) => (
                                    <div
                                        key={item.id}
                                        className={`recognition-card-mobile group focus-ring flex-shrink-0 ${isVisible ? 'animate-in' : ''}`}
                                        role="listitem"
                                        aria-labelledby={`recognition-title-mobile-${item.id}`}
                                        aria-describedby={`recognition-desc-mobile-${item.id}`}
                                        tabIndex={0}
                                        onKeyDown={(e) => handleKeyDown(e, index)}
                                        style={{
                                            scrollSnapAlign: 'start',
                                            width: '320px',
                                            transitionDelay: `${(index + 1) * 150}ms`,
                                            opacity: isVisible ? 1 : 0
                                        }}
                                    >
                                        <div
                                            className="p-6 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border bg-white h-full"
                                            style={{
                                                borderColor: 'var(--color-border)',
                                                borderRadius: '12px',
                                                fontFamily: 'var(--font-family-brand)'
                                            }}
                                        >
                                            <div className="flex items-start justify-between mb-6">
                                                <div
                                                    className="w-12 h-12 flex items-center justify-center transition-transform duration-300 group-hover:scale-110"
                                                    style={{
                                                        backgroundColor: 'var(--color-brand-primary)',
                                                        borderRadius: '12px',
                                                        color: 'white'
                                                    }}
                                                >
                                                    {item.icon}
                                                </div>
                                                {item.badge && (
                                                    <div
                                                        className="px-2 py-1 text-xs font-bold uppercase tracking-wider"
                                                        style={{
                                                            backgroundColor: item.badgeColor,
                                                            color: item.badgeColor === '#F8C301' ? 'var(--color-brand-black)' : 'white',
                                                            borderRadius: '20px',
                                                            fontFamily: 'var(--font-family-brand)'
                                                        }}
                                                    >
                                                        {item.badge}
                                                    </div>
                                                )}
                                            </div>

                                            <div className="recognition-card-content">
                                                <h3
                                                    id={`recognition-title-mobile-${item.id}`}
                                                    className="text-h4 mb-4"
                                                >
                                                    {item.title}
                                                </h3>
                                                <p
                                                    id={`recognition-desc-mobile-${item.id}`}
                                                    className="text-small text-muted leading-relaxed"
                                                >
                                                    {item.description}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </section>
    );
}