3engines/src/components/Home/SolutionsCarousel.tsx

"use client"
import React, { useState, useEffect } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';

interface Solution {
  id: string;
  title: string;
  description: string;
  backgroundImage: string;
  category: string;
}

const SolutionsCarousel: React.FC = () => {
  const [activeTab, setActiveTab] = useState('E-Commerce');
  const [currentSlide, setCurrentSlide] = useState(0);

  const tabs = [
    'E-Commerce',
    'Automotive', 
    'Insurance',
    'Media & Entertainment',
    'Gaming',
    'Industries'
  ];

  const solutions: { [key: string]: Solution[] } = {
    'E-Commerce': [
      {
        id: 'ecommerce-1',
        title: 'E-Commerce',
        description: 'Build scalable online retail platforms with secure payment processing, inventory management, and customer analytics to drive digital commerce growth.',
        backgroundImage: '/images/ecommerce-bg.jpg',
        category: 'E-Commerce'
      }
    ],
    'Automotive': [
      {
        id: 'automotive-1',
        title: 'Automotive',
        description: 'Transform the automotive industry with connected vehicle solutions, autonomous driving technologies, and smart manufacturing processes.',
        backgroundImage: '/images/ecommerce-bg.jpg',
        category: 'Automotive'
      }
    ],
    'Insurance': [
      {
        id: 'insurance-1',
        title: 'Insurance',
        description: 'Rapidly establish comprehensive insurance service systems to ease digital transformation with compliant, secure, and reliable infrastructure such as FinTech Cloud and Dedicated Cloud.',
        backgroundImage: '/images/ecommerce-bg.jpg',
        category: 'Insurance'
      }
    ],
    'Media & Entertainment': [
      {
        id: 'media-1',
        title: 'Media & Entertainment',
        description: 'Deliver high-quality streaming experiences with content delivery networks, media processing, and audience engagement platforms.',
        backgroundImage: '/images/ecommerce-bg.jpg',
        category: 'Media & Entertainment'
      }
    ],
    'Gaming': [
      {
        id: 'gaming-1',
        title: 'Gaming',
        description: 'Power immersive gaming experiences with low-latency infrastructure, real-time multiplayer capabilities, and scalable game backend services.',
        backgroundImage: '/images/ecommerce-bg.jpg',
        category: 'Gaming'
      }
    ],
    'Smart City': [
      {
        id: 'smartcity-1',
        title: 'Industries',
        description: 'Build intelligent urban infrastructure with IoT sensors, data analytics, and AI-powered solutions for sustainable city management.',
        backgroundImage: '/images/ecommerce-bg.jpg',
        category: 'Industries'
      }
    ]
  };

  const currentSolutions = solutions[activeTab] || [];

  const nextSlide = () => {
    setCurrentSlide((prev) => 
      prev === currentSolutions.length - 1 ? 0 : prev + 1
    );
  };

  const prevSlide = () => {
    setCurrentSlide((prev) => 
      prev === 0 ? currentSolutions.length - 1 : prev - 1
    );
  };

  // Reset current slide when tab changes
  useEffect(() => {
    setCurrentSlide(0);
  }, [activeTab]);

  return (
    <section className="py-16 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Title */}
        <div className="text-center mb-12">
          <h2 className="text-4xl font-bold text-gray-700 max-w-4xl mx-auto leading-tight">
            Solutions for Unleashing Digital and Powering Innovation
          </h2>
        </div>

        {/* Tabs */}
        <div className="mb-8">
          <div className="flex flex-wrap justify-center gap-8 md:gap-12 lg:gap-16">
            {tabs.map((tab) => (
              <button
                key={tab}
                onClick={() => setActiveTab(tab)}
                className={`px-2 py-3 text-sm md:text-base font-medium transition-colors whitespace-nowrap ${
                  activeTab === tab
                    ? 'text-gray-700 border-b-2 border-gray-900'
                    : 'text-gray-500 hover:text-gray-700'
                }`}
              >
                {tab}
              </button>
            ))}
          </div>
        </div>

        {/* Carousel */}
        <div className="relative">
          {currentSolutions.length > 0 && (
            <div className="relative h-96 md:h-[500px] rounded-2xl overflow-hidden">
              {/* Background Image */}
              <div 
                className="absolute inset-0 bg-cover bg-center bg-no-repeat"
                style={{
                  backgroundImage: `url('${currentSolutions[currentSlide]?.backgroundImage}')`,
                }}
              >
                {/* Overlay */}
                <div className="absolute inset-0 bg-black/40"></div>
              </div>

              {/* Content */}
              <div className="relative h-full flex items-center">
                <div className="max-w-2xl px-8 md:px-16">
                  <h3 className="text-4xl md:text-5xl font-bold text-white mb-6">
                    {currentSolutions[currentSlide]?.title}
                  </h3>
                  <p className="text-lg md:text-xl text-white/90 mb-8 leading-relaxed">
                    {currentSolutions[currentSlide]?.description}
                  </p>
                  <button className="inline-flex items-center px-8 py-3 bg-transparent border-2 border-white text-white font-medium rounded-full hover:bg-white hover:text-gray-700 transition-colors">
                    Learn more
                  </button>
                </div>
              </div>

              {/* Navigation Arrows */}
              {currentSolutions.length > 1 && (
                <>
                  <button
                    onClick={prevSlide}
                    className="absolute left-4 top-1/2 transform -translate-y-1/2 w-12 h-12 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center transition-colors backdrop-blur-sm"
                  >
                    <ChevronLeft className="w-6 h-6 text-white" />
                  </button>
                  <button
                    onClick={nextSlide}
                    className="absolute right-4 top-1/2 transform -translate-y-1/2 w-12 h-12 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center transition-colors backdrop-blur-sm"
                  >
                    <ChevronRight className="w-6 h-6 text-white" />
                  </button>
                </>
              )}

              {/* Dots Indicator */}
              {currentSolutions.length > 1 && (
                <div className="absolute bottom-6 left-1/2 transform -translate-x-1/2 flex space-x-2">
                  {currentSolutions.map((_, index) => (
                    <button
                      key={index}
                      onClick={() => setCurrentSlide(index)}
                      className={`w-3 h-3 rounded-full transition-colors ${
                        index === currentSlide ? 'bg-white' : 'bg-white/50'
                      }`}
                    />
                  ))}
                </div>
              )}
            </div>
          )}

          {/* Empty State */}
          {currentSolutions.length === 0 && (
            <div className="h-96 md:h-[500px] bg-gray-100 rounded-2xl flex items-center justify-center">
              <p className="text-gray-500 text-lg">No solutions available for this category</p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

export default SolutionsCarousel;