UseCases Section

import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { 
  Heart, 
  Car, 
  Briefcase, 
  ArrowRight,
} from 'lucide-react';

const UseCases = () => {
  const [activeCase, setActiveCase] = useState(0);

  const useCases = [
    {
      icon: Heart,
      title: "Healthcare AI",
      description: "Revolutionize patient care with diagnostic assistance and treatment optimization systems.",
      features: ["Medical image analysis", "Treatment recommendations", "Patient monitoring", "Drug discovery"],
      color: "from-green-500 to-emerald-500"
    },
    {
      icon: Car,
      title: "Autonomous Systems",
      description: "Power the future of transportation with advanced computer vision and decision-making AI.",
      features: ["Object detection", "Path planning", "Real-time navigation", "Safety systems"],
      color: "from-orange-500 to-red-500"
    },
    {
      icon: Briefcase,
      title: "Financial Services",
      description: "Enhance risk management and trading strategies with sophisticated financial AI models.",
      features: ["Risk assessment", "Fraud detection", "Algorithmic trading", "Compliance monitoring"],
      color: "from-indigo-500 to-blue-500"
    },
  ];

  return (
    <section className="py-20 bg-gradient-to-br from-gray-50 to-blue-50 relative overflow-hidden transition-all duration-700 dark:bg-gradient-to-br dark:from-gray-800 dark:to-gray-950">
      {/* Background Pattern */}
      <div className={`absolute inset-0 bg-[linear-gradient(45deg,rgba(59,130,246,0.05)_1px,transparent_1px),linear-gradient(-45deg,rgba(59,130,246,0.05)_1px,transparent_1px)] dark:bg-[linear-gradient(45deg,rgba(59,130,246,0.1)_1px,transparent_1px),linear-gradient(-45deg,rgba(59,130,246,0.1)_1px,transparent_1px)] bg-[size:20px_20px]`} />
      
      {/* Floating Elements */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        {[...Array(6)].map((_, i) => (
          <motion.div
            key={i}
            className="absolute w-32 h-32 bg-gradient-to-r from-blue-400/10 to-purple-400/10 rounded-full blur-xl"
            animate={{
              x: [0, 100, 0],
              y: [0, -50, 0],
              scale: [1, 1.2, 1],
              rotate: [0, 180, 360],
            }}
            transition={{
              duration: 10 + i * 2,
              repeat: Infinity,
              repeatType: "reverse",
            }}
            style={{
              left: `${10 + i * 15}%`,
              top: `${20 + i * 10}%`,
            }}
          />
        ))}
      </div>
      
      <div className="relative z-10 max-w-7xl mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8 }}
          className="text-center mb-16"
        >
          <motion.h2 
            className={`text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent`}
            animate={{ 
              backgroundPosition: ['0% 50%', '100% 50%', '0% 50%'],
            }}
            transition={{ 
              duration: 8,
              repeat: Infinity,
              repeatType: "reverse"
            }}
          >
            Endless Possibilities
          </motion.h2>
          <motion.p 
            className={`text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto`}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.3 }}
          >
            Discover how our AI technology transforms industries and creates new opportunities
          </motion.p>
        </motion.div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Use Case Tabs */}
          <div className="space-y-4">
            {useCases.map((useCase, index) => {
              const IconComponent = useCase.icon;
              return (
                <motion.button
                  key={index}
                  onClick={() => setActiveCase(index)}
                  whileHover={{ 
                    scale: 1.02,
                    x: 10,
                    transition: { duration: 0.2 }
                  }}
                  whileTap={{ scale: 0.98 }}
                  initial={{ opacity: 0, x: -50 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: index * 0.1 }}
                  className={`w-full text-left p-6 rounded-xl border transition-all duration-300 backdrop-blur-sm ${
                    activeCase === index
                      ? "dark:bg-gray-700 border-blue-500 shadow-lg shadow-blue-500/25 bg-white dark:border-blue-400 dark:shadow-lg dark:shadow-blue-400/25"
                      : "dark:bg-gray-800/50 dark:border-gray-600 dark:hover:border-gray-500 bg-white/70 border-gray-300 hover:border-gray-400"
                  }`}
                >
                  <div className="flex items-center space-x-4">
                    <motion.div 
                      className={`p-3 rounded-lg bg-gradient-to-r ${useCase.color}`}
                      animate={activeCase === index ? { 
                        scale: [1, 1.1, 1],
                        rotate: [0, 5, -5, 0]
                      } : {}}
                      transition={{ duration: 0.5 }}
                    >
                      <IconComponent className="w-6 h-6 text-white" />
                    </motion.div>
                    <div className="flex-1">
                      <h3 className={`text-xl font-bold text-gray-900 dark:text-white mb-2`}>
                        {useCase.title}
                      </h3>
                      <p className={`text-gray-600 dark:text-gray-400 text-sm`}>
                        {useCase.description}
                      </p>
                    </div>
                    <motion.div
                      animate={activeCase === index ? { rotate: 90 } : { rotate: 0 }}
                      transition={{ duration: 0.3 }}
                    >
                      <ArrowRight className={`w-5 h-5 transition-colors ${
                        activeCase === index ? 'text-blue-400' : "text-gray-600 dark:text-gray-400"
                      }`} />
                    </motion.div>
                  </div>
                </motion.button>
              );
            })}
          </div>

          {/* Active Use Case Details */}
          <div className="relative">
            <AnimatePresence mode="wait">
              <motion.div
                key={activeCase}
                initial={{ opacity: 0, x: 50, rotateY: 90 }}
                animate={{ opacity: 1, x: 0, rotateY: 0 }}
                exit={{ opacity: 0, x: -50, rotateY: -90 }}
                transition={{ duration: 0.2, stiffness: 100}}
                className={`bg-white/80 border-gray-200 dark:bg-gray-800/80 dark:border-gray-700 backdrop-blur-sm rounded-xl p-8 border shadow-xl`}
              >
                <motion.div
                  initial={{ scale: 0, rotate: -180 }}
                  animate={{ scale: 1, rotate: 0 }}
                  transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
                  className={`inline-flex p-4 rounded-lg bg-gradient-to-r ${useCases[activeCase].color} mb-6`}
                >
                  {(() => {
                    const CurrentIcon = useCases[activeCase].icon;
                    return <CurrentIcon className="w-8 h-8 text-white" />;
                  })()}
                </motion.div>
                
                <motion.h3 
                  className={`text-2xl font-bold text-gray-900 dark:text-white mb-4`}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.3 }}
                >
                  {useCases[activeCase].title}
                </motion.h3>
                
                <motion.p 
                  className={`text-gray-600 dark:text-gray-400 mb-6 leading-relaxed`}
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ delay: 0.4 }}
                >
                  {useCases[activeCase].description}
                </motion.p>
                
                <div className="space-y-3">
                  <motion.h4 
                    className={`text-lg font-semibold text-gray-900 dark:text-white`}
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    transition={{ delay: 0.5 }}
                  >
                    Key Features:
                  </motion.h4>
                  {useCases[activeCase].features.map((feature: string, index: number) => (
                    <motion.div
                      key={index}
                      initial={{ opacity: 0, x: 20 }}
                      animate={{ opacity: 1, x: 0 }}
                      transition={{ delay: 0.6 + index * 0.1 }}
                      className="flex items-center space-x-3"
                    >
                      <motion.div 
                        className="w-2 h-2 bg-blue-400 rounded-full"
                        animate={{ 
                          scale: [1, 1.5, 1],
                          opacity: [0.7, 1, 0.7]
                        }}
                        transition={{ 
                          duration: 2,
                          repeat: Infinity,
                          delay: index * 0.2
                        }}
                      />
                      <span className="text-gray-600 dark:text-gray-400">{feature}</span>
                    </motion.div>
                  ))}
                </div>
              </motion.div>
            </AnimatePresence>
          </div>
        </div>
      </div>
    </section>
  );
};

export default UseCases;