'use client';

import { Button } from '@/components/ui/button';
import { useLanguage } from '@/lib/language-context';
import { ShieldCheck } from 'lucide-react';
import { useRouter } from 'next/navigation';

export default function SecurityPage() {
    const router = useRouter();
    const { t } = useLanguage();

    return (
        <div className="min-h-screen bg-white pt-20">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
                <div className="text-center">
                    <div className="flex justify-center mb-6">
                        <div className="p-4 bg-cyan-100 rounded-full">
                            <ShieldCheck className="w-12 h-12 text-cyan-600" />
                        </div>
                    </div>
                    <h1 className="text-4xl font-bold text-gray-900 mb-4">{t('security.title')}</h1>
                    <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
                        {t('security.description')}
                    </p>
                    <div className="bg-gray-50 rounded-2xl p-12 mb-8">
                        <h2 className="text-2xl font-semibold mb-4 text-gray-800">{t('security.comingSoon')}</h2>
                        <p className="text-gray-500">
                            {t('security.comingSoonDescription')}
                        </p>
                    </div>
                    <Button
                        onClick={() => router.push('/')}
                        className="bg-cyan-600 text-white hover:bg-cyan-500 rounded-full px-8"
                    >
                        {t('security.backToHome')}
                    </Button>
                </div>
            </div>
        </div>
    );
}
