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 { BrandedTag } from './about/BrandedTag';
import { PrimaryCTAButton } from './PrimaryCTAButton';
import { CTABannerSection } from './CTABannerSection';
import { navigateTo } from './Router';

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: 'Design a Leadership Journey for Your Institution',
            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: 'Assess and Strengthen Your Leadership Bench',
            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: 'Build Managerial Calibre in Your Teams',
            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: 'Align Your Culture with Business Growth',
            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: 'Book a Leadership Coaching Conversation',
            downloadTitle: 'Case Study: Coaching Senior Leaders Through Organisational Transition',
            route: '/services/executive-coaching'
        }
    ];

    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/80 via-black/70 to-black/60"></div>
                </div>

                <div className="relative z-10 flex-1 flex items-center">
                    <div className="container mx-auto section-margin-x">
                        <div className="text-center max-w-5xl 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">
                                    Building Leadership Capacity<br />
                                    That Drives Results
                                </h1>

                                <p className="text-body-lg-white mb-8 max-w-3xl mx-auto">
                                    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-center">
                                    <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-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('/contact')}
                                                    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
                                                                        '1573496359142-b8d87734a5a2' // coaching
                                                            }?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>
    );
}