import { useLanguage } from '../context/LanguageContext';
import Footer from '../components/Footer';

function Privacy() {
    const { t } = useLanguage();

    const sections = [
        {
            title: t('privacy.collection.title'),
            content: t('privacy.collection.content')
        },
        {
            title: t('privacy.usage.title'),
            content: t('privacy.usage.content')
        },
        {
            title: t('privacy.sharing.title'),
            content: t('privacy.sharing.content')
        },
        {
            title: t('privacy.security.title'),
            content: t('privacy.security.content')
        }
    ];

    return (
        <div className="relative min-h-screen bg-white">
            {/* Floating elements */}
            <div className="absolute inset-0 overflow-hidden pointer-events-none">
                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
            </div>

            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
                {/* Header section */}
                <div className="text-center mb-16">
                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
                        {t('privacy.title')}
                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
                    </h1>
                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
                        {t('privacy.description')}
                    </p>
                </div>

                {/* Privacy Content */}
                <div className="bg-white rounded-2xl shadow-lg p-8">
                    <div className="space-y-12">
                        {sections.map((section) => (
                            <div key={section.title}>
                                <h2 className="text-2xl font-medium text-gray-900 mb-4">{section.title}</h2>
                                <p className="text-gray-600 whitespace-pre-line leading-relaxed">{section.content}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
            <Footer />
        </div>
    );
}

export default Privacy;
