"use client";
import { useState } from 'react';
import { MousePointer, Command, Coins, HeartHandshake } from 'lucide-react';

const benefits = [
  {
    icon: <MousePointer className="w-6 h-6" />,
    title: "User-Friendly",
    description: "Intuitive, drag-and-drop design means you can focus on what matters—your expertise.",
    gradient: "from-purple-500/10 via-purple-500/5 to-transparent"
  },
  {
    icon: <Command className="w-6 h-6" />,
    title: "All-in-One Solution",
    description: "No need for multiple tools; manage everything from one centralized platform.",
    gradient: "from-blue-500/10 via-blue-500/5 to-transparent"
  },
  {
    icon: <Coins className="w-6 h-6" />,
    title: "Scalable Revenue Streams",
    description: "Monetize your services through community building and our AI marketplace.",
    gradient: "from-indigo-500/10 via-indigo-500/5 to-transparent"
  },
  {
    icon: <HeartHandshake className="w-6 h-6" />,
    title: "Dedicated Support",
    description: "Our expert team is here to help you succeed every step of the way.",
    gradient: "from-violet-500/10 via-violet-500/5 to-transparent"
  }
];

export default function WhyChooseUs() {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);

  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">Why Choose Us</h2>
          <p className="text-xl text-gray-400">Everything you need to succeed with AI</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
          {benefits.map((benefit, index) => (
            <div
              key={index}
              className="relative group"
              onMouseEnter={() => setHoveredIndex(index)}
              onMouseLeave={() => setHoveredIndex(null)}
            >
              {/* Animated background */}
              <div className={`
                absolute inset-0 opacity-0 group-hover:opacity-100
                bg-gradient-to-r ${benefit.gradient}
                transition-all duration-500 rounded-3xl
              `} />

              {/* Content container */}
              <div className="relative p-8">
                <div className="flex items-start gap-6">
                  {/* Icon container */}
                  <div className={`
                    w-12 h-12 rounded-xl
                    flex items-center justify-center
                    bg-gradient-to-br from-purple-500/20 to-blue-500/20
                    transition-all duration-500 text-white
                    ${hoveredIndex === index ? 'scale-110 rotate-3' : 'scale-100 rotate-0'}
                  `}>
                    {benefit.icon}
                  </div>

                  {/* Text content */}
                  <div className="flex-1">
                    <h3 className={`
                      text-2xl text-white mb-3
                      transition-transform duration-500
                      ${hoveredIndex === index ? 'translate-x-2' : 'translate-x-0'}
                    `}>
                      {benefit.title}
                    </h3>
                    <p className={`
                      text-gray-400 leading-relaxed
                      transition-all duration-500
                      ${hoveredIndex === index ? 'opacity-100' : 'opacity-80'}
                    `}>
                      {benefit.description}
                    </p>
                  </div>
                </div>

                {/* Decorative elements */}
                <div className={`
                  absolute bottom-0 right-0 w-24 h-24
                  bg-gradient-to-br from-purple-500/5 to-blue-500/5
                  rounded-full blur-2xl
                  transition-opacity duration-500
                  ${hoveredIndex === index ? 'opacity-100' : 'opacity-0'}
                `} />
              </div>
            </div>
          ))}
        </div>

        {/* Bottom decoration */}
        <div className="relative mt-16 flex justify-center">
          <div className="w-32 h-1 bg-gradient-to-r from-transparent via-purple-500/30 to-transparent" />
        </div>
      </div>
    </div>
  );
}