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

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

    const sections = [
        {
            title: t('terms.usage.title'),
            content: t('terms.usage.content')
        },
        {
            title: t('terms.account.title'),
            content: t('terms.account.content')
        },
        {
            title: t('terms.intellectual.title'),
            content: t('terms.intellectual.content')
        },
        {
            title: t('terms.liability.title'),
            content: t('terms.liability.content')
        }
    ];

    return (
        <div className="relative min-h-screen bg-white">
            {/* Technical grid background */}
            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>

            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
                {/* Header section */}
                <div className="grid-layout mb-16">
                    <div className="col-span-12 md:col-span-8">
                        <h1 className="brutalist-heading relative">
                            {t('terms.title')}
                            <div className="absolute -right-8 -top-8 w-16 h-16">
                                <div className="geometric-shape square w-full h-full bg-black"></div>
                            </div>
                        </h1>
                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
                            {t('terms.description')}
                        </p>
                    </div>
                </div>

                {/* Terms Content */}
                <div className="brutalist-card p-8">
                    <div className="space-y-12">
                        {sections.map((section) => (
                            <div key={section.title}>
                                <h2 className="text-2xl font-black uppercase mb-4">{section.title}</h2>
                                <p className="monospace whitespace-pre-line">{section.content}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
            <Footer />
        </div>
    );
}

export default Terms;