import { useNavigate } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import { GameButton } from './common/GameButton'
import './LandingPage.css'

export default function PrivacyPolicy() {
    const navigate = useNavigate()
    const { t } = useTranslation()

    return (
        <div className="landing-page" style={{ paddingTop: '80px', paddingBottom: '40px' }}>
            <div className="about-content" style={{ textAlign: 'left', maxWidth: '800px', margin: '0 auto' }}>
                <h1 className="section-title">{t('legal.privacy.title')}</h1>

                <div style={{ color: '#cbd5e1', lineHeight: '1.6' }}>
                    <p>{t('legal.privacy.lastUpdated')}</p>

                    <h3>{t('legal.privacy.sections.1.title')}</h3>
                    <p>{t('legal.privacy.sections.1.content')}</p>

                    <h3>{t('legal.privacy.sections.2.title')}</h3>
                    <p>{t('legal.privacy.sections.2.content')}</p>

                    <h3>{t('legal.privacy.sections.3.title')}</h3>
                    <p>{t('legal.privacy.sections.3.content')}</p>

                    <h3>{t('legal.privacy.sections.4.title')}</h3>
                    <p>{t('legal.privacy.sections.4.content')}</p>

                    <h3>{t('legal.privacy.sections.5.title')}</h3>
                    <p>{t('legal.privacy.sections.5.content')}</p>
                </div>

                <div style={{ marginTop: '2rem', textAlign: 'center' }}>
                    <GameButton
                        variant="primary"
                        onClick={() => navigate('/')}
                    >
                        {t('legal.privacy.back')}
                    </GameButton>
                </div>
            </div>
        </div>
    )
}
