import React, { useState, useEffect, useCallback } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { navigateTo } from './Router';
import svgPaths from "../imports/svg-i1joeov37f";
 
interface SlideData {
  id: number;
  title: string;
  description: string;
  backgroundImage: string;
  shortTitle: string;
}
 
export default function HeroSection() {
  const [currentSlide, setCurrentSlide] = useState(0);
  const [isAutoPlaying, setIsAutoPlaying] = useState(true);
  const [progressValues, setProgressValues] = useState([0, 0, 0]);
 
  const slides: SlideData[] = [
    {
      id: 1,
      title: "Empowering Future-Ready\nLeaders",
      description: "Build confidence, agility, and clarity for today's complex challenges.",
      backgroundImage: "https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80",
      shortTitle: "Leadership Is Learned. We Teach It Right."
    },
    {
      id: 2,
      title: "Turn Managers into\nImpactful Leaders",
      description: "Transform your management team into visionary leaders who inspire teams, drive innovation, and achieve exceptional business outcomes.",
      backgroundImage: "https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80",
      shortTitle: "Turn Managers into Impactful Leaders"
    },
    {
      id: 3,
      title: "Struggling with\nManagerial Gaps?",
      description: "Bridge the leadership gap in your organization with our proven methodologies that develop confident, capable leaders at every level.",
      backgroundImage: "https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80",
      shortTitle: "Struggling with Managerial Gaps?"
    }
  ];
 
  const totalSlides = slides.length;
  const slideDuration = 5000; // 5 seconds per slide
 
  // Auto-advance slides
  useEffect(() => {
    if (!isAutoPlaying) return;
 
    const interval = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % totalSlides);
    }, slideDuration);
 
    return () => clearInterval(interval);
  }, [isAutoPlaying, totalSlides]);
 
  // Progress bar animation
  useEffect(() => {
    if (!isAutoPlaying) return;
 
    const interval = setInterval(() => {
      setProgressValues(prev => {
        const newProgress = [...prev];
        newProgress[currentSlide] = Math.min(newProgress[currentSlide] + (100 / (slideDuration / 100)), 100);
        // Reset progress when slide changes
        if (newProgress[currentSlide] >= 100) {
          newProgress[currentSlide] = 0;
          // Reset other slides
          newProgress.forEach((_, index) => {
            if (index !== currentSlide) {
              newProgress[index] = 0;
            }
          });
        }
        return newProgress;
      });
    }, 100);
 
    return () => clearInterval(interval);
  }, [currentSlide, isAutoPlaying]);
 
  // Reset progress when manually changing slides
  useEffect(() => {
    setProgressValues(prev => {
      const newProgress = [0, 0, 0];
      newProgress[currentSlide] = 0;
      return newProgress;
    });
  }, [currentSlide]);
 
  const goToSlide = useCallback((slideIndex: number) => {
    if (slideIndex !== currentSlide) {
      setCurrentSlide(slideIndex);
      setIsAutoPlaying(false);
      // Resume auto-play after manual interaction
      setTimeout(() => setIsAutoPlaying(true), 3000);
    }
  }, [currentSlide]);
 
  const nextSlide = useCallback(() => {
    const next = (currentSlide + 1) % totalSlides;
    goToSlide(next);
  }, [currentSlide, totalSlides, goToSlide]);
 
  const prevSlide = useCallback(() => {
    const prev = (currentSlide - 1 + totalSlides) % totalSlides;
    goToSlide(prev);
  }, [currentSlide, totalSlides, goToSlide]);
 
  // Pause auto-play on hover
  const handleMouseEnter = () => setIsAutoPlaying(false);
  const handleMouseLeave = () => setIsAutoPlaying(true);
 
  return (
    <section 
      className="hero-section"
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {/* Background Slides */}
      {slides.map((slide, index) => (
        <div
          key={slide.id}
          className={`hero-slide ${index === currentSlide ? 'active' : ''}`}
          style={{
            backgroundImage: `url('${slide.backgroundImage}')`
          }}
        >
          <div className="hero-overlay" />
        </div>
      ))}
 
      {/* Hero Content */}
      <div className="hero-content">
        <div className="hero-text-section">
          {/* Title */}
          <h1 className="hero-title" style={{ whiteSpace: 'pre-line' }}>
            {slides[currentSlide].title}
          </h1>
          {/* Description */}
          <p className="hero-description">
            {slides[currentSlide].description}
          </p>

          {/* Build Your Leadership Pipeline Button - Enhanced with Proper Navigation */}
          <button 
            className="hero-slide-button group box-border content-stretch flex flex-row gap-2.5 items-center justify-start p-0 relative cursor-pointer overflow-hidden"
            style={{ 
              background: 'transparent',
              border: 'none'
            }}
            onClick={() => {
              console.log('Hero button clicked - navigating to contact page');
              navigateTo('/contact?topic=leadership-pipeline');
            }}
            aria-label="Build Your Leadership Pipeline"
          >
            {/* Icon Container with Slide Animation */}
            <div className="relative shrink-0 size-[50px] overflow-hidden">
              {/* Background Rectangle - Consistent Blue Color */}
              <div className="absolute inset-0 bg-[#04045B]" />
              
              {/* Icon Layer - Sliding Animation */}
              <div className="icon-layer absolute inset-0 w-full h-full">
                {/* Primary Arrow - Slides out diagonally up-right */}
                <div className="icon absolute inset-0 flex items-center justify-center transition-all duration-300 ease-in-out group-hover:translate-x-6 group-hover:-translate-y-6 group-hover:opacity-0">
                  <svg
                    className="block w-full h-full"
                    fill="none"
                    preserveAspectRatio="none"
                    viewBox="0 0 50 50"
                  >
                    <g clipPath="url(#clip0_95_1043_primary)">
                      <path d={svgPaths.p5b8d700} fill="white" />
                      <path d={svgPaths.p30b71a00} fill="white" />
                    </g>
                    <defs>
                      <clipPath id="clip0_95_1043_primary">
                        <rect fill="white" height="50" width="50" />
                      </clipPath>
                    </defs>
                  </svg>
                </div>
                
                {/* Secondary Arrow - Slides in from bottom-left */}
                <div className="icon absolute inset-0 flex items-center justify-center opacity-0 -translate-x-6 translate-y-6 transition-all duration-300 ease-in-out group-hover:translate-x-0 group-hover:translate-y-0 group-hover:opacity-100">
                  <svg
                    className="block w-full h-full"
                    fill="none"
                    preserveAspectRatio="none"
                    viewBox="0 0 50 50"
                  >
                    <g clipPath="url(#clip0_95_1043_secondary)">
                      <path d={svgPaths.p5b8d700} fill="white" />
                      <path d={svgPaths.p30b71a00} fill="white" />
                    </g>
                    <defs>
                      <clipPath id="clip0_95_1043_secondary">
                        <rect fill="white" height="50" width="50" />
                      </clipPath>
                    </defs>
                  </svg>
                </div>
              </div>
            </div>

            {/* Text Section with Vertical Slide Animation */}
            <div className="text-layer relative shrink-0 overflow-hidden flex items-center" style={{ 
              height: '28px',
              fontFamily: 'Inter, sans-serif',
              fontSize: '20px',
              fontWeight: '400',
              lineHeight: '28px',
              whiteSpace: 'nowrap',
              color: '#ffffff'
            }}>
              {/* Primary Text - Slides up and out */}
              <div 
                className="text-element absolute inset-0 flex items-center justify-start transition-all duration-300 ease-in-out group-hover:-translate-y-full group-hover:opacity-0" 
                style={{
                  color: '#ffffff !important',
                  textShadow: '0 1px 2px rgba(0, 0, 0, 0.4)',
                  fontFamily: 'Inter, sans-serif',
                  fontSize: '20px',
                  fontWeight: '400',
                  lineHeight: '28px'
                }}
              >
                Build Your Leadership Pipeline
              </div>
              
              {/* Secondary Text - Slides in from bottom */}
              <div 
                className="text-element absolute inset-0 flex items-center justify-start translate-y-full opacity-0 transition-all duration-300 ease-in-out group-hover:translate-y-0 group-hover:opacity-100" 
                style={{
                  color: '#ffffff !important',
                  textShadow: '0 1px 2px rgba(0, 0, 0, 0.4)',
                  fontFamily: 'Inter, sans-serif',
                  fontSize: '20px',
                  fontWeight: '400',
                  lineHeight: '28px'
                }}
              >
                Build Your Leadership Pipeline
              </div>
            </div>
          </button>
        </div>
      </div>
 
      {/* Bottom Navigation */}
      <div className="hero-navigation">
        {/* Progress Section */}
        <div className="hero-progress-container">
          {slides.map((slide, index) => (
            <div 
              key={slide.id}
              className="hero-progress-item"
              onClick={() => goToSlide(index)}
            >
              {/* Progress Bar */}
              <div 
                className={`hero-progress-segment ${index === currentSlide ? 'active' : ''}`}
              >
                <div 
                  className="hero-progress-fill"
                  style={{ width: index === currentSlide ? `${progressValues[index]}%` : '0%' }}
                />
              </div>

              {/* Progress Number */}
              <div className={`hero-progress-number ${index === currentSlide ? 'active' : ''}`}>
                {String(index + 1).padStart(2, '0')}
              </div>

              {/* Progress Text */}
              <div className={`hero-progress-text ${index === currentSlide ? 'active' : ''}`}>
                {slide.shortTitle}
              </div>
            </div>
          ))}
        </div>
 
        {/* Navigation Arrows */}
        <div className="hero-controls">
          <button
            className="hero-nav-button"
            onClick={prevSlide}
            aria-label="Previous slide"
          >
            <ChevronLeft className="w-5 h-5" />
          </button>
          <button
            className="hero-nav-button"
            onClick={nextSlide}
            aria-label="Next slide"
          >
            <ChevronRight className="w-5 h-5" />
          </button>
        </div>
      </div>
    </section>
  );
}