"use client"
import React, { useState } from 'react';
import { 
  Cloud, 
  Database, 
  HardDrive, 
  Network, 
  Brain, 
  BarChart, 
  Shield, 
  Layers,
  FolderOpen,
  Zap,
  Hexagon,
  Server,
  Monitor,
  Cpu,
  Globe,
} from 'lucide-react';

interface Service {
  icon: React.ReactNode;
  title: string;
  description: string;
  color: string;
}

interface ServiceCategory {
  [key: string]: Service[];
}

const ServicesSection: React.FC = () => {
  const [activeTab, setActiveTab] = useState('Featured');

  const tabs = [
    'Featured',
    'Compute', 
    'Storage',
    'Networking',
    'Databases'
  ];

  const services: ServiceCategory = {
    Featured: [
      {
        icon: <Server className="w-8 h-8 text-white" />,
        title: 'Elastic Cloud Server (ECS)',
        description: 'Get your own secure, scalable virtual servers in the cloud',
        color: 'bg-blue-500'
      },
      {
        icon: <Cloud className="w-8 h-8 text-white" />,
        title: 'Object Storage Service (OBS)',
        description: 'Take advantage of infinitely scalable, durable, and secure object storage',
        color: 'bg-green-500'
      },
      {
        icon: <Network className="w-8 h-8 text-white" />,
        title: 'Virtual Private Cloud (VPC)',
        description: 'Guard your system with isolated, private networks',
        color: 'bg-purple-500'
      },
      {
        icon: <Database className="w-8 h-8 text-white" />,
        title: 'RDS for MySQL',
        description: 'Power your LAMP stack with this popular, open-source database',
        color: 'bg-orange-500'
      },
      {
        icon: <Monitor className="w-8 h-8 text-white" />,
        title: 'Bare Metal Server (BMS)',
        description: 'Run services on dedicated, powerful physical servers',
        color: 'bg-red-500'
      },
      {
        icon: <HardDrive className="w-8 h-8 text-white" />,
        title: 'Elastic Volume Service (EVS)',
        description: 'Give your servers persistent block storage',
        color: 'bg-indigo-500'
      },
      {
        icon: <Shield className="w-8 h-8 text-white" />,
        title: 'Virtual Private Network (VPN)',
        description: 'Connect your local data center to the cloud through secure and reliable IPsec connections',
        color: 'bg-teal-500'
      },
      {
        icon: <Database className="w-8 h-8 text-white" />,
        title: 'TaurusDB',
        description: 'A MySQL-compatible enterprise-grade database',
        color: 'bg-pink-500'
      }
    ],
    Compute: [
      {
        icon: <Server className="w-8 h-8 text-white" />,
        title: 'Elastic Cloud Server (ECS)',
        description: 'Get your own secure, scalable virtual servers in the cloud',
        color: 'bg-blue-500'
      },
      {
        icon: <Monitor className="w-8 h-8 text-white" />,
        title: 'Bare Metal Server (BMS)',
        description: 'Run services on dedicated, powerful physical servers',
        color: 'bg-red-500'
      },
      {
        icon: <Zap className="w-8 h-8 text-white" />,
        title: '3engines Cloud Flexus',
        description: 'Next-generation products with transcendent performance and experience',
        color: 'bg-yellow-500'
      },
      {
        icon: <BarChart className="w-8 h-8 text-white" />,
        title: 'Auto Scaling',
        description: 'Adapt compute resources to changing demand',
        color: 'bg-green-500'
      },
      {
        icon: <Layers className="w-8 h-8 text-white" />,
        title: 'Image Management Service (IMS)',
        description: 'Create and deploy servers faster with images',
        color: 'bg-purple-500'
      },
      {
        icon: <Brain className="w-8 h-8 text-white" />,
        title: 'FunctionGraph',
        description: 'Run your code without provisioning or managing servers',
        color: 'bg-orange-500'
      },
      {
        icon: <Hexagon className="w-8 h-8 text-white" />,
        title: 'Dedicated Computing Cluster (DCC)',
        description: 'Physically isolate compute resource pools for your workloads',
        color: 'bg-indigo-500'
      },
      {
        icon: <Cpu className="w-8 h-8 text-white" />,
        title: 'GPU Accelerated Cloud Server (GACS)',
        description: 'Get servers with excellent floating-point performance',
        color: 'bg-teal-500'
      }
    ],
    Storage: [
      {
        icon: <Cloud className="w-8 h-8 text-white" />,
        title: 'Object Storage Service (OBS)',
        description: 'Take advantage of infinitely scalable, durable, and secure object storage',
        color: 'bg-green-500'
      },
      {
        icon: <Shield className="w-8 h-8 text-white" />,
        title: 'Storage Disaster Recovery Service (SDRS)',
        description: 'Enjoy cross-AZ, zero-RPO data protection for your ECSs',
        color: 'bg-blue-500'
      },
      {
        icon: <HardDrive className="w-8 h-8 text-white" />,
        title: 'Elastic Volume Service (EVS)',
        description: 'Give your servers persistent block storage',
        color: 'bg-orange-500'
      },
      {
        icon: <Database className="w-8 h-8 text-white" />,
        title: 'Cloud Backup and Recovery (CBR)',
        description: 'Centrally manage backups of your cloud and on-premises resources',
        color: 'bg-purple-500'
      },
      {
        icon: <FolderOpen className="w-8 h-8 text-white" />,
        title: 'Scalable File Service (SFS)',
        description: 'Enjoy fully hosted NAS file systems',
        color: 'bg-yellow-500'
      },
      {
        icon: <Zap className="w-8 h-8 text-white" />,
        title: 'Data Express Service (DES)',
        description: 'Transmit massive volumes of data safely and quickly to 3engines Cloud',
        color: 'bg-red-500'
      },
      {
        icon: <Hexagon className="w-8 h-8 text-white" />,
        title: 'Dedicated Distributed Storage Service (DSS)',
        description: 'Get dedicated, physical block storage',
        color: 'bg-indigo-500'
      },
      {
        icon: <Server className="w-8 h-8 text-white" />,
        title: 'Cloud Server Backup Service (CSBS)',
        description: 'Consistently back up disks on your cloud servers',
        color: 'bg-teal-500'
      }
    ],
    Networking: [
      {
        icon: <Network className="w-8 h-8 text-white" />,
        title: 'Virtual Private Cloud (VPC)',
        description: 'Guard your system with isolated, private networks',
        color: 'bg-blue-500'
      },
      {
        icon: <Shield className="w-8 h-8 text-white" />,
        title: 'Virtual Private Network (VPN)',
        description: 'Connect your local data center to the cloud through secure and reliable IPsec connections',
        color: 'bg-green-500'
      },
      {
        icon: <Globe className="w-8 h-8 text-white" />,
        title: 'Cloud Connect',
        description: 'Connect VPCs across regions',
        color: 'bg-purple-500'
      },
      {
        icon: <Network className="w-8 h-8 text-white" />,
        title: 'Elastic IP (EIP)',
        description: 'Create highly available systems with static public IP addresses',
        color: 'bg-orange-500'
      },
      {
        icon: <BarChart className="w-8 h-8 text-white" />,
        title: 'Elastic Load Balance (ELB)',
        description: 'Distribute incoming traffic across multiple backend servers',
        color: 'bg-red-500'
      },
      {
        icon: <Network className="w-8 h-8 text-white" />,
        title: 'NAT Gateway',
        description: 'Enable network address translation for cloud and on-premises servers',
        color: 'bg-yellow-500'
      },
      {
        icon: <Zap className="w-8 h-8 text-white" />,
        title: 'Direct Connect',
        description: 'Establish dedicated network connections to 3engines Cloud',
        color: 'bg-indigo-500'
      },
      {
        icon: <Layers className="w-8 h-8 text-white" />,
        title: 'Enterprise Switch (ESW)',
        description: 'Connect cloud and on-premises networks at Layer 2',
        color: 'bg-teal-500'
      }
    ],
    Databases: [
      {
        icon: <Database className="w-8 h-8 text-white" />,
        title: 'RDS for MySQL',
        description: 'Power your LAMP stack with this popular, open-source database',
        color: 'bg-blue-500'
      },
      {
        icon: <Database className="w-8 h-8 text-white" />,
        title: 'TaurusDB',
        description: 'A MySQL-compatible enterprise-grade database',
        color: 'bg-green-500'
      },
      {
        icon: <Database className="w-8 h-8 text-white" />,
        title: 'GaussDB',
        description: 'An enterprise-grade, distributed relational database',
        color: 'bg-purple-500'
      },
      {
        icon: <Database className="w-8 h-8 text-white" />,
        title: 'Document Database Service (DDS)',
        description: 'A MongoDB-compatible document database deployed in a cluster, replica set, or single node',
        color: 'bg-orange-500'
      },
      {
        icon: <Database className="w-8 h-8 text-white" />,
        title: 'RDS for PostgreSQL',
        description: 'An open-source database that ensures data reliability and integrity',
        color: 'bg-red-500'
      },
      {
        icon: <Database className="w-8 h-8 text-white" />,
        title: 'GeminiDB',
        description: 'A multi-model NoSQL database compatible with Redis, Mongo, and more',
        color: 'bg-yellow-500'
      },
      {
        icon: <Zap className="w-8 h-8 text-white" />,
        title: 'Data Replication Service (DRS)',
        description: 'Migrate your databases with minimal downtime',
        color: 'bg-indigo-500'
      },
      {
        icon: <Layers className="w-8 h-8 text-white" />,
        title: 'Distributed Database Middleware (DDM)',
        description: 'Scale out resources to handle massive volumes of concurrent requests',
        color: 'bg-teal-500'
      }
    ]
  };

  return (
    <section className="py-16 bg-gray-50">
      <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-3xl font-bold text-gray-700">Products and services</h2>
        </div>

        {/* Tabs */}
        <div className="mb-12">
          <div className="flex flex-wrap justify-center gap-2 md:gap-4">
            {tabs.map((tab) => (
              <button
                key={tab}
                onClick={() => setActiveTab(tab)}
                className={`px-4 py-2 text-sm font-medium rounded-t-lg transition-colors ${
                  activeTab === tab
                    ? 'text-blue-600 border-b-2 border-blue-600 bg-white'
                    : 'text-gray-600 hover:text-gray-700 bg-transparent'
                }`}
              >
                {tab}
              </button>
            ))}
          </div>
          <div className="border-b border-gray-200 mt-0"></div>
        </div>

        {/* Service Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {services[activeTab]?.map((service, index) => (
            <div
              key={index}
              className="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow p-6 border border-gray-200"
            >
              <div className="flex flex-col items-center text-center space-y-4">
                <div className={`w-16 h-16 ${service.color} rounded-xl flex items-center justify-center`}>
                  {service.icon}
                </div>
                <div className="space-y-2">
                  <h3 className="text-lg font-semibold text-gray-700 leading-tight">
                    {service.title}
                  </h3>
                  <p className="text-sm text-gray-600 leading-relaxed">
                    {service.description}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Show message if no services for selected tab */}
        {(!services[activeTab] || services[activeTab].length === 0) && (
          <div className="text-center py-12">
            <p className="text-gray-500">No services available for this category.</p>
          </div>
        )}
      </div>
    </section>
  );
};

export default ServicesSection;