'use client';

import Navigation from '../../../components/Navigation';
import Footer from '../../../components/Footer';
import { useLanguage } from '../../../hooks/useLanguage';

interface SolutionsPageProps {
    params: {
        lang: string;
    };
}

export default function SolutionsPage({ params }: SolutionsPageProps) {
    const { currentLang, setCurrentLang, currentContent, createLocalizedPath } = useLanguage(
        params.lang,
    );

    return (
        <div className="min-h-screen bg-gray-900 text-white">
            <Navigation
                currentLang={currentLang}
                setCurrentLang={setCurrentLang}
                content={currentContent}
                createLocalizedPath={createLocalizedPath}
            />

            {/* Hero Section */}
            <section className="relative z-10 px-6 py-20">
                <div className="max-w-7xl mx-auto text-center">
                    <h1 className="text-4xl md:text-6xl font-bold mb-8 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
                        {currentContent.solutions.title}
                    </h1>
                    <p className="text-xl text-gray-300 mb-12 max-w-3xl mx-auto">
                        {currentContent.solutions.subtitle}
                    </p>
                </div>
            </section>

            {/* Solutions Grid */}
            <section className="relative z-10 px-6 py-20">
                <div className="max-w-7xl mx-auto">
                    <div className="grid md:grid-cols-2 gap-12">
                        {currentContent.solutions.items.map((solution, index) => (
                            <div
                                key={index}
                                className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-8 border border-cyan-500/20 hover:border-cyan-400/50 transition-all duration-300 group"
                            >
                                <div className="flex items-start space-x-4">
                                    <div className="w-12 h-12 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300">
                                        <span className="text-white font-bold text-lg">
                                            {index + 1}
                                        </span>
                                    </div>
                                    <div className="flex-1">
                                        <h3 className="text-2xl font-bold mb-4 text-cyan-400">
                                            {solution.title}
                                        </h3>
                                        <p className="text-gray-300 mb-6 leading-relaxed">
                                            {solution.description}
                                        </p>
                                        <div className="grid grid-cols-2 gap-4">
                                            {solution.benefits.map((benefit, benefitIndex) => (
                                                <div
                                                    key={benefitIndex}
                                                    className="flex items-center text-gray-400"
                                                >
                                                    <svg
                                                        className="w-4 h-4 text-cyan-400 mr-2 flex-shrink-0"
                                                        fill="none"
                                                        stroke="currentColor"
                                                        viewBox="0 0 24 24"
                                                    >
                                                        <path
                                                            strokeLinecap="round"
                                                            strokeLinejoin="round"
                                                            strokeWidth={2}
                                                            d="M13 10V3L4 14h7v7l9-11h-7z"
                                                        />
                                                    </svg>
                                                    <span className="text-sm">{benefit}</span>
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Process Section */}
            <section className="relative z-10 px-6 py-20 bg-gray-800/30">
                <div className="max-w-7xl mx-auto">
                    <div className="text-center mb-16">
                        <h2 className="text-3xl md:text-4xl font-bold mb-6 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
                            实施流程
                        </h2>
                        <p className="text-xl text-gray-300">专业的实施流程，确保项目成功交付</p>
                    </div>

                    <div className="grid md:grid-cols-4 gap-8">
                        {[
                            { title: '需求分析', description: '深入了解客户需求和现状' },
                            { title: '方案设计', description: '制定详细的技术实施方案' },
                            { title: '项目实施', description: '按计划执行迁移和部署' },
                            { title: '运维支持', description: '提供持续的运维和优化' },
                        ].map((step: { title: string; description: string }, index: number) => (
                            <div key={index} className="text-center">
                                <div className="w-16 h-16 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <span className="text-white font-bold text-xl">
                                        {index + 1}
                                    </span>
                                </div>
                                <h3 className="text-xl font-bold mb-2 text-cyan-400">
                                    {step.title}
                                </h3>
                                <p className="text-gray-400">{step.description}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            <Footer content={currentContent} createLocalizedPath={createLocalizedPath} />
        </div>
    );
}