'use client';

import { useState } from 'react';

// Icon components using Google Material Icons style
const ComputeIcon = () => (
    <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" data-oid=":uqtrc0">
        <path
            d="M20,18c1.1,0,2-0.9,2-2V6c0-1.1-0.9-2-2-2H4C2.9,4,2,4.9,2,6v10c0,1.1,0.9,2,2,2H0v2h24v-2H20z M4,6h16v10H4V6z"
            data-oid="mb.r3ux"
        />
    </svg>
);

const ServerlessIcon = () => (
    <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" data-oid="z-jvetb">
        <path
            d="M12,2L13.09,8.26L22,9L13.09,9.74L12,16L10.91,9.74L2,9L10.91,8.26L12,2M12,21L10.91,14.74L2,14L10.91,13.26L12,7L13.09,13.26L22,14L13.09,14.74L12,21Z"
            data-oid="un4jkzr"
        />
    </svg>
);

const ContainerIcon = () => (
    <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" data-oid="2ntaum4">
        <path
            d="M2,3H8V5H16V3H22V9H16V7H8V9H2V3M2,10H8V12H16V10H22V16H16V14H8V16H2V10M2,17H8V19H16V17H22V23H16V21H8V23H2V17Z"
            data-oid="c7iye:-"
        />
    </svg>
);

const StorageIcon = () => (
    <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" data-oid="fjq7.:i">
        <path
            d="M4,6V4H20V6H4M20,18A2,2 0 0,0 22,16V8A2,2 0 0,0 20,6H4A2,2 0 0,0 2,8V16A2,2 0 0,0 4,18H20M4,8H20V16H4V8Z"
            data-oid="pdefuu3"
        />
    </svg>
);

const DatabaseIcon = () => (
    <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" data-oid="3wuep.a">
        <path
            d="M12,3C7.58,3 4,4.79 4,7C4,9.21 7.58,11 12,11C16.42,11 20,9.21 20,7C20,4.79 16.42,3 12,3M4,9V12C4,14.21 7.58,16 12,16C16.42,16 20,14.21 20,12V9C20,11.21 16.42,13 12,13C7.58,13 4,11.21 4,9M4,14V17C4,19.21 7.58,21 12,21C16.42,21 20,19.21 20,17V14C20,16.21 16.42,18 12,18C7.58,18 4,16.21 4,14Z"
            data-oid="h9vvsrk"
        />
    </svg>
);

const CacheIcon = () => (
    <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" data-oid="97fj9u1">
        <path
            d="M12,16A3,3 0 0,1 9,13C9,11.88 9.61,10.9 10.5,10.39L20.21,4.77L21.32,6.11L10.21,12.83A1,1 0 0,0 10,13A1,1 0 0,0 11,14A1,1 0 0,0 12,13A1,1 0 0,0 11,12A1,1 0 0,0 10.5,12.17L19.32,6.89L20.43,8.22L12,13.7A3,3 0 0,1 12,16M6,19A3,3 0 0,1 3,16C3,14.88 3.61,13.9 4.5,13.39L14.21,7.77L15.32,9.11L4.21,15.83A1,1 0 0,0 4,16A1,1 0 0,0 5,17A1,1 0 0,0 6,16A1,1 0 0,0 5,15A1,1 0 0,0 4.5,15.17L13.32,9.89L14.43,11.22L6,16.7A3,3 0 0,1 6,19Z"
            data-oid="d4nc1te"
        />
    </svg>
);

const AIIcon = () => (
    <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" data-oid="-5xxuu3">
        <path
            d="M12,2A2,2 0 0,1 14,4C14,4.74 13.6,5.39 13,5.73V7H14A7,7 0 0,1 21,14H22A1,1 0 0,1 23,15V18A1,1 0 0,1 22,19H21V20A2,2 0 0,1 19,22H5A2,2 0 0,1 3,20V19H2A1,1 0 0,1 1,18V15A1,1 0 0,1 2,14H3A7,7 0 0,1 10,7H11V5.73C10.4,5.39 10,4.74 10,4A2,2 0 0,1 12,2M7.5,13A2.5,2.5 0 0,0 5,15.5A2.5,2.5 0 0,0 7.5,18A2.5,2.5 0 0,0 10,15.5A2.5,2.5 0 0,0 7.5,13M16.5,13A2.5,2.5 0 0,0 14,15.5A2.5,2.5 0 0,0 16.5,18A2.5,2.5 0 0,0 19,15.5A2.5,2.5 0 0,0 16.5,13Z"
            data-oid="o3v27ff"
        />
    </svg>
);

const VisionIcon = () => (
    <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" data-oid="_9bqctn">
        <path
            d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
            data-oid="_.c3ww_"
        />
    </svg>
);

const TextIcon = () => (
    <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" data-oid="pn5z:ed">
        <path
            d="M18.5,4L19.66,8.35L24,9.5L19.66,10.65L18.5,15L17.34,10.65L13,9.5L17.34,8.35L18.5,4M12.5,11L14,17.5L20.5,19L14,20.5L12.5,27L11,20.5L4.5,19L11,17.5L12.5,11M6.5,2L7.66,6.35L12,7.5L7.66,8.65L6.5,13L5.34,8.65L1,7.5L5.34,6.35L6.5,2Z"
            data-oid="pwbv4kz"
        />
    </svg>
);

const FileIcon = () => (
    <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" data-oid="gl6vj8l">
        <path
            d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"
            data-oid="q2n1_b:"
        />
    </svg>
);

// Icon mapping
const getProductIcon = (productName: string) => {
    const iconMap: { [key: string]: JSX.Element } = {
        'Amazon EC2': <ComputeIcon data-oid="kxjwrys" />,
        'AWS Lambda': <ServerlessIcon data-oid="70.3y.d" />,
        'Amazon ECS': <ContainerIcon data-oid="kt:t4s8" />,
        'Amazon S3': <StorageIcon data-oid="isfclnf" />,
        'Amazon EBS': <StorageIcon data-oid="r1wo4._" />,
        'Amazon EFS': <FileIcon data-oid="smjn1sy" />,
        'Amazon RDS': <DatabaseIcon data-oid="-2p7x9e" />,
        'Amazon DynamoDB': <DatabaseIcon data-oid=".u:.rph" />,
        'Amazon ElastiCache': <CacheIcon data-oid="ubu8a97" />,
        'Amazon SageMaker': <AIIcon data-oid="efcyyex" />,
        'Amazon Rekognition': <VisionIcon data-oid="ek8fbjm" />,
        'Amazon Comprehend': <TextIcon data-oid="0_2pelu" />,
    };

    return iconMap[productName] || <ComputeIcon data-oid="h:ij85s" />;
};

interface AWSProductsSectionProps {
    currentLang: string;
}

export default function AWSProductsSection({ currentLang }: AWSProductsSectionProps) {
    const [activeCategory, setActiveCategory] = useState('compute');

    const content = {
        'zh-CN': {
            title: 'AWS 主流产品',
            subtitle: '全面的云计算服务产品组合',
            categories: {
                compute: '计算服务',
                storage: '存储服务',
                database: '数据库服务',
                ai: 'AI/ML服务',
            },
            products: {
                compute: [
                    {
                        name: 'Amazon EC2',
                        description: '可扩展的云计算容量',
                        features: ['按需付费', '多种实例类型', '全球部署', '高可用性'],
                        icon: 'Amazon EC2',
                    },
                    {
                        name: 'AWS Lambda',
                        description: '无服务器计算服务',
                        features: ['事件驱动', '自动扩展', '按使用付费', '多语言支持'],
                        icon: 'AWS Lambda',
                    },
                    {
                        name: 'Amazon ECS',
                        description: '容器编排服务',
                        features: ['Docker支持', '微服务架构', '负载均衡', '服务发现'],
                        icon: 'Amazon ECS',
                    },
                ],

                storage: [
                    {
                        name: 'Amazon S3',
                        description: '对象存储服务',
                        features: ['99.999999999%持久性', '无限扩展', '多种存储类别', '数据加密'],
                        icon: 'Amazon S3',
                    },
                    {
                        name: 'Amazon EBS',
                        description: '块存储服务',
                        features: ['高性能', '快照备份', '加密支持', '多种卷类型'],
                        icon: 'Amazon EBS',
                    },
                    {
                        name: 'Amazon EFS',
                        description: '文件存储服务',
                        features: ['完全托管', '自动扩展', 'POSIX兼容', '高吞吐量'],
                        icon: 'Amazon EFS',
                    },
                ],

                database: [
                    {
                        name: 'Amazon RDS',
                        description: '关系数据库服务',
                        features: ['多引擎支持', '自动备份', '读取副本', '监控告警'],
                        icon: 'Amazon RDS',
                    },
                    {
                        name: 'Amazon DynamoDB',
                        description: 'NoSQL数据库服务',
                        features: ['毫秒级延迟', '自动扩展', '全球表', '备份恢复'],
                        icon: 'Amazon DynamoDB',
                    },
                    {
                        name: 'Amazon ElastiCache',
                        description: '内存缓存服务',
                        features: ['Redis/Memcached', '高性能', '自动故障转移', '监控分析'],
                        icon: 'Amazon ElastiCache',
                    },
                ],

                ai: [
                    {
                        name: 'Amazon SageMaker',
                        description: '机器学习平台',
                        features: ['端到端ML', '预构建算法', '模型部署', 'AutoML'],
                        icon: 'Amazon SageMaker',
                    },
                    {
                        name: 'Amazon Rekognition',
                        description: '图像和视频分析',
                        features: ['人脸识别', '对象检测', '文本识别', '内容审核'],
                        icon: 'Amazon Rekognition',
                    },
                    {
                        name: 'Amazon Comprehend',
                        description: '自然语言处理',
                        features: ['情感分析', '实体识别', '语言检测', '主题建模'],
                        icon: 'Amazon Comprehend',
                    },
                ],
            },
        },
        'zh-TW': {
            title: 'AWS 主流產品',
            subtitle: '全面的雲端運算服務產品組合',
            categories: {
                compute: '運算服務',
                storage: '儲存服務',
                database: '資料庫服務',
                ai: 'AI/ML服務',
            },
            products: {
                compute: [
                    {
                        name: 'Amazon EC2',
                        description: '可擴展的雲端運算容量',
                        features: ['按需付費', '多種實例類型', '全球部署', '高可用性'],
                        icon: 'Amazon EC2',
                    },
                    {
                        name: 'AWS Lambda',
                        description: '無伺服器運算服務',
                        features: ['事件驅動', '自動擴展', '按使用付費', '多語言支援'],
                        icon: 'AWS Lambda',
                    },
                    {
                        name: 'Amazon ECS',
                        description: '容器編排服務',
                        features: ['Docker支援', '微服務架構', '負載平衡', '服務發現'],
                        icon: 'Amazon ECS',
                    },
                ],

                storage: [
                    {
                        name: 'Amazon S3',
                        description: '物件儲存服務',
                        features: ['99.999999999%持久性', '無限擴展', '多種儲存類別', '資料加密'],
                        icon: 'Amazon S3',
                    },
                    {
                        name: 'Amazon EBS',
                        description: '區塊儲存服務',
                        features: ['高效能', '快照備份', '加密支援', '多種卷類型'],
                        icon: 'Amazon EBS',
                    },
                    {
                        name: 'Amazon EFS',
                        description: '檔案儲存服務',
                        features: ['完全託管', '自動擴展', 'POSIX相容', '高吞吐量'],
                        icon: 'Amazon EFS',
                    },
                ],

                database: [
                    {
                        name: 'Amazon RDS',
                        description: '關聯式資料庫服務',
                        features: ['多引擎支援', '自動備份', '讀取副本', '監控告警'],
                        icon: 'Amazon RDS',
                    },
                    {
                        name: 'Amazon DynamoDB',
                        description: 'NoSQL資料庫服務',
                        features: ['毫秒級延遲', '自動擴展', '全球表', '備份恢復'],
                        icon: 'Amazon DynamoDB',
                    },
                    {
                        name: 'Amazon ElastiCache',
                        description: '記憶體快取服務',
                        features: ['Redis/Memcached', '高效能', '自動故障轉移', '監控分析'],
                        icon: 'Amazon ElastiCache',
                    },
                ],

                ai: [
                    {
                        name: 'Amazon SageMaker',
                        description: '機器學習平台',
                        features: ['端到端ML', '預構建演算法', '模型部署', 'AutoML'],
                        icon: 'Amazon SageMaker',
                    },
                    {
                        name: 'Amazon Rekognition',
                        description: '圖像和影片分析',
                        features: ['人臉識別', '物件檢測', '文字識別', '內容審核'],
                        icon: 'Amazon Rekognition',
                    },
                    {
                        name: 'Amazon Comprehend',
                        description: '自然語言處理',
                        features: ['情感分析', '實體識別', '語言檢測', '主題建模'],
                        icon: 'Amazon Comprehend',
                    },
                ],
            },
        },
        en: {
            title: 'AWS Core Products',
            subtitle: 'Comprehensive cloud computing service portfolio',
            categories: {
                compute: 'Compute Services',
                storage: 'Storage Services',
                database: 'Database Services',
                ai: 'AI/ML Services',
            },
            products: {
                compute: [
                    {
                        name: 'Amazon EC2',
                        description: 'Scalable cloud computing capacity',
                        features: [
                            'Pay-as-you-go',
                            'Multiple instance types',
                            'Global deployment',
                            'High availability',
                        ],

                        icon: 'Amazon EC2',
                    },
                    {
                        name: 'AWS Lambda',
                        description: 'Serverless computing service',
                        features: [
                            'Event-driven',
                            'Auto scaling',
                            'Pay per use',
                            'Multi-language support',
                        ],

                        icon: 'AWS Lambda',
                    },
                    {
                        name: 'Amazon ECS',
                        description: 'Container orchestration service',
                        features: [
                            'Docker support',
                            'Microservices',
                            'Load balancing',
                            'Service discovery',
                        ],

                        icon: 'Amazon ECS',
                    },
                ],

                storage: [
                    {
                        name: 'Amazon S3',
                        description: 'Object storage service',
                        features: [
                            '99.999999999% durability',
                            'Unlimited scaling',
                            'Multiple storage classes',
                            'Data encryption',
                        ],

                        icon: 'Amazon S3',
                    },
                    {
                        name: 'Amazon EBS',
                        description: 'Block storage service',
                        features: [
                            'High performance',
                            'Snapshot backup',
                            'Encryption support',
                            'Multiple volume types',
                        ],

                        icon: 'Amazon EBS',
                    },
                    {
                        name: 'Amazon EFS',
                        description: 'File storage service',
                        features: [
                            'Fully managed',
                            'Auto scaling',
                            'POSIX compatible',
                            'High throughput',
                        ],

                        icon: 'Amazon EFS',
                    },
                ],

                database: [
                    {
                        name: 'Amazon RDS',
                        description: 'Relational database service',
                        features: [
                            'Multi-engine support',
                            'Automated backups',
                            'Read replicas',
                            'Monitoring & alerts',
                        ],

                        icon: 'Amazon RDS',
                    },
                    {
                        name: 'Amazon DynamoDB',
                        description: 'NoSQL database service',
                        features: [
                            'Millisecond latency',
                            'Auto scaling',
                            'Global tables',
                            'Backup & restore',
                        ],

                        icon: 'Amazon DynamoDB',
                    },
                    {
                        name: 'Amazon ElastiCache',
                        description: 'In-memory caching service',
                        features: [
                            'Redis/Memcached',
                            'High performance',
                            'Auto failover',
                            'Monitoring & analytics',
                        ],

                        icon: 'Amazon ElastiCache',
                    },
                ],

                ai: [
                    {
                        name: 'Amazon SageMaker',
                        description: 'Machine learning platform',
                        features: [
                            'End-to-end ML',
                            'Pre-built algorithms',
                            'Model deployment',
                            'AutoML',
                        ],

                        icon: 'Amazon SageMaker',
                    },
                    {
                        name: 'Amazon Rekognition',
                        description: 'Image and video analysis',
                        features: [
                            'Face recognition',
                            'Object detection',
                            'Text recognition',
                            'Content moderation',
                        ],

                        icon: 'Amazon Rekognition',
                    },
                    {
                        name: 'Amazon Comprehend',
                        description: 'Natural language processing',
                        features: [
                            'Sentiment analysis',
                            'Entity recognition',
                            'Language detection',
                            'Topic modeling',
                        ],

                        icon: 'Amazon Comprehend',
                    },
                ],
            },
        },
        ko: {
            title: 'AWS 핵심 제품',
            subtitle: '포괄적인 클라우드 컴퓨팅 서비스 포트폴리오',
            categories: {
                compute: '컴퓨팅 서비스',
                storage: '스토리지 서비스',
                database: '데이터베이스 서비스',
                ai: 'AI/ML 서비스',
            },
            products: {
                compute: [
                    {
                        name: 'Amazon EC2',
                        description: '확장 가능한 클라우드 컴퓨팅 용량',
                        features: [
                            '사용한 만큼 지불',
                            '다양한 인스턴스 유형',
                            '글로벌 배포',
                            '고가용성',
                        ],

                        icon: 'Amazon EC2',
                    },
                    {
                        name: 'AWS Lambda',
                        description: '서버리스 컴퓨팅 서비스',
                        features: [
                            '이벤트 기반',
                            '자동 확장',
                            '사용량 기반 요금',
                            '다중 언어 지원',
                        ],

                        icon: 'AWS Lambda',
                    },
                    {
                        name: 'Amazon ECS',
                        description: '컨테이너 오케스트레이션 서비스',
                        features: ['Docker 지원', '마이크로서비스', '로드 밸런싱', '서비스 검색'],
                        icon: 'Amazon ECS',
                    },
                ],

                storage: [
                    {
                        name: 'Amazon S3',
                        description: '객체 스토리지 서비스',
                        features: [
                            '99.999999999% 내구성',
                            '무제한 확장',
                            '다양한 스토리지 클래스',
                            '데이터 암호화',
                        ],

                        icon: '🗄️',
                    },
                    {
                        name: 'Amazon EBS',
                        description: '블록 스토리지 서비스',
                        features: ['고성능', '스냅샷 백업', '암호화 지원', '다양한 볼륨 유형'],
                        icon: '💾',
                    },
                    {
                        name: 'Amazon EFS',
                        description: '파일 스토리지 서비스',
                        features: ['완전 관리형', '자동 확장', 'POSIX 호환', '높은 처리량'],
                        icon: '📁',
                    },
                ],

                database: [
                    {
                        name: 'Amazon RDS',
                        description: '관계형 데이터베이스 서비스',
                        features: [
                            '다중 엔진 지원',
                            '자동 백업',
                            '읽기 전용 복제본',
                            '모니터링 및 알림',
                        ],

                        icon: 'Amazon RDS',
                    },
                    {
                        name: 'Amazon DynamoDB',
                        description: 'NoSQL 데이터베이스 서비스',
                        features: [
                            '밀리초 지연 시간',
                            '자동 확장',
                            '글로벌 테이블',
                            '백업 및 복원',
                        ],

                        icon: 'Amazon DynamoDB',
                    },
                    {
                        name: 'Amazon ElastiCache',
                        description: '인메모리 캐싱 서비스',
                        features: [
                            'Redis/Memcached',
                            '고성능',
                            '자동 장애 조치',
                            '모니터링 및 분석',
                        ],

                        icon: 'Amazon ElastiCache',
                    },
                ],

                ai: [
                    {
                        name: 'Amazon SageMaker',
                        description: '머신러닝 플랫폼',
                        features: ['엔드투엔드 ML', '사전 구축된 알고리즘', '모델 배포', 'AutoML'],
                        icon: 'Amazon SageMaker',
                    },
                    {
                        name: 'Amazon Rekognition',
                        description: '이미지 및 비디오 분석',
                        features: ['얼굴 인식', '객체 감지', '텍스트 인식', '콘텐츠 조정'],
                        icon: 'Amazon Rekognition',
                    },
                    {
                        name: 'Amazon Comprehend',
                        description: '자연어 처리',
                        features: ['감정 분석', '개체 인식', '언어 감지', '주제 모델링'],
                        icon: 'Amazon Comprehend',
                    },
                ],
            },
        },
        ja: {
            title: 'AWS コア製品',
            subtitle: '包括的なクラウドコンピューティングサービスポートフォリオ',
            categories: {
                compute: 'コンピューティングサービス',
                storage: 'ストレージサービス',
                database: 'データベースサービス',
                ai: 'AI/MLサービス',
            },
            products: {
                compute: [
                    {
                        name: 'Amazon EC2',
                        description: 'スケーラブルなクラウドコンピューティング容量',
                        features: [
                            '従量課金制',
                            '複数のインスタンスタイプ',
                            'グローバル展開',
                            '高可用性',
                        ],

                        icon: 'Amazon EC2',
                    },
                    {
                        name: 'AWS Lambda',
                        description: 'サーバーレスコンピューティングサービス',
                        features: [
                            'イベント駆動',
                            '自動スケーリング',
                            '使用量ベース課金',
                            '多言語サポート',
                        ],

                        icon: 'AWS Lambda',
                    },
                    {
                        name: 'Amazon ECS',
                        description: 'コンテナオーケストレーションサービス',
                        features: [
                            'Dockerサポート',
                            'マイクロサービス',
                            'ロードバランシング',
                            'サービス検出',
                        ],

                        icon: 'Amazon ECS',
                    },
                ],

                storage: [
                    {
                        name: 'Amazon S3',
                        description: 'オブジェクトストレージサービス',
                        features: [
                            '99.999999999%の耐久性',
                            '無制限スケーリング',
                            '複数のストレージクラス',
                            'データ暗号化',
                        ],

                        icon: 'Amazon S3',
                    },
                    {
                        name: 'Amazon EBS',
                        description: 'ブロックストレージサービス',
                        features: [
                            '高性能',
                            'スナップショットバックアップ',
                            '暗号化サポート',
                            '複数のボリュームタイプ',
                        ],

                        icon: 'Amazon EBS',
                    },
                    {
                        name: 'Amazon EFS',
                        description: 'ファイルストレージサービス',
                        features: [
                            'フルマネージド',
                            '自動スケーリング',
                            'POSIX互換',
                            '高スループット',
                        ],

                        icon: 'Amazon EFS',
                    },
                ],

                database: [
                    {
                        name: 'Amazon RDS',
                        description: 'リレーショナルデータベースサービス',
                        features: [
                            'マルチエンジンサポート',
                            '自動バックアップ',
                            'リードレプリカ',
                            'モニタリング＆アラート',
                        ],

                        icon: 'Amazon RDS',
                    },
                    {
                        name: 'Amazon DynamoDB',
                        description: 'NoSQLデータベースサービス',
                        features: [
                            'ミリ秒レイテンシ',
                            '自動スケーリング',
                            'グローバルテーブル',
                            'バックアップ＆リストア',
                        ],

                        icon: 'Amazon DynamoDB',
                    },
                    {
                        name: 'Amazon ElastiCache',
                        description: 'インメモリキャッシングサービス',
                        features: [
                            'Redis/Memcached',
                            '高性能',
                            '自動フェイルオーバー',
                            'モニタリング＆分析',
                        ],

                        icon: 'Amazon ElastiCache',
                    },
                ],

                ai: [
                    {
                        name: 'Amazon SageMaker',
                        description: '機械学習プラットフォーム',
                        features: [
                            'エンドツーエンドML',
                            '事前構築アルゴリズム',
                            'モデルデプロイ',
                            'AutoML',
                        ],

                        icon: 'Amazon SageMaker',
                    },
                    {
                        name: 'Amazon Rekognition',
                        description: '画像・動画分析',
                        features: [
                            '顔認識',
                            'オブジェクト検出',
                            'テキスト認識',
                            'コンテンツモデレーション',
                        ],

                        icon: 'Amazon Rekognition',
                    },
                    {
                        name: 'Amazon Comprehend',
                        description: '自然言語処理',
                        features: [
                            '感情分析',
                            'エンティティ認識',
                            '言語検出',
                            'トピックモデリング',
                        ],

                        icon: 'Amazon Comprehend',
                    },
                ],
            },
        },
    };

    const currentContent = content[currentLang] || content.en;
    const currentProducts = currentContent.products[activeCategory];

    return (
        <div className="py-24 bg-gray-50" data-oid="71r.u0l">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="qckqz.i">
                {/* Header */}
                <div className="text-center mb-16" data-oid="pdj2r80">
                    <h2
                        className="text-3xl md:text-4xl font-bold mb-4 text-gray-900"
                        data-oid="wifux01"
                    >
                        {currentContent.title}
                    </h2>
                    <p className="text-lg text-gray-600 max-w-3xl mx-auto" data-oid="q6_h008">
                        {currentContent.subtitle}
                    </p>
                </div>

                {/* Category Tabs */}
                <div
                    className="flex flex-wrap justify-center mb-12 border-b border-gray-200"
                    data-oid="zakbd_7"
                >
                    {Object.entries(currentContent.categories).map(([key, label]) => (
                        <button
                            key={key}
                            onClick={() => setActiveCategory(key)}
                            className={`px-6 py-3 mx-2 mb-4 font-medium text-sm transition-colors border-b-2 ${
                                activeCategory === key
                                    ? 'text-blue-600 border-blue-600'
                                    : 'text-gray-500 border-transparent hover:text-gray-700 hover:border-gray-300'
                            }`}
                            data-oid="r.8:guh"
                        >
                            {label}
                        </button>
                    ))}
                </div>

                {/* Products Grid */}
                <div
                    className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
                    data-oid="18bhsg8"
                >
                    {currentProducts.map((product, index) => (
                        <div
                            key={index}
                            className="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 p-6 border border-gray-100"
                            data-oid="6hyog7l"
                        >
                            {/* Product Icon & Name */}
                            <div className="flex items-center mb-4" data-oid="r10jsgm">
                                <div className="text-blue-600 mr-4" data-oid="-18lpiy">
                                    {getProductIcon(product.icon)}
                                </div>
                                <div data-oid="30rob-s">
                                    <h3
                                        className="text-xl font-bold text-gray-900 mb-1"
                                        data-oid="1dj5o3u"
                                    >
                                        {product.name}
                                    </h3>
                                    <p className="text-gray-600 text-sm" data-oid="w8h3y1g">
                                        {product.description}
                                    </p>
                                </div>
                            </div>

                            {/* Features */}
                            <div className="space-y-2" data-oid="g9c1592">
                                {product.features.map((feature, featureIndex) => (
                                    <div
                                        key={featureIndex}
                                        className="flex items-center"
                                        data-oid="_:e4nww"
                                    >
                                        <div
                                            className="w-2 h-2 bg-blue-500 rounded-full mr-3"
                                            data-oid="-ix.9t."
                                        ></div>
                                        <span className="text-gray-700 text-sm" data-oid="gmvd:xc">
                                            {feature}
                                        </span>
                                    </div>
                                ))}
                            </div>

                            {/* Learn More Button */}
                            <div className="mt-6" data-oid="7a-109-">
                                <button
                                    className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors duration-200 text-sm font-medium"
                                    data-oid="4lpjr_b"
                                >
                                    {currentLang === 'zh-CN'
                                        ? '了解更多'
                                        : currentLang === 'zh-TW'
                                          ? '了解更多'
                                          : currentLang === 'ko'
                                            ? '자세히 보기'
                                            : currentLang === 'ja'
                                              ? '詳細を見る'
                                              : 'Learn More'}
                                </button>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
}