import { useState, useEffect } from 'react';
import { motion } from 'motion/react';
import {
  Users,
  Target,
  TrendingUp,
  BookOpen,
  MessageCircle,
  CheckCircle,
  Download,
  ArrowRight,
  Award,
  Lightbulb,
  Building2,
  Brain,
  UserCheck,
  ClipboardCheck,
  Users2,
  Briefcase
} from 'lucide-react';
import PrimaryCTAButton from './PrimaryCTAButton';
import { navigateTo } from './Router';
import { CTABannerSection } from './CTABannerSection';

export function Services() {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    setIsVisible(true);
  }, []);

  const services = [
    {
      id: 'leadership-development',
      icon: Users,
      title: 'Leadership Development Programs (LDP)',
      description: 'At KLC, we design and deliver high-impact Leadership Development Programs that prepare leaders for tomorrow\'s business challenges. Our journeys go beyond classroom learning — combining business cases, reflective practice, and orientation-based frameworks to create leaders who not only adapt but also accelerate growth. Each program is customised to your strategy, ensuring leaders drive measurable business impact while building long-term succession readiness.',
      ctaText: 'Learn More',
      downloadTitle: 'Case Study: How a BFSI Major Built its Next-Gen Leadership Pipeline',
      route: '/services/leadership-development'
    },
    {
      id: 'assessments-pipeline',
      icon: Target,
      title: 'Assessments & Leadership Pipeline',
      description: 'Knowing your leaders is the first step to shaping your future. KLC\'s assessment solutions — from 360-degree feedback to Development Centres — provide a clear view of leadership potential and performance. We don\'t just assess; we build actionable pathways for growth. Our pipeline development methods ensure succession is never left to chance, but actively cultivated to secure continuity and competitiveness.',
      ctaText: 'Learn More',
      downloadTitle: 'Case Study: Leadership Assessment & Succession Planning in a Top NBFC',
      route: '/contact'
    },
    {
      id: 'management-development',
      icon: TrendingUp,
      title: 'Management Development Programs (MDP)',
      description: 'Managers form the backbone of every organisation. Our Management Development Programs strengthen this backbone by equipping managers with the capabilities to lead teams, handle complexity, and deliver consistent results. Rooted in research and practice, our programs blend coaching, peer learning, and simulation-based workshops to help managers grow into confident leaders.',
      ctaText: 'Learn More',
      downloadTitle: 'Case Study: Developing 400 Mid-Level Managers at a Global Manufacturing Firm',
      route: '/services/management-development'
    },
    {
      id: 'culture-competence',
      icon: Building2,
      title: 'Culture & Competence Consulting',
      description: 'Institutions thrive when culture and competence are aligned to strategy. We partner with organisations to define, assess, and embed the cultural and competence frameworks that accelerate growth. From diagnosing culture to shaping values-in-action, our approach ensures leaders model the right behaviours and teams deliver with synergy.',
      ctaText: 'Learn More',
      downloadTitle: 'Case Study: Embedding a Culture of Customer-Centricity in an ITES Giant',
      route: '/services/culture-competence'
    },
    {
      id: 'coaching-mentoring',
      icon: MessageCircle,
      title: 'Coaching & Mentoring',
      description: 'Every leader needs a trusted space to reflect, reset, and grow. Our coaching and mentoring services create that space, helping leaders navigate transitions, build influence, and manage complex workplace relationships. With ICF-aligned coaching practices and decades of leadership experience, KLC coaches enable leaders to strengthen their impact on both business results and institutional culture.',
      ctaText: 'Learn More',
      downloadTitle: 'Case Study: Coaching Senior Leaders Through Organisational Transition',
      route: '/services/executive-coaching'
    },
    {
      id: 'leadership-campus',
      icon: BookOpen,
      title: 'Leadership Campus (Facility)',
      description: 'Experience learning in a world-class environment designed for transformation. Our state-of-the-art Kautilya Leadership Campus provides the perfect setting for immersive leadership development programs. Located in a serene and inspiring environment, our facility combines modern learning spaces with thoughtfully designed areas for reflection, collaboration, and networking. Create lasting memories and meaningful connections while developing leadership capabilities that drive business impact.',
      ctaText: 'Learn More',
      downloadTitle: 'Case Study: Transformative Leadership Retreats at Kautilya Campus',
      route: '/services/learning-facility'
    }
  ];

  const caseStudies = [
    {
      title: 'Case Study on Mid-Sized Bank',
      description: 'Comprehensive leadership development and culture transformation initiative',
      format: 'PDF'
    },
    {
      title: 'Case Study on Leading Insurance Company',
      description: 'Strategic leadership pipeline development and succession planning',
      format: 'PDF'
    },
    {
      title: 'Case Study on Leading Private Sector Bank',
      description: 'Management development and organizational capability building',
      format: 'PDF'
    }
  ];

  return (
    <div style={{ backgroundColor: '#FFFFFF', fontFamily: 'var(--font-family-base)' }}>
      {/* Hero Section */}
      <section className="relative flex flex-col py-24 min-h-[85vh]">
        <div className="absolute inset-0 z-0">
          <div
            className="w-full h-full bg-cover bg-center bg-no-repeat"
            style={{
              backgroundImage: `url('https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=1920&h=1080&fit=crop')`
            }}
          />
          <div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/70 to-black/60"></div>
        </div>

        <div className="relative z-10 flex-1 flex items-left">
          <div className="container mx-auto section-margin-x">
            <div className="text-center max-w-6xl mx-auto">
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: isVisible ? 1 : 0, y: isVisible ? 0 : 30 }}
                transition={{ duration: 0.8 }}
              >
                <div className="branded-tag-system-white mb-8 justify-center">
                  <div className="dot"></div>
                  <span className="text">Our Services</span>
                </div>

                <h1 className="text-h1-white mb-6 text-left">
                  Building Leadership Capacity<br />
                  That Drives Results
                </h1>

                <p className="text-body-lg-white mb-8 mx-auto text-left">
                  At Kautilya Leadership Centre, we enable institutions and individuals to build leadership capacity,
                  align culture with strategy, and create enduring value. Our services span leadership development,
                  consulting, coaching, assessments, and digital learning — each designed with research, context, and practice at the core.
                </p>

                <div className="flex justify-left">
                  <PrimaryCTAButton
                    text="Explore Our Approach"
                    onClick={() => navigateTo('/contact')}
                    ariaLabel="Contact us to explore our services approach"
                    className="cta-text-white"
                  />
                </div>
              </motion.div>
            </div>
          </div>
        </div>
      </section>


      {/* Services Overview Section */}
      <section className="py-20 lg:py-28" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="section-margin-x">
          <div className="max-w-7xl mx-auto">

            {/* Services Grid */}
            <div className="space-y-40">
              {services.map((service, index) => (
                <motion.div
                  key={service.id}
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  viewport={{ once: true }}
                  className="max-w-7xl mx-auto"
                >
                  <div className="relative">

                    {/* Content Section */}
                    <div className="relative pr-0 lg:pr-[520px]">
                      {/* Icon and Title - Single Line (Figma Layout) */}
                      <div className="flex items-center gap-[15.5px] mb-8">
                        <div
                          className="w-16 h-16 rounded-[14px] flex items-center justify-center flex-shrink-0"
                          style={{ backgroundColor: 'var(--color-primary)' }}
                        >
                          <service.icon className="w-8 h-8 text-white" />
                        </div>
                        <h2 className="text-h2 leading-[57.6px] tracking-[-0.48px]" style={{ fontSize: '48px' }}>{service.title}</h2>
                      </div>

                      {/* Brief Overview */}
                      <p className="text-body-lg text-muted leading-relaxed mb-8">
                        {service.description.split('.')[0]}.
                      </p>

                      {/* Service Preview Cards - Figma Layout */}
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
                        {/* Preview Card 1: What It Is */}
                        <div className="p-[21px] bg-white border border-gray-200 rounded-[14px] hover:shadow-lg hover:border-primary/30 transition-all duration-300">
                          <div className="flex items-center gap-3 mb-3">
                            <div className="w-8 h-8 rounded-[10px] bg-primary/10 flex items-center justify-center">
                              <Lightbulb className="w-4 h-4" style={{ color: 'var(--color-primary)' }} />
                            </div>
                            <h4 className="text-body-lg" style={{ fontWeight: 600, color: 'var(--color-black)' }}>What It Is</h4>
                          </div>
                          <p className="text-small text-muted leading-relaxed">
                            {index === 0 && 'Customized leadership journeys combining business cases, reflective practice, and strategic frameworks'}
                            {index === 1 && '360-degree feedback, Development Centres, and pipeline strategies for succession planning'}
                            {index === 2 && 'Manager capability building through coaching, peer learning, and simulation workshops'}
                            {index === 3 && 'Culture assessment, competence frameworks, and values-in-action embedding strategies'}
                            {index === 4 && 'ICF-aligned coaching and mentoring for leadership transitions and influence building'}
                            {index === 5 && 'State-of-the-art campus for immersive leadership development and transformation'}
                          </p>
                        </div>

                        {/* Preview Card 2: Who It's For */}
                        <div className="p-[21px] bg-white border border-gray-200 rounded-[14px] hover:shadow-lg hover:border-primary/30 transition-all duration-300">
                          <div className="flex items-center gap-3 mb-3">
                            <div className="w-8 h-8 rounded-[10px] bg-primary/10 flex items-center justify-center">
                              <Users2 className="w-4 h-4" style={{ color: 'var(--color-primary)' }} />
                            </div>
                            <h4 className="text-body-lg" style={{ fontWeight: 600, color: 'var(--color-black)' }}>Who It's For</h4>
                          </div>
                          <p className="text-small text-muted leading-relaxed">
                            {index === 0 && 'Senior leaders, high-potential managers, and succession pipeline candidates'}
                            {index === 1 && 'HR teams, talent managers, and succession planning committees'}
                            {index === 2 && 'Mid-level managers, team leaders, and aspiring first-time leaders'}
                            {index === 3 && 'Leadership teams, HR leaders, and change management sponsors'}
                            {index === 4 && 'C-suite executives, senior leaders navigating transitions and complex challenges'}
                            {index === 5 && 'Organizations seeking transformative leadership retreats and immersive learning'}
                          </p>
                        </div>

                        {/* Preview Card 3: Expected Impact - Full Width */}
                        <div className="p-[21px] bg-white border border-gray-200 rounded-[14px] hover:shadow-lg hover:border-primary/30 transition-all duration-300 sm:col-span-2">
                          <div className="flex items-center gap-3 mb-3">
                            <div className="w-8 h-8 rounded-[10px] bg-accent/20 flex items-center justify-center">
                              <CheckCircle className="w-4 h-4" style={{ color: 'var(--color-accent)' }} />
                            </div>
                            <h4 className="text-body-lg" style={{ fontWeight: 600, color: 'var(--color-black)' }}>Expected Impact</h4>
                          </div>
                          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                            <div className="flex items-start gap-2">
                              <ArrowRight className="w-4 h-4 mt-0.5 flex-shrink-0" style={{ color: 'var(--color-accent)' }} />
                              <p className="text-small text-muted">
                                {index === 0 && 'Leaders who drive measurable business impact'}
                                {index === 1 && 'Clear succession pathways and readiness'}
                                {index === 2 && 'Confident managers delivering consistent results'}
                                {index === 3 && 'Culture-strategy alignment and synergy'}
                                {index === 4 && 'Enhanced leadership influence and presence'}
                                {index === 5 && 'Lasting transformation and connections'}
                              </p>
                            </div>
                            <div className="flex items-start gap-2">
                              <ArrowRight className="w-4 h-4 mt-0.5 flex-shrink-0" style={{ color: 'var(--color-accent)' }} />
                              <p className="text-small text-muted">
                                {index === 0 && 'Long-term succession readiness'}
                                {index === 1 && 'Data-driven development plans'}
                                {index === 2 && 'Effective team leadership capability'}
                                {index === 3 && 'Values modeled by leadership'}
                                {index === 4 && 'Successful navigation of transitions'}
                                {index === 5 && 'Immersive learning environment'}
                              </p>
                            </div>
                            <div className="flex items-start gap-2">
                              <ArrowRight className="w-4 h-4 mt-0.5 flex-shrink-0" style={{ color: 'var(--color-accent)' }} />
                              <p className="text-small text-muted">
                                {index === 0 && 'Accelerated leadership growth'}
                                {index === 1 && 'Proactive talent cultivation'}
                                {index === 2 && 'Growth into confident leaders'}
                                {index === 3 && 'Sustained competitive advantage'}
                                {index === 4 && 'Improved decision-making confidence'}
                                {index === 5 && 'Meaningful networking opportunities'}
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>

                      {/* CTA Button */}
                      <div className="primary-cta-container-left cta-left-locked">
                        <PrimaryCTAButton
                          text="Explore This Service"
                          onClick={() => navigateTo(service.route)}
                          ariaLabel={`Learn more about ${service.title}`}
                          className="cta-text-black"
                        />
                      </div>
                    </div>

                    {/* Image Section - Positioned at Bottom Right (Figma Design) */}
                    <div className="absolute bottom-0 right-0 w-[496px] h-[479px] hidden lg:block overflow-hidden rounded-[16px]">
                      <div
                        className="absolute h-[479px] left-[-71px] top-0 w-[639px] rounded-[16px] bg-cover bg-center bg-no-repeat"
                        style={{
                          backgroundImage: `url('https://images.unsplash.com/photo-${index === 0 ? '1758270705696-ec9caffc73dd' : // leadership team
                              index === 1 ? '1551836022-d5d88e9218df' : // assessment/analytics
                                index === 2 ? '1600880292203-757bb62b4baf' : // management meeting
                                  index === 3 ? '1552664730-d307ca884978' : // culture/team
                                    index === 4 ? '1573496359142-b8d87734a5a2' : // coaching
                                      '1582213782179-e0d53f98f2ca' // leadership campus/facility
                            }?w=800&h=600&fit=crop')`
                        }}
                      >
                        <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-transparent rounded-[16px]"></div>
                      </div>
                    </div>

                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Case Studies Section */}
      <section className="py-20" style={{ backgroundColor: '#F8F9FA' }}>
        <div className="section-margin-x">
          <div className="max-w-6xl mx-auto">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              viewport={{ once: true }}
              className="text-center mb-16"
            >
              <div className="branded-tag-system mb-6 justify-center">
                <div className="dot"></div>
                <span className="text">Case Studies</span>
              </div>

              <h2 className="text-h2 mb-6">
                Real Impact, Real Results
              </h2>

              <p className="text-body-lg text-muted max-w-2xl mx-auto">
                Discover how we've helped organizations transform their leadership capabilities
                and drive sustainable business growth.
              </p>
            </motion.div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {caseStudies.map((caseStudy, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  viewport={{ once: true }}
                  className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-lg transition-shadow cursor-pointer"
                  onClick={() => {/* Handle case study view */ }}
                >
                  <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                    <Award className="w-6 h-6 text-primary" />
                  </div>

                  <h3 className="text-h4 mb-3">{caseStudy.title}</h3>

                  <p className="text-small text-muted mb-4">
                    {caseStudy.description}
                  </p>

                  <button
                    className="w-full flex items-center justify-between p-3 bg-gray-50 hover:bg-primary/5 border border-gray-100 hover:border-primary/20 rounded-lg transition-all duration-300 cursor-pointer group"
                    onClick={(e) => {
                      e.stopPropagation();
                      /* Handle download */
                    }}
                  >
                    <div className="flex items-center gap-2">
                      <div className="w-8 h-8 bg-primary/10 group-hover:bg-primary/20 rounded-md flex items-center justify-center transition-colors duration-300">
                        <Download className="w-4 h-4 text-primary" />
                      </div>
                      <div className="text-left">
                        <div className="text-sm font-medium text-gray-900 group-hover:text-primary transition-colors duration-300">
                          Download {caseStudy.format}
                        </div>
                        <div className="text-xs text-gray-500">
                          Case Study Document
                        </div>
                      </div>
                    </div>
                    <ArrowRight className="w-4 h-4 text-gray-400 group-hover:text-primary transition-colors duration-300" />
                  </button>
                </motion.div>
              ))}
            </div>
          </div>
        </div>
      </section>



      {/* CTA Banner Section */}
      <CTABannerSection />
    </div>
  );
}