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,
  ArrowLeft
} from 'lucide-react';
import { BrandedTag } from './about/BrandedTag';
import { PrimaryCTAButton } from './PrimaryCTAButton';
import { CTABannerSection } from './CTABannerSection';
import { navigateTo } from './Router';
import { Button } from './ui/button';

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: '/services/leadership-pipeline-development'
    },
    {
      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 min-h-[85vh] flex flex-col">
        <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/85 via-black/75 to-black/65"></div>
        </div>

        <div className="relative z-10 flex-1 flex items-center">
          <div className="w-full section-margin-x">
            <div className="max-w-6xl">
              {/* Back Navigation */}
              {/* <div className="mb-8">
                <Button
                  variant="ghost"
                  onClick={() => navigateTo('/services')}
                  className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
                >
                  <ArrowLeft className="w-4 h-4 mr-2" />
                  Back to Services
                </Button>
              </div> */}

              <div className="mb-8">
                <h1 className="text-h1-white">
                  Building Leaders, Driving Impact
                </h1>
              </div>

              <p className="text-body-lg-white mb-8 max-w-3xl">
                <strong>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.</strong>
              </p>

              <div className="flex justify-start">
                <PrimaryCTAButton
                  text="Talk to Us"
                  onClick={() => navigateTo('/contact?topic=management-development')}
                  ariaLabel="Talk to us about management development"
                  className="primary-cta-button-blue cta-text-white"
                />
              </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-24">
              {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={`grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start ${index % 2 === 1 ? 'lg:direction-reverse' : ''
                    }`}>

                    {/* Content Section */}
                    <div className={`lg:col-span-7 ${index % 2 === 1 ? 'lg:col-start-6 lg:order-2' : 'lg:col-start-1 lg:order-1'
                      }`}>
                      {/* Icon and Title - Side by Side */}
                      <div className="flex items-start gap-4 mb-6">
                        <div
                          className="w-16 h-16 rounded-xl 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-tight">{service.title}</h2>
                      </div>

                      {/* Description */}
                      <p className="text-body-lg text-muted mb-8 leading-relaxed">
                        {service.description}
                      </p>

                      {/* CTA Button */}
                      <div className="mb-8 primary-cta-container-left cta-left-locked">
                        <PrimaryCTAButton
                          text={service.ctaText}
                          onClick={() => navigateTo(service.route)}
                          ariaLabel={`Contact us about ${service.title}`}
                          className="cta-text-black"
                        />
                      </div>

                      {/* Download Resource */}
                      <button
                        className="w-full p-6 bg-gray-50 rounded-xl border border-gray-100 hover:shadow-lg hover:shadow-primary/10 hover:border-primary/20 transition-all duration-300 cursor-pointer group text-left"
                        onClick={() => {/* Handle download */ }}
                      >
                        <div className="flex items-start gap-4">
                          <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0 transition-all duration-300 relative overflow-hidden">
                            <Download className="w-6 h-6 text-primary group-hover:animate-download-arrows" />
                          </div>
                          <div className="flex-1">
                            <h4 className="text-h4 mb-2">
                              Downloadable Resource
                            </h4>
                            <p className="text-small text-muted">
                              {service.downloadTitle}
                            </p>
                          </div>
                        </div>
                      </button>
                    </div>

                    {/* Image Section */}
                    <div className={`lg:col-span-5 ${index % 2 === 1 ? 'lg:col-start-1 lg:order-1' : 'lg:col-start-8 lg:order-2'
                      }`}>
                      <div className="relative">
                        <div
                          className="w-full aspect-[4/3] rounded-2xl bg-cover bg-center bg-no-repeat"
                          style={{
                            backgroundImage: `url('https://images.unsplash.com/photo-${index === 0 ? '1522071820-d3ca7b99e0dd' : // 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-2xl"></div>
                        </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>
  );
}