'use client';

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

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

export default function ServicesPage({ params }: ServicesPageProps) {
    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.services.title}
                    </h1>
                    <p className="text-xl text-gray-300 mb-12 max-w-3xl mx-auto">
                        {currentContent.services.subtitle}
                    </p>
                </div>
            </section>

            {/* Services Grid */}
            <section className="relative z-10 px-6 py-20">
                <div className="max-w-7xl mx-auto">
                    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                        {currentContent.services.items.map((service, 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="w-16 h-16 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-lg flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                                    <svg
                                        className="w-8 h-8 text-white"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                    >
                                        <path
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                            strokeWidth={2}
                                            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                                        />
                                    </svg>
                                </div>
                                <h3 className="text-2xl font-bold mb-4 text-cyan-400">
                                    {service.title}
                                </h3>
                                <p className="text-gray-300 mb-6 leading-relaxed">
                                    {service.description}
                                </p>
                                <ul className="space-y-2">
                                    {service.features.map((feature, featureIndex) => (
                                        <li
                                            key={featureIndex}
                                            className="flex items-center text-gray-400"
                                        >
                                            <svg
                                                className="w-4 h-4 text-cyan-400 mr-2"
                                                fill="none"
                                                stroke="currentColor"
                                                viewBox="0 0 24 24"
                                            >
                                                <path
                                                    strokeLinecap="round"
                                                    strokeLinejoin="round"
                                                    strokeWidth={2}
                                                    d="M5 13l4 4L19 7"
                                                />
                                            </svg>
                                            {feature}
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* CTA Section */}
            <section className="relative z-10 px-6 py-20">
                <div className="max-w-4xl mx-auto text-center">
                    <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">
                        {currentContent.hero.cta}
                    </h2>
                    <p className="text-xl text-gray-300 mb-8">{currentContent.hero.description}</p>
                    <div className="flex flex-col sm:flex-row gap-4 justify-center">
                        <button className="px-8 py-4 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg font-semibold hover:from-cyan-400 hover:to-blue-500 transition-all duration-300 transform hover:scale-105">
                            {currentContent.hero.cta}
                        </button>
                        <button className="px-8 py-4 border border-cyan-500 rounded-lg font-semibold hover:bg-cyan-500/10 transition-all duration-300">
                            {currentContent.hero.learn}
                        </button>
                    </div>
                </div>
            </section>

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