KLC-Website-Frontend/src/components/ServicesSection.tsx

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 ServicesSection() {
  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">
          <div className="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="Leadership Development Programs"
                />
                <h2
                  id="recognition-section-heading"
                  className="text-h2 mb-6"
                >
                  Shaping Leaders, Cultures, and Institutions
                </h2>
                <p className="text-body-lg text-muted">
                  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>
              </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>

          {/* CTA Button - Updated to redirect to leadership journey */}
          <div className="flex justify-center mt-16">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.6 }}
              viewport={{ once: true }}
            >
              <PrimaryCTAButton
                text="Get Started Today"
                onClick={() => navigateTo('/leadership-journey')}
                ariaLabel="Get started with leadership development programs"
                className="get-started-cta-override"
              />
            </motion.div>
          </div>
        </div>
      </div>
    </section>
  );
}