import { useState, useEffect } from 'react';
import { motion } from 'motion/react';
import { 
  Target, 
  Users, 
  Globe, 
  Lightbulb, 
  ArrowRight,
  CheckCircle,
  Star,
  Award,
  Brain,
  TrendingUp,
  Shield,
  Heart,
  Zap,
  Eye,
  BookOpen,
  Puzzle,
  Building,
  ArrowLeft
} from 'lucide-react';
import { BrandedTag } from './about/BrandedTag';
import { PrimaryCTAButton } from './PrimaryCTAButton';
import { CTABannerSection } from './CTABannerSection';
import { TestimonialsSection } from './TestimonialsSection';
import { TeamMemberModal } from './TeamMemberModal';
import { navigateTo } from './Router';
import { Button } from './ui/button';

// Leadership Orientations Data
const leadershipOrientations = [
  { name: 'Thinking', icon: Brain, description: 'Strategic and analytical mindset' },
  { name: 'Risk Appetite', icon: TrendingUp, description: 'Calculated risk-taking approach' },
  { name: 'Power', icon: Shield, description: 'Authority and influence dynamics' },
  { name: 'Interpersonal/Political', icon: Users, description: 'Relationship and network building' },
  { name: 'Ambition', icon: Target, description: 'Drive for achievement and growth' },
  { name: 'Trust', icon: Heart, description: 'Building confidence and reliability' },
  { name: 'Learning', icon: BookOpen, description: 'Continuous development mindset' },
  { name: 'Nurturance', icon: Heart, description: 'Supporting and developing others' },
  { name: 'Result/Closure', icon: CheckCircle, description: 'Focus on outcomes and completion' }
];

// Our Uniqueness Data
const uniquenessPoints = [
  {
    icon: Target,
    title: 'Context & Strategy Alignment',
    description: 'We align our work to the client\'s specific context & strategy'
  },
  {
    icon: BookOpen,
    title: 'Research-Anchored Approach',
    description: 'Our work is anchored on research and work of scholars'
  },
  {
    icon: Users,
    title: 'Client-Specific Needs',
    description: 'We blend this with the specific needs of the client'
  },
  {
    icon: Puzzle,
    title: 'Co-Creation Process',
    description: 'We co-create the design with our clients'
  }
];

// Benefits Data
const benefits = [
  'We use proprietary exercises, custom written cases, curated films and proprietary tools',
  'Facilitate insights on the connect between one\'s leadership orientations and their leadership abilities',
  'We create learning at an individual level and at a group level',
  'Our designs focus on application and practice',
  'We bring in the connect of the learning to the Business contexts',
  'We recommend that the Leadership intervention is designed for a period of 12-15 months with multiple touch points which can constitute a combination of classroom, fire side chats, one-on-one sessions, address by an expert, use of profilers, accessing online content on concepts and accomplished leaders\' experiences'
];

// Team Members Data with Full Profiles
const teamMembers = [
  {
    name: 'Mr. K Ramkumar',
    role: 'Managing Director',
    image: 'https://images.unsplash.com/photo-1584940120505-117038d90b05?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwcm9mZXNzaW9uYWwlMjBidXNpbmVzc21hbiUyMGV4ZWN1dGl2ZSUyMHBvcnRyYWl0fGVufDF8fHx8MTc1NjgyNDA3OXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
    experience: 'Over 25 years of leadership experience in building and scaling organizations.',
    fullBio: 'K Ramkumar is the Managing Director and founder of Kautilya Leadership Centre, bringing over two and a half decades of extensive leadership experience. He has been instrumental in building the institution from its inception in 2016, establishing it as a premier leadership development center.\n\nHis vision and strategic direction have guided KLC to become a trusted partner for organizations seeking to develop their leadership capabilities. Under his leadership, KLC has worked with numerous Fortune 500 companies and emerging organizations across various industries.\n\nRamkumar is passionate about developing leaders who can navigate complex business environments and drive sustainable growth. His approach combines traditional leadership wisdom with modern business practices.',
    expertise: ['Strategic Leadership', 'Organizational Development', 'Executive Coaching', 'Business Strategy', 'Leadership Assessment'],
    education: 'MBA in Strategic Management and Bachelor\'s degree in Engineering',
    achievements: [
      'Founded and scaled Kautilya Leadership Centre to become a leading institution',
      'Developed proprietary leadership assessment and development frameworks',
      'Successfully coached over 200 senior executives across industries',
      'Built strategic partnerships with leading business schools and consulting firms'
    ],
    clientWork: 'Has worked extensively with Fortune 500 companies, family businesses, and emerging startups across industries including technology, healthcare, manufacturing, and financial services.',
    boardRoles: 'Serves as an advisor to multiple startups and family businesses. Active member of leadership development forums and industry associations.'
  },
  {
    name: 'Mr. R. Muralidharan',
    role: 'Practice Head – Leadership Development',
    image: 'https://images.unsplash.com/photo-1584940121258-c2553b66a739?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzZW5pb3IlMjBidXNpbmVzcyUyMGV4ZWN1dGl2ZSUyMHBvcnRyYWl0fGVufDF8fHx8MTc1NjgyNDA5MXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
    experience: 'Two decades of experience in leadership development and organizational transformation.',
    fullBio: 'R. Muralidharan is a seasoned leadership development professional with over 20 years of experience in designing and implementing leadership programs for organizations across various industries. He specializes in creating transformational learning experiences that drive sustainable behavioral change.\n\nHis expertise lies in understanding the nuances of leadership in different cultural and organizational contexts. He has successfully designed and facilitated leadership programs for multinational corporations, helping them develop culturally aware and globally effective leaders.\n\nMuralidharan is known for his innovative approach to leadership development, combining experiential learning with deep psychological insights to create lasting impact.',
    expertise: ['Leadership Program Design', 'Cross-cultural Leadership', 'Behavioral Change', 'Team Dynamics', 'Organizational Psychology'],
    education: 'Master\'s in Organizational Psychology and Bachelor\'s degree in Management',
    achievements: [
      'Designed leadership programs for over 50 organizations',
      'Certified in multiple leadership assessment tools',
      'Published research on cross-cultural leadership effectiveness',
      'Trained over 1000 leaders across Asia-Pacific region'
    ],
    clientWork: 'Extensive experience with multinational corporations, government organizations, and NGOs across India, Southeast Asia, and the Middle East.',
    boardRoles: 'Member of leadership development councils and advisory committees for business schools and professional associations.'
  },
  {
    name: 'Ms. Aparna Nair',
    role: 'Practice Head – Leadership Development',
    image: 'https://images.unsplash.com/photo-1567849859756-79bf6a9d62f1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxidXNpbmVzc3dvbWFuJTIwcHJvZmVzc2lvbmFsJTIwZXhlY3V0aXZlfGVufDF8fHx8MTc1NjgyNDA4NXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
    experience: 'Founding member with over two-and-a-half decades of experience in leadership development and organizational consulting.',
    fullBio: 'Aparna is a founding member of the Kautilya Leadership Centre with over two-and-a-half decades of experience. She has built the institution since its inception in 2016 by nurturing client relationships, developing content, and building organisational capabilities.\n\nAparna advises and consults Boards and Management Committees on strengthening their leadership bench strength. She designs and facilitates custom interventions for executives at the CXO and other leadership levels across industries. She also advises client organisations on aligning culture with business strategy, and on policies and processes related to performance management, talent assessment, compensation management, and rewards & recognition.\n\nShe has built proprietary psychometric tools for both clients and the institution. She mentors Human Resource professionals in deepening domain expertise and leading people processes within their organisations. She has created content from first principles and developed the knowledge management system for the institution. She is an accredited facilitator from SMR, Malaysia, with extensive experience in using the OPQ (Occupational Personality Questionnaire developed by Saville and Holdsworth Ltd.) and applying the Balanced Scorecard (BSC) framework to businesses. She is also a certified Myers-Briggs Type Indicator (MBTI) practitioner with deep experience supporting both individuals and groups.\n\nAparna brings value through her experience as a first-generation entrepreneur, having successfully engaged with reputed organisations across industries. Her business understanding is grounded in her hands-on roles in field sales, team management, credit operations, project management, and branch operations in large institutions. She has also worked in the areas of learning and development, performance management, human resource planning, and instructional design for e-learning.\n\nShe has held key positions at ICICI Bank and the erstwhile Blue Dart-FedEx before starting her consulting practice. She has worked with organisations such as Godrej & Boyce, National Collateral Management Services Ltd. (NCML), ICICI Prudential, Citi WAI, Wealth Advisors (I) Pvt. Ltd., WNS, I-mint (erstwhile), and ThyssenKrupp.\n\nAt the Kautilya Leadership Centre, she has worked across diverse industries, including pharmaceuticals, banking, insurance and financial services, manufacturing, retail, electronic payments, auto, start-ups, and private equity. Her client list includes industry leaders in each of these sectors.',
    expertise: ['Psychometric Assessment', 'Leadership Development', 'Organizational Culture', 'Performance Management', 'Talent Assessment', 'MBTI Certification', 'OPQ Assessment', 'Balanced Scorecard'],
    education: 'MBA in Marketing and Bachelor\'s degree in Commerce',
    achievements: [
      'Co-founded and built Kautilya Leadership Centre from inception',
      'Developed proprietary psychometric tools and assessment frameworks',
      'Created comprehensive knowledge management systems',
      'Successfully engaged with Fortune 500 companies across multiple industries',
      'Certified in multiple global assessment tools (MBTI, OPQ, BSC)',
      'Built leadership development programs for over 100 organizations'
    ],
    clientWork: 'Extensive client portfolio includes Godrej & Boyce, ICICI Prudential, Citi WAI, WNS, ThyssenKrupp, and many other industry leaders across pharmaceuticals, banking, insurance, manufacturing, retail, auto, and private equity sectors.',
    boardRoles: 'Serves as an Independent Woman Director on the board of a start-up. Previously held key positions at ICICI Bank and Blue Dart-FedEx.'
  },
  {
    name: 'Mr. V. Swaminathan',
    role: 'Practice Head – Leadership Development',
    image: 'https://images.unsplash.com/photo-1742119971773-57e0131095b0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjb3Jwb3JhdGUlMjBsZWFkZXJzaGlwJTIwdGVhbSUyMHByb2Zlc3Npb25hbHxlbnwxfHx8fDE3NTY4MjQwOTd8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
    experience: 'Over 22 years in corporate leadership and human capital development.',
    fullBio: 'V. Swaminathan brings over two decades of experience in corporate leadership and human capital development. He has spent significant time in building high-performance teams and developing leadership capabilities across various organizational levels.\n\nHis expertise spans across strategic leadership, change management, and organizational effectiveness. He has been instrumental in driving major transformation initiatives and has a proven track record of developing leaders who can navigate complex business challenges.\n\nSwaminathan is particularly known for his work in succession planning and leadership pipeline development, helping organizations build sustainable leadership capabilities for the future.',
    expertise: ['Strategic Leadership', 'Change Management', 'Succession Planning', 'Organizational Effectiveness', 'Leadership Pipeline Development'],
    education: 'Master\'s in Human Resources and Bachelor\'s degree in Business Administration',
    achievements: [
      'Led major organizational transformation initiatives',
      'Developed leadership pipeline programs for multiple corporations',
      'Successfully coached over 150 senior leaders',
      'Implemented succession planning frameworks for Fortune 500 companies'
    ],
    clientWork: 'Has worked with leading corporations in technology, manufacturing, and services sectors, focusing on leadership development and organizational transformation.',
    boardRoles: 'Advisor to several corporate boards on leadership and human capital matters.'
  },
  {
    name: 'Mr. Balaji Chandrakumar',
    role: 'Practice Head – Leadership Development',
    image: 'https://images.unsplash.com/photo-1610631066894-62452ccb927c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMG1hbmFnZXIlMjBwb3J0cmFpdCUyMHByb2Zlc3Npb25hbHxlbnwxfHx8fDE3NTY4MjQxMDN8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
    experience: 'Two decades of experience in leadership coaching and executive development.',
    fullBio: 'Balaji Chandrakumar is an accomplished leadership coach and executive development specialist with over 20 years of experience. He has worked extensively with C-suite executives and senior leadership teams, helping them enhance their leadership effectiveness and drive organizational performance.\n\nHis approach combines behavioral psychology with practical business applications, creating leadership development experiences that are both insightful and immediately applicable. He is particularly skilled in working with leaders during critical transitions and challenging business situations.\n\nBalaji has a strong background in executive coaching and has helped numerous leaders navigate complex organizational challenges while developing their authentic leadership style.',
    expertise: ['Executive Coaching', 'Leadership Transitions', 'Behavioral Psychology', 'Emotional Intelligence', 'Leadership Effectiveness'],
    education: 'Master\'s in Psychology and Bachelor\'s degree in Engineering',
    achievements: [
      'Coached over 200 C-suite executives',
      'Developed leadership transition programs',
      'Certified executive coach with international credentials',
      'Successfully facilitated leadership team effectiveness initiatives'
    ],
    clientWork: 'Extensive experience with technology companies, financial services, and healthcare organizations, focusing on executive coaching and leadership team development.',
    boardRoles: 'Advisory positions with technology startups and scale-up companies.'
  },
  {
    name: 'Mr. Ramesh Padmanabhan',
    role: 'Practice Head – Leadership Development',
    image: 'https://images.unsplash.com/photo-1736939681295-bb2e6759dddc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwcm9mZXNzaW9uYWwlMjBjb25zdWx0YW50JTIwYnVzaW5lc3MlMjBwb3J0cmFpdHxlbnwxfHx8fDE3NTY4MjQxMTN8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
    experience: 'Over 18 years in organizational consulting and leadership development across multiple industries.',
    fullBio: 'Ramesh Padmanabhan is a seasoned organizational consultant and leadership development expert with over 18 years of experience. He specializes in helping organizations build leadership capabilities that align with their strategic objectives and cultural values.\n\nHis expertise lies in designing comprehensive leadership development programs that combine assessment, development, and measurement components. He has worked extensively with family businesses and professionally managed companies, understanding the unique challenges each faces.\n\nRamesh is known for his ability to translate complex leadership concepts into practical, actionable development plans that drive measurable business results.',
    expertise: ['Organizational Consulting', 'Leadership Assessment', 'Program Design', 'Family Business Dynamics', 'Strategic Alignment'],
    education: 'Master\'s in Organizational Development and Bachelor\'s degree in Commerce',
    achievements: [
      'Designed leadership programs for over 60 organizations',
      'Specialized expertise in family business leadership dynamics',
      'Developed assessment frameworks for leadership potential',
      'Facilitated leadership alignment initiatives for complex organizations'
    ],
    clientWork: 'Significant experience with family businesses, professionally managed companies, and emerging organizations across manufacturing, services, and technology sectors.',
    boardRoles: 'Serves on advisory boards of family businesses and consulting organizations.'
  },
  {
    name: 'Ms. Diju S',
    role: 'Practice Head – Leadership Development',
    image: 'https://images.unsplash.com/photo-1701463387028-3947648f1337?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxleGVjdXRpdmUlMjBkaXJlY3RvciUyMGJ1c2luZXNzJTIwcG9ydHJhaXR8ZW58MXx8fHwxNzU2ODI0MTE4fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
    experience: 'Over 15 years in leadership development with a focus on women leaders and diversity initiatives.',
    fullBio: 'Diju S brings over 15 years of specialized experience in leadership development with a particular focus on developing women leaders and driving diversity and inclusion initiatives. She has been instrumental in creating programs that help organizations build more inclusive leadership cultures.\n\nHer work spans across leadership coaching, mentoring programs, and organizational culture transformation. She has helped numerous organizations develop their women leadership pipeline and create environments where diverse leadership can thrive.\n\nDiju is passionate about developing authentic leaders who can drive positive change in their organizations and communities. Her approach emphasizes emotional intelligence, inclusive leadership, and sustainable development practices.',
    expertise: ['Women Leadership Development', 'Diversity & Inclusion', 'Inclusive Leadership', 'Mentoring Programs', 'Culture Transformation'],
    education: 'Master\'s in Human Resources and Bachelor\'s degree in Psychology',
    achievements: [
      'Pioneered women leadership development programs',
      'Developed diversity and inclusion frameworks for major corporations',
      'Mentored over 100 women leaders across industries',
      'Created inclusive leadership assessment tools'
    ],
    clientWork: 'Extensive work with corporations seeking to build diverse leadership pipelines, particularly in technology, healthcare, and financial services sectors.',
    boardRoles: 'Active member of women leadership forums and diversity councils in corporate and non-profit sectors.'
  }
];

export function AboutUs() {
  const [isVisible, setIsVisible] = useState(false);
  const [expandedValue, setExpandedValue] = useState<string | null>('context');
  const [selectedMember, setSelectedMember] = useState<typeof teamMembers[0] | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleMemberClick = (member: typeof teamMembers[0]) => {
    setSelectedMember(member);
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
    setSelectedMember(null);
  };

  // Prevent background scroll when modal is open
  useEffect(() => {
    if (isModalOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }

    // Cleanup on unmount
    return () => {
      document.body.style.overflow = '';
    };
  }, [isModalOpen]);

  useEffect(() => {
    setIsVisible(true);
    
    // Timeline fill animation on scroll
    const handleScroll = () => {
      const timelineSection = document.querySelector('#timeline-fill-line');
      const timelineContainer = timelineSection?.parentElement;
      
      if (!timelineSection || !timelineContainer) return;
      
      const rect = timelineContainer.getBoundingClientRect();
      const windowHeight = window.innerHeight;
      
      // Calculate how much of the timeline is visible
      const sectionTop = rect.top;
      const sectionHeight = rect.height;
      const visibleTop = Math.max(0, windowHeight - sectionTop);
      const visibleHeight = Math.min(visibleTop, sectionHeight);
      const scrollProgress = Math.max(0, Math.min(1, visibleHeight / sectionHeight));
      
      // Calculate the exact position to end at Phase 3 dot
      const maxFillHeight = 'calc(100% - 1rem)'; // Match the background line limit
      
      // Apply progressive fill that respects the maximum height constraint
      if (scrollProgress >= 0.9) {
        // When nearly complete, set to exact end position
        timelineSection.style.height = maxFillHeight;
      } else {
        // Progressive fill up to 90% of the way
        timelineSection.style.height = `${scrollProgress * 90}%`;
      }
    };

    // Add scroll listener
    window.addEventListener('scroll', handleScroll);
    
    // Initial call to set the initial state
    handleScroll();
    
    // Cleanup
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div style={{ backgroundColor: '#FFFFFF', fontFamily: 'var(--font-family-base)' }}>
      {/* Hero Section - Our Vision Page Style */}
      <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-1552664730-d307ca884978?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">
                  Advancing Leadership Through Insight
                </h1>
              </div>

              <p className="text-body-lg-white mb-8 max-w-3xl">
                <strong>Founded in 2016 with the vision of being a world class institution in the thought and practice of leadership. We facilitate institutions to build Leadership capacity and capability while helping individuals unleash their potential.</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>

      {/* Section 1: Our Promise */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
        <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"
            >
              <BrandedTag text="Our Promise" />
              <h2 className="text-h1 mb-8" style={{ 
                fontSize: 'clamp(2.5rem, 5vw, 4rem)',
                lineHeight: '1.1',
                color: 'var(--color-black)'
              }}>
                We build leaders who deliver business results.
              </h2>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Section 2: How We Work */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
        <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"
            >
              <BrandedTag text="How We Work" />
              <h2 className="text-h2 mb-8">How We Work</h2>
            </motion.div>

            {/* Four Key Points Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.1 }}
                viewport={{ once: true }}
                className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
              >
                <div className="flex items-start gap-4">
                  <div 
                    className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
                    style={{ backgroundColor: 'var(--color-primary)' }}
                  >
                    <Puzzle className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <h3 className="text-h4 mb-4">Co-created interventions</h3>
                    <p className="text-body text-muted leading-relaxed">
                      We collaborate with you to design solutions that fit your unique organizational context and strategic objectives.
                    </p>
                  </div>
                </div>
              </motion.div>

              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.2 }}
                viewport={{ once: true }}
                className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
              >
                <div className="flex items-start gap-4">
                  <div 
                    className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
                    style={{ backgroundColor: 'var(--color-primary)' }}
                  >
                    <Target className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <h3 className="text-h4 mb-4">Grounded in business context</h3>
                    <p className="text-body text-muted leading-relaxed">
                      Every solution is tailored to your specific business environment, challenges, and growth objectives.
                    </p>
                  </div>
                </div>
              </motion.div>

              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.3 }}
                viewport={{ once: true }}
                className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
              >
                <div className="flex items-start gap-4">
                  <div 
                    className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
                    style={{ backgroundColor: 'var(--color-primary)' }}
                  >
                    <BookOpen className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <h3 className="text-h4 mb-4">Research-backed, behaviour-anchored</h3>
                    <p className="text-body text-muted leading-relaxed">
                      Our methodologies are rooted in rigorous research and focused on sustainable behavioral transformation.
                    </p>
                  </div>
                </div>
              </motion.div>

              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.4 }}
                viewport={{ once: true }}
                className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
              >
                <div className="flex items-start gap-4">
                  <div 
                    className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
                    style={{ backgroundColor: 'var(--color-primary)' }}
                  >
                    <Zap className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <h3 className="text-h4 mb-4">Delivered through immersive formats</h3>
                    <p className="text-body text-muted leading-relaxed">
                      Interactive, experiential learning approaches that engage participants and drive lasting impact.
                    </p>
                  </div>
                </div>
              </motion.div>
            </div>
          </div>
        </div>
      </section>

      {/* Section 3: Who We Are - Updated Statistics */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
        <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 }}
            >
              {/* Split Layout - Left: Eyebrow Text, Right: Main Heading */}
              <div className="grid grid-cols-1 lg:grid-cols-5 gap-8 lg:gap-12 mb-16">
                {/* Left Side - Eyebrow Text */}
                <div className="lg:col-span-1">
                  <div className="branded-tag-system">
                    <div className="dot"></div>
                    <span className="text">Who we are</span>
                  </div>
                </div>
                
                {/* Right Side - Main Heading */}
                <div className="lg:col-span-4">
                  <h2 className="text-h1 leading-tight" style={{ 
                    fontSize: 'clamp(2.5rem, 5vw, 4rem)',
                    lineHeight: '1.1',
                    color: 'var(--color-black)'
                  }}>
                    A global leadership development institution behind some of the world's most transformational leaders
                  </h2>
                </div>
              </div>
              
              {/* Updated Statistics Grid */}
              <div className="grid grid-cols-1 lg:grid-cols-4 gap-8 lg:gap-12 pt-12 border-t border-gray-200">
                <motion.div 
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: 0.1 }}
                  viewport={{ once: true }}
                  className="text-center lg:text-left"
                >
                  <div className="text-5xl lg:text-6xl font-medium mb-2" style={{
                    fontFamily: 'var(--font-family-base)',
                    lineHeight: '1',
                    color: 'var(--color-primary)'
                  }}>
                    150+
                  </div>
                  <div className="flex items-center justify-center lg:justify-start gap-2 text-body text-muted" style={{ fontFamily: 'var(--font-family-base)' }}>
                    <div className="w-2 h-2 rounded-sm" style={{ backgroundColor: 'var(--color-accent)' }}></div>
                    <span style={{ color: 'var(--color-black)', fontWeight: '500' }}>CORPORATES</span>
                  </div>
                </motion.div>
                
                <motion.div 
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: 0.2 }}
                  viewport={{ once: true }}
                  className="text-center lg:text-left"
                >
                  <div className="text-5xl lg:text-6xl font-medium mb-2" style={{
                    fontFamily: 'var(--font-family-base)',
                    lineHeight: '1',
                    color: 'var(--color-primary)'
                  }}>
                    27,000+
                  </div>
                  <div className="flex items-center justify-center lg:justify-start gap-2 text-body text-muted" style={{ fontFamily: 'var(--font-family-base)' }}>
                    <div className="w-2 h-2 rounded-sm" style={{ backgroundColor: 'var(--color-accent)' }}></div>
                    <span style={{ color: 'var(--color-black)', fontWeight: '500' }}>LEADERS</span>
                  </div>
                </motion.div>
                
                <motion.div 
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: 0.3 }}
                  viewport={{ once: true }}
                  className="text-center lg:text-left"
                >
                  <div className="text-5xl lg:text-6xl font-medium mb-2" style={{
                    fontFamily: 'var(--font-family-base)',
                    lineHeight: '1',
                    color: 'var(--color-primary)'
                  }}>
                    5,000+
                  </div>
                  <div className="flex items-center justify-center lg:justify-start gap-2 text-body text-muted" style={{ fontFamily: 'var(--font-family-base)' }}>
                    <div className="w-2 h-2 rounded-sm" style={{ backgroundColor: 'var(--color-accent)' }}></div>
                    <span style={{ color: 'var(--color-black)', fontWeight: '500' }}>ROOM NIGHTS</span>
                  </div>
                </motion.div>

                <motion.div 
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: 0.4 }}
                  viewport={{ once: true }}
                  className="text-center lg:text-left"
                >
                  <div className="text-3xl lg:text-4xl font-medium mb-2" style={{
                    fontFamily: 'var(--font-family-base)',
                    lineHeight: '1',
                    color: 'var(--color-primary)'
                  }}>
                    India & APAC
                  </div>
                  <div className="flex items-center justify-center lg:justify-start gap-2 text-body text-muted" style={{ fontFamily: 'var(--font-family-base)' }}>
                    <div className="w-2 h-2 rounded-sm" style={{ backgroundColor: 'var(--color-accent)' }}></div>
                    <span style={{ color: 'var(--color-black)', fontWeight: '500' }}>PRESENCE</span>
                  </div>
                </motion.div>
              </div>
            </motion.div>
          </div>
        </div>
      </section>



      {/* Section 4: Our Team */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
        <div className="section-margin-x">
          <div className="max-w-6xl mx-auto">
            {/* Centered Header Section */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              viewport={{ once: true }}
              className="text-center mb-16"
            >
              <BrandedTag text="Our Team" />
              <h2 className="text-h2 mb-8">Our Team</h2>
              <div className="max-w-4xl mx-auto text-center space-y-6">
                <p className="text-body-lg text-muted leading-relaxed">
                  We have a team of 7 consultants and 4 young consultants. All our senior Consultants are ex-business professionals with experience ranging from 15-30 years in varied business functions and carry a deep understanding of the area they are engaging in. Two of them bring in Board room experience. – Meet them
                </p>
              </div>
            </motion.div>

            {/* Team Members Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
              {teamMembers.map((member, index) => (
                <motion.div
                  key={member.name}
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  viewport={{ once: true }}
                  className="text-left cursor-pointer"
                  onClick={() => handleMemberClick(member)}
                >
                  <div className="relative mb-6 group">
                    <div className="aspect-square rounded-2xl overflow-hidden bg-gray-100 shadow-lg group-hover:shadow-xl transition-all duration-300">
                      <img
                        src={member.image}
                        alt={member.name}
                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                      />
                    </div>
                    
                    {/* Hover Overlay */}
                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-all duration-300 rounded-2xl flex items-center justify-center">
                      <div className="opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                        <div 
                          className="px-4 py-2 rounded-lg text-white text-small"
                          style={{
                            backgroundColor: '#04045B',
                            fontFamily: 'var(--font-family-base)',
                            fontWeight: '500'
                          }}
                        >
                          View Profile
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <div className="space-y-2">
                    <h3 className="text-h4 text-black group-hover:text-primary transition-colors duration-300">{member.name}</h3>
                    <p className="text-body text-muted leading-relaxed">
                      {member.role}
                    </p>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Section 5: Our Methodology */}
      <section className="py-16 lg:py-20" style={{ backgroundColor: '#FFFFFF' }}>
        <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"
            >
              <BrandedTag text="Our Methodology" />
              <h2 className="text-h2 mb-8">Our Methodology</h2>
            </motion.div>

            {/* Vertical Timeline Container */}
            <div className="relative max-w-6xl mx-auto">
              {/* Vertical Line Background - Gray - Ends exactly at Phase 3 dot */}
              <div 
                className="absolute left-4 top-0 w-0.5 bg-gray-300"
                style={{
                  height: 'calc(100% - 1rem)', // Adjusted to end exactly at Phase 3 dot
                  zIndex: 1
                }}
              ></div>
              
              {/* Vertical Line Fill - Blue - Animated on Scroll - Ends exactly at Phase 3 dot */}
              <div 
                id="timeline-fill-line"
                className="absolute left-4 top-0 w-0.5 transition-all duration-1000 ease-out"
                style={{
                  backgroundColor: 'var(--color-primary)',
                  height: '0%',
                  maxHeight: 'calc(100% - 1rem)', // Limit to Phase 3 dot position
                  zIndex: 2
                }}
              ></div>

              {/* Phase 1 - Understanding & Assessment */}
              <div className="relative pb-20">
                <div className="grid lg:grid-cols-12 gap-8 lg:gap-12 pl-12">
                  {/* Phase dot positioned absolutely */}
                  <div 
                    className="absolute left-3 top-1 w-2.5 h-2.5 rounded-full bg-white border-2 z-10"
                    style={{
                      borderColor: 'var(--color-primary)',
                    }}
                  ></div>
                  
                  {/* Column 1: Phase Label */}
                  <div className="lg:col-span-2">
                    <div className="branded-tag-system">
                      <div className="dot"></div>
                      <span className="text">Phase 1</span>
                    </div>
                  </div>
                  
                  {/* Column 2: Main Heading */}
                  <div className="lg:col-span-3">
                    <motion.div
                      initial={{ opacity: 0, y: 20 }}
                      whileInView={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.6 }}
                      viewport={{ once: true }}
                    >
                      <h3 className="text-h3">Understanding & Assessment</h3>
                    </motion.div>
                  </div>
                  
                  {/* Column 3: Content - Description and Bullet Points */}
                  <div className="lg:col-span-7">
                    <motion.div
                      initial={{ opacity: 0, y: 20 }}
                      whileInView={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.6 }}
                      viewport={{ once: true }}
                    >
                      <p className="text-body-lg text-muted leading-relaxed mb-6">
                        We believe that leadership is more than skill and style. Leadership is predicated by a person's orientations (typical behaviors) which shapes the leadership abilities and its fit to a context. The broader the fit of the orientation the more versatile a person is in his exercise of leadership in a variety of contexts.
                      </p>

                      <div className="mb-8">
                        <h4 className="text-h4 mb-4">Key Focus Areas:</h4>
                        
                        <div className="space-y-3">
                          <div className="flex items-start gap-3">
                            <div
                              className="w-1.5 h-1.5 rounded-full mt-2 flex-shrink-0"
                              style={{
                                backgroundColor: 'var(--color-primary)',
                              }}
                            ></div>
                            <span className="text-body text-muted">
                              Leadership orientations (typical behaviors) assessment.
                            </span>
                          </div>
                          
                          <div className="flex items-start gap-3">
                            <div
                              className="w-1.5 h-1.5 rounded-full mt-2 flex-shrink-0"
                              style={{
                                backgroundColor: 'var(--color-primary)',
                              }}
                            ></div>
                            <span className="text-body text-muted">
                              Action-consequence model application.
                            </span>
                          </div>
                          
                          <div className="flex items-start gap-3">
                            <div
                              className="w-1.5 h-1.5 rounded-full mt-2 flex-shrink-0"
                              style={{
                                backgroundColor: 'var(--color-primary)',
                              }}
                            ></div>
                            <span className="text-body text-muted">
                              Context alignment and strategy integration.
                            </span>
                          </div>
                        </div>
                      </div>
                    </motion.div>
                  </div>
                </div>
              </div>

              {/* Phase 2 - Development & Practice */}
              <div className="relative pb-20">
                <div className="grid lg:grid-cols-12 gap-8 lg:gap-12 pl-12">
                  {/* Phase dot positioned absolutely */}
                  <div 
                    className="absolute left-3 top-1 w-2.5 h-2.5 rounded-full bg-white border-2 z-10"
                    style={{
                      borderColor: 'var(--color-primary)',
                    }}
                  ></div>
                  
                  {/* Column 1: Phase Label */}
                  <div className="lg:col-span-2">
                    <div className="branded-tag-system">
                      <div className="dot"></div>
                      <span className="text">Phase 2</span>
                    </div>
                  </div>
                  
                  {/* Column 2: Main Heading */}
                  <div className="lg:col-span-3">
                    <motion.div
                      initial={{ opacity: 0, y: 20 }}
                      whileInView={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.6, delay: 0.2 }}
                      viewport={{ once: true }}
                    >
                      <h3 className="text-h3">Development & Practice</h3>
                    </motion.div>
                  </div>
                  
                  {/* Column 3: Content - Description and Bullet Points */}
                  <div className="lg:col-span-7">
                    <motion.div
                      initial={{ opacity: 0, y: 20 }}
                      whileInView={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.6, delay: 0.2 }}
                      viewport={{ once: true }}
                    >
                      <p className="text-body-lg text-muted leading-relaxed mb-4">
                        Thus, in our engagements with our clients we work with the individual using the action-consequence model to link up one's leadership orientations (typical behaviors) to outcomes.
                      </p>
                      
                      <p className="text-body-lg text-muted leading-relaxed mb-6">
                        Leadership is a social skill. Socially aware people shape the thought, emotions and actions of others better. The key to social-awareness is self-awareness. We help our learners become aware, gain insights and discover their fullest leadership potential. This in turn builds organizational leadership capacity & capabilities.
                      </p>

                      <div className="mb-8">
                        <h4 className="text-h4 mb-4">Development Process:</h4>
                        
                        <div className="space-y-3">
                          <div className="flex items-start gap-3">
                            <div
                              className="w-1.5 h-1.5 rounded-full mt-2 flex-shrink-0"
                              style={{
                                backgroundColor: 'var(--color-primary)',
                              }}
                            ></div>
                            <span className="text-body text-muted">
                              Self-awareness and insight facilitation.
                            </span>
                          </div>
                          
                          <div className="flex items-start gap-3">
                            <div
                              className="w-1.5 h-1.5 rounded-full mt-2 flex-shrink-0"
                              style={{
                                backgroundColor: 'var(--color-primary)',
                              }}
                            ></div>
                            <span className="text-body text-muted">
                              Leadership potential discovery sessions.
                            </span>
                          </div>
                          
                          <div className="flex items-start gap-3">
                            <div
                              className="w-1.5 h-1.5 rounded-full mt-2 flex-shrink-0"
                              style={{
                                backgroundColor: 'var(--color-primary)',
                              }}
                            ></div>
                            <span className="text-body text-muted">
                              Organizational capacity building.
                            </span>
                          </div>
                        </div>
                      </div>
                    </motion.div>
                  </div>
                </div>
              </div>

              {/* Phase 3 - Implementation & Mastery */}
              <div className="relative">
                <div className="grid lg:grid-cols-12 gap-8 lg:gap-12 pl-12">
                  {/* Phase dot positioned absolutely */}
                  <div 
                    className="absolute left-3 top-1 w-2.5 h-2.5 rounded-full bg-white border-2 z-10"
                    style={{
                      borderColor: 'var(--color-primary)',
                    }}
                  ></div>
                  
                  {/* Column 1: Phase Label */}
                  <div className="lg:col-span-2">
                    <div className="branded-tag-system">
                      <div className="dot"></div>
                      <span className="text">Phase 3</span>
                    </div>
                  </div>
                  
                  {/* Column 2: Main Heading */}
                  <div className="lg:col-span-3">
                    <motion.div
                      initial={{ opacity: 0, y: 20 }}
                      whileInView={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.6, delay: 0.4 }}
                      viewport={{ once: true }}
                    >
                      <h3 className="text-h3">Implementation & Mastery</h3>
                    </motion.div>
                  </div>
                  
                  {/* Column 3: Content - Description and Bullet Points */}
                  <div className="lg:col-span-7">
                    <motion.div
                      initial={{ opacity: 0, y: 20 }}
                      whileInView={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.6, delay: 0.4 }}
                      viewport={{ once: true }}
                    >
                      <p className="text-body-lg text-muted leading-relaxed mb-6">
                        Our approach to learning works on the 'Orientation Toning process', which is using 'Restraint and Release' of thought, emotions and actions. This release is moderated according to the demands of a context, without being tied down by one's default settings.
                      </p>

                      <div className="mb-8">
                        <h4 className="text-h4 mb-4">Mastery Framework:</h4>
                        
                        <div className="space-y-3 mb-8">
                          <div className="flex items-start gap-3">
                            <div
                              className="w-1.5 h-1.5 rounded-full mt-2 flex-shrink-0"
                              style={{
                                backgroundColor: 'var(--color-primary)',
                              }}
                            ></div>
                            <span className="text-body text-muted">
                              Orientation Toning process implementation.
                            </span>
                          </div>
                          
                          <div className="flex items-start gap-3">
                            <div
                              className="w-1.5 h-1.5 rounded-full mt-2 flex-shrink-0"
                              style={{
                                backgroundColor: 'var(--color-primary)',
                              }}
                            ></div>
                            <span className="text-body text-muted">
                              Context-responsive leadership adaptation.
                            </span>
                          </div>
                          
                          <div className="flex items-start gap-3">
                            <div
                              className="w-1.5 h-1.5 rounded-full mt-2 flex-shrink-0"
                              style={{
                                backgroundColor: 'var(--color-primary)',
                              }}
                            ></div>
                            <span className="text-body text-muted">
                              Sustainable behavior change integration.
                            </span>
                          </div>
                        </div>

                        {/* Leadership Process Flow - Integrated */}
                        <div 
                          className="p-8 rounded-2xl text-white"
                          style={{ 
                            background: 'linear-gradient(135deg, var(--color-primary) 0%, #030359 100%)'
                          }}
                        >
                          <h3 className="text-h3-white mb-6">Leadership Process Flow</h3>
                          <p className="text-body-white mb-8 opacity-90">
                            Our proven methodology connects orientations to abilities and outcomes through structured development.
                          </p>
                          
                          <div className="space-y-4">
                            <div className="flex items-center gap-4">
                              <div 
                                className="w-8 h-8 rounded-full flex items-center justify-center"
                                style={{ backgroundColor: 'var(--color-accent)' }}
                              >
                                <ArrowRight className="w-4 h-4 text-black" />
                              </div>
                              <span className="text-body-white">Leadership Orientations</span>
                            </div>
                            <div className="flex items-center gap-4">
                              <div 
                                className="w-8 h-8 rounded-full flex items-center justify-center"
                                style={{ backgroundColor: 'var(--color-accent)' }}
                              >
                                <ArrowRight className="w-4 h-4 text-black" />
                              </div>
                              <span className="text-body-white">Leadership Abilities</span>
                            </div>
                            <div className="flex items-center gap-4">
                              <div 
                                className="w-8 h-8 rounded-full flex items-center justify-center"
                                style={{ backgroundColor: 'var(--color-accent)' }}
                              >
                                <ArrowRight className="w-4 h-4 text-black" />
                              </div>
                              <span className="text-body-white">Leadership Outcomes</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </motion.div>
                  </div>
                </div>
              </div>
            </div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.3 }}
              viewport={{ once: true }}
              className="flex justify-center items-center mt-16"
            >
              <PrimaryCTAButton 
                text="Design your leadership journey"
                onClick={() => navigateTo('/contact')}
                ariaLabel="Contact us to design your leadership journey"
                className="cta-text-black"
              />
            </motion.div>
          </div>
        </div>
      </section>



      {/* Testimonials Section */}
      <TestimonialsSection 
        title="What Our Clients Say About Us"
        subtitle="Hear from leaders who have transformed their approach through our comprehensive leadership development programs."
        tagText="Client Success Stories"
      />

      {/* CTA Banner Section */}
      <CTABannerSection />

      {/* Team Member Modal */}
      <TeamMemberModal 
        member={selectedMember}
        isOpen={isModalOpen}
        onClose={handleCloseModal}
      />
    </div>
  );
}