'use client';

import { useParams, useRouter } from 'next/navigation';
import { useState, useEffect } from 'react';
import PageLayout from '../../../components/PageLayout';
import Icon from '../../../components/Icon';
import { content } from '../../../data/content';
import { solutionsContent } from '../../../data/pageContent';

export default function SolutionsPage() {
    const router = useRouter();
    const params = useParams();
    const currentLang = typeof params.lang === 'string' ? params.lang : 'en';

    // Validate language and redirect if invalid
    useEffect(() => {
        const supportedLangs = ['zh-CN', 'zh-TW', 'en', 'ko', 'ja'];
        if (!supportedLangs.includes(currentLang)) {
            router.push('/en/solutions');
        }
    }, [currentLang, router]);

    const currentContent = content[currentLang as keyof typeof content] || content.en;
    const pageContent =
        solutionsContent[currentLang as keyof typeof solutionsContent] || solutionsContent.en;

    const handleLanguageChange = (lang: string) => {
        router.push(`/${lang}/solutions`);
    };

    return (
        <PageLayout
            title={pageContent.title}
            description={pageContent.description}
            keywords={pageContent.keywords}
            currentLang={currentLang}
            currentContent={currentContent}
            handleLanguageChange={handleLanguageChange}
        >
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                {/* Page Header */}
                <div className="text-center mb-16">
                    <h1 className="text-4xl font-bold text-gray-900 mb-4">{pageContent.heading}</h1>
                    <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                        {pageContent.subheading}
                    </p>
                </div>

                {/* Industries Grid */}
                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                    {pageContent.industries.map((industry, index) => (
                        <div
                            key={index}
                            className="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow"
                        >
                            <div className="bg-gradient-to-r from-blue-600 to-indigo-700 p-6 text-white">
                                <div className="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center mb-4">
                                    <Icon name={industry.icon} className="w-6 h-6 text-white" />
                                </div>
                                <h3 className="text-xl font-bold">{industry.name}</h3>
                            </div>
                            <div className="p-6">
                                <p className="text-gray-600 mb-6">{industry.description}</p>
                                <div className="space-y-2">
                                    <h4 className="font-semibold text-gray-900">
                                        {currentLang === 'en'
                                            ? 'Key Benefits:'
                                            : currentLang === 'zh-CN'
                                              ? '主要优势：'
                                              : currentLang === 'zh-TW'
                                                ? '主要優勢：'
                                                : currentLang === 'ko'
                                                  ? '주요 이점:'
                                                  : '主な利点：'}
                                    </h4>
                                    {industry.benefits.map((benefit, benefitIndex) => (
                                        <div key={benefitIndex} className="flex items-start">
                                            <div className="flex-shrink-0 mt-1">
                                                <Icon
                                                    name="check"
                                                    className="w-5 h-5 text-green-500"
                                                />
                                            </div>
                                            <p className="ml-2 text-gray-600">{benefit}</p>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    ))}
                </div>

                {/* CTA Section */}
                <div className="mt-16 bg-gray-100 rounded-lg p-8 text-center">
                    <h2 className="text-2xl font-bold text-gray-900 mb-4">
                        {currentLang === 'en'
                            ? 'Need a customized solution for your industry?'
                            : currentLang === 'zh-CN'
                              ? '需要为您的行业定制解决方案？'
                              : currentLang === 'zh-TW'
                                ? '需要為您的行業定制解決方案？'
                                : currentLang === 'ko'
                                  ? '귀하의 산업에 맞는 맞춤형 솔루션이 필요하신가요?'
                                  : 'あなたの業界向けのカスタマイズされたソリューションが必要ですか？'}
                    </h2>
                    <p className="text-gray-600 mb-6 max-w-2xl mx-auto">
                        {currentLang === 'en'
                            ? 'Our AWS experts can help you design and implement a cloud solution tailored to your specific industry requirements.'
                            : currentLang === 'zh-CN'
                              ? '我们的AWS专家可以帮助您设计和实施针对特定行业需求的云解决方案。'
                              : currentLang === 'zh-TW'
                                ? '我們的AWS專家可以幫助您設計和實施針對特定行業需求的雲解決方案。'
                                : currentLang === 'ko'
                                  ? '당사의 AWS 전문가가 귀하의 특정 산업 요구 사항에 맞게 설계된 클라우드 솔루션을 설계하고 구현하는 데 도움을 드릴 수 있습니다.'
                                  : '当社のAWS専門家は、特定の業界要件に合わせたクラウドソリューションの設計と実装をお手伝いします。'}
                    </p>
                    <button
                        onClick={() => router.push(`/${currentLang}/contact`)}
                        className="bg-blue-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"
                    >
                        {currentLang === 'en'
                            ? 'Get in Touch'
                            : currentLang === 'zh-CN'
                              ? '联系我们'
                              : currentLang === 'zh-TW'
                                ? '聯繫我們'
                                : currentLang === 'ko'
                                  ? '연락하기'
                                  : 'お問い合わせ'}
                    </button>
                </div>
            </div>
        </PageLayout>
    );
}