"use client";
import { useState, useEffect } from 'react';
import { ArrowRight, Wand2, Palette, Rocket } from 'lucide-react';

const steps = [
  {
    icon: <Wand2 className="w-8 h-8" />,
    title: "Convert & Enhance Your Services",
    description: "Use our intuitive tools to turn your current offerings into interactive AI agents",
    color: "from-purple-500/30 to-blue-500/30"
  },
  {
    icon: <Palette className="w-8 h-8" />,
    title: "Customize Your Experience",
    description: "Leverage our drag-and-drop builder and creative suite (forms, video editor, writer, newsletter) to tailor your AI solutions",
    color: "from-blue-500/30 to-purple-500/30"
  },
  {
    icon: <Rocket className="w-8 h-8" />,
    title: "Launch & Monetize",
    description: "Build your community or list your AI services on our marketplace—boost your revenue by tapping into a growing market of SMBs seeking smart solutions",
    color: "from-purple-500/30 to-pink-500/30"
  }
];

export default function HowItWorks() {
  const [activeStep, setActiveStep] = useState(0);
  const [isHovering, setIsHovering] = useState(false);

  useEffect(() => {
    if (isHovering) return;
    const timer = setInterval(() => {
      setActiveStep((prev) => (prev + 1) % steps.length);
    }, 5000);
    return () => clearInterval(timer);
  }, [isHovering]);

  return (
    <div className="w-full py-32">
      <div className="container mx-auto px-4">
        <div className="text-center mb-24">
          <h2 className="text-4xl md:text-6xl text-white mb-8">How It Works</h2>
          <p className="text-xl text-gray-400">Transform your business with AI in three simple steps</p>
        </div>

        <div className="relative max-w-6xl mx-auto">
          {/* Connecting line */}
          <div className="absolute top-24 left-0 w-full h-px">
            <div className="relative w-full h-full">
              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-purple-500/20 to-transparent" />
              <div 
                className="absolute h-full bg-gradient-to-r from-purple-500 to-blue-500 transition-all duration-1000"
                style={{ 
                  width: `${(activeStep + 1) * 33.33}%`,
                  opacity: 0.3
                }}
              />
            </div>
          </div>

          <div className="relative flex justify-between items-start gap-12">
            {steps.map((step, index) => (
              <div
                key={index}
                className="flex-1"
                onMouseEnter={() => {
                  setIsHovering(true);
                  setActiveStep(index);
                }}
                onMouseLeave={() => setIsHovering(false)}
              >
                <div className="relative">
                  {/* Icon container */}
                  <div 
                    className={`
                      relative z-10 w-20 h-20 mx-auto mb-8
                      rounded-2xl overflow-hidden
                      transition-all duration-500 ease-out
                      ${activeStep === index ? 'scale-110' : 'scale-100'}
                    `}
                  >
                    <div className={`
                      absolute inset-0 bg-gradient-to-br ${step.color}
                      transition-opacity duration-500
                      ${activeStep === index ? 'opacity-100' : 'opacity-50'}
                    `} />
                    <div className={`
                      absolute inset-0 flex items-center justify-center
                      transition-transform duration-500
                      ${activeStep === index ? 'scale-110 text-white' : 'scale-100 text-gray-500'}
                    `}>
                      {step.icon}
                    </div>
                  </div>

                  {/* Content */}
                  <div className={`
                    p-8 rounded-2xl
                    transition-all duration-500 ease-out
                    ${activeStep === index ? 'bg-purple-900/20 translate-y-0 opacity-100' : 'bg-transparent translate-y-4 opacity-60'}
                  `}>
                    <h3 className="text-2xl text-white mb-4">{step.title}</h3>
                    <p className="text-gray-400 leading-relaxed">{step.description}</p>
                  </div>
                </div>

                {/* Step indicator */}
                <div className={`
                  mt-6 flex justify-center items-center gap-2
                  transition-opacity duration-500
                  ${activeStep === index ? 'opacity-100' : 'opacity-50'}
                `}>
                  <span className="text-sm text-purple-400">Step {index + 1}</span>
                  {index < steps.length - 1 && (
                    <ArrowRight className="w-4 h-4 text-purple-400" />
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="text-center mt-24">
          <button className="
            group relative overflow-hidden
            px-10 py-5 rounded-full
            text-white text-lg
            transition-all duration-300
            hover:shadow-lg hover:shadow-purple-500/20
          ">
            <div className="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600 opacity-80 group-hover:opacity-100 transition-opacity" />
            <span className="relative">Explore Features</span>
          </button>
        </div>
      </div>
    </div>
  );
}