'use client';

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

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

    return (
        <div className="min-h-screen bg-white pt-20">
            <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
                <div className="flex items-center gap-4 mb-8">
                    <div className="p-3 bg-cyan-100 rounded-lg">
                        <FileText className="w-8 h-8 text-cyan-600" />
                    </div>
                    <h1 className="text-4xl font-bold text-gray-900">{t('termsOfService.title')}</h1>
                </div>

                <div className="prose prose-cyan max-w-none text-gray-600 space-y-6">
                    <p className="text-lg">
                        {t('termsOfService.intro')}
                    </p>

                    <h2 className="text-2xl font-semibold text-gray-800">{t('termsOfService.section1.title')}</h2>
                    <p>
                        {t('termsOfService.section1.content')}
                    </p>

                    <h2 className="text-2xl font-semibold text-gray-800">{t('termsOfService.section2.title')}</h2>
                    <p>
                        {t('termsOfService.section2.content')}
                    </p>

                    <h2 className="text-2xl font-semibold text-gray-800">{t('termsOfService.section3.title')}</h2>
                    <p>
                        {t('termsOfService.section3.content')}
                    </p>
                </div>

                <div className="mt-12">
                    <Button
                        onClick={() => router.push('/')}
                        className="bg-cyan-600 text-white hover:bg-cyan-500 rounded-full px-8"
                    >
                        {t('termsOfService.backToHome')}
                    </Button>
                </div>
            </div>
        </div>
    );
}
