import React, { useState } from 'react';
import { motion } from 'motion/react';
import { Building2, User, ArrowRight, ChevronLeft, Shield, Users, Target, BookOpen } from 'lucide-react';
import { Button } from './ui/button';
import { navigateTo } from './Router';
import { BrandedTag } from './about/BrandedTag';

interface JourneyOption {
  id: string;
  title: string;
  description: string;
  icon: React.ReactNode;
  benefits: string[];
  buttonText: string;
  onClick: () => void;
}

export function LeadershipJourneyPage() {
  const [hoveredOption, setHoveredOption] = useState<string | null>(null);

  const journeyOptions: JourneyOption[] = [
    {
      id: 'corporate',
      title: 'Corporate Login',
      description: 'Access your organization\'s leadership development programs and track team progress.',
      icon: <Building2 className="w-8 h-8" />,
      benefits: [
        'Team management and tracking',
        'Enterprise-grade security',
        'Customized learning paths',
        'Advanced analytics and reporting'
      ],
      buttonText: 'Access Corporate Portal',
      onClick: () => navigateTo('/corporate-login')
    },
    {
      id: 'self-learner',
      title: 'Self Learner',
      description: 'Begin your personal leadership journey with our comprehensive individual programs.',
      icon: <User className="w-8 h-8" />,
      benefits: [
        'Personalized learning experience',
        'Self-paced development',
        'Individual progress tracking',
        'Direct access to resources'
      ],
      buttonText: 'Start Personal Journey',
      onClick: () => navigateTo('/self-learner-signup')
    }
  ];

  return (
    <div className="min-h-screen" style={{ backgroundColor: '#F7F7FD' }}>
      {/* Header Section */}
      <section className="py-20" style={{ backgroundColor: 'var(--color-brand-bg-white)' }}>
        <div className="max-w-7xl mx-auto section-margin-x">


          {/* Branded Tag */}
          <motion.div 
            className="mb-6 text-center"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            <BrandedTag text="Choose Your Path" />
          </motion.div>

          {/* Main Heading */}
          <motion.div 
            className="text-center mb-6"
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.2 }}
          >
            <h1 
              className="text-5xl font-bold leading-tight max-lg:text-4xl max-md:text-3xl mb-6"
              style={{ color: 'var(--color-brand-black)' }}
            >
              Start Your Leadership Journey
            </h1>
          </motion.div>
        </div>
      </section>

      {/* Journey Options Section */}
      <section className="py-20">
        <div className="max-w-7xl mx-auto section-margin-x">
          <div className="grid md:grid-cols-2 gap-12">
            {journeyOptions.map((option, index) => (
              <motion.div
                key={option.id}
                className="relative"
                initial={{ opacity: 0, y: 40 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.7, delay: 0.6 + index * 0.2 }}
                onHoverStart={() => setHoveredOption(option.id)}
                onHoverEnd={() => setHoveredOption(null)}
              >
                <div 
                  className="bg-white rounded-2xl p-8 h-full shadow-lg border border-gray-100 transition-all duration-300 hover:shadow-2xl hover:-translate-y-2"
                  style={{
                    transform: hoveredOption === option.id ? 'translateY(-8px)' : 'translateY(0)',
                    boxShadow: hoveredOption === option.id 
                      ? '0 25px 50px -12px rgba(0, 0, 0, 0.15)' 
                      : '0 10px 25px -5px rgba(0, 0, 0, 0.1)'
                  }}
                >
                  {/* Icon Container */}
                  <div 
                    className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 transition-all duration-300"
                    style={{ 
                      backgroundColor: hoveredOption === option.id 
                        ? 'var(--color-brand-accent)' 
                        : 'var(--color-brand-primary)' 
                    }}
                  >
                    <div style={{ color: hoveredOption === option.id ? 'var(--color-brand-black)' : 'white' }}>
                      {option.icon}
                    </div>
                  </div>

                  {/* Content */}
                  <h3 
                    className="text-2xl font-bold mb-4"
                    style={{ color: 'var(--color-brand-black)' }}
                  >
                    {option.title}
                  </h3>

                  <p className="text-gray-600 text-lg leading-relaxed mb-6">
                    {option.description}
                  </p>

                  {/* Benefits List */}
                  <div className="mb-8">
                    <h4 className="text-sm font-semibold text-gray-800 mb-4 uppercase tracking-wider">
                      Key Benefits
                    </h4>
                    <ul className="space-y-3">
                      {option.benefits.map((benefit, benefitIndex) => (
                        <motion.li
                          key={benefitIndex}
                          className="flex items-start gap-3"
                          initial={{ opacity: 0, x: -10 }}
                          animate={{ opacity: 1, x: 0 }}
                          transition={{ duration: 0.5, delay: 0.8 + index * 0.2 + benefitIndex * 0.1 }}
                        >
                          <div 
                            className="w-2 h-2 rounded-full mt-2 flex-shrink-0"
                            style={{ backgroundColor: 'var(--color-brand-accent)' }}
                          />
                          <span className="text-gray-700 leading-relaxed">{benefit}</span>
                        </motion.li>
                      ))}
                    </ul>
                  </div>

                  {/* CTA Button */}
                  <motion.button
                    className="w-full flex items-center justify-center gap-3 px-8 py-4 font-semibold text-lg transition-all duration-300 hover:shadow-lg hover:-translate-y-1"
                    style={{ 
                      borderRadius: '10px',
                      backgroundColor: hoveredOption === option.id 
                        ? 'var(--color-brand-primary)' 
                        : 'var(--color-brand-accent)',
                      color: hoveredOption === option.id 
                        ? 'white' 
                        : 'var(--color-brand-black)'
                    }}
                    onClick={option.onClick}
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                  >
                    <span>{option.buttonText}</span>
                    <ArrowRight className="w-5 h-5" />
                  </motion.button>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>


    </div>
  );
}