'use client';

import Link from 'next/link';
import { useI18n } from '../components/I18nProvider';

export default function PrivacyPage() {
  const { t } = useI18n();
  const today = new Date().toISOString().slice(0, 10);

  return (
    <main className="panel" style={{ maxWidth: 900, margin: '40px auto', display: 'grid', gap: 14 }}>
      <div className="breadcrumb">
        <Link href="/">{t('homeCrumb')}</Link> / <span>{t('privacyTitle')}</span>
      </div>
      <h1>{t('privacyTitle')}</h1>
      <p style={{ color: '#cbd5e1' }}>{t('privacyUpdated', { date: today })}</p>

      <section className="privacy-block">
        <h3>{t('privacyCollectTitle')}</h3>
        <ul>
          <li>{t('privacyCollectAccounts')}</li>
          <li>{t('privacyCollectListings')}</li>
          <li>{t('privacyCollectLogs')}</li>
        </ul>
      </section>

      <section className="privacy-block">
        <h3>{t('privacyUseTitle')}</h3>
        <ul>
          <li>{t('privacyUseAuth')}</li>
          <li>{t('privacyUseListings')}</li>
          <li>{t('privacyUseMail')}</li>
          <li>{t('privacyUseLegal')}</li>
        </ul>
      </section>

      <section className="privacy-block">
        <h3>{t('privacyStoreTitle')}</h3>
        <ul>
          <li>{t('privacyStoreDb')}</li>
          <li>{t('privacyStoreBackups')}</li>
        </ul>
      </section>

      <section className="privacy-block">
        <h3>{t('privacyCookiesTitle')}</h3>
        <ul>
          <li>{t('privacyCookiesSession')}</li>
          <li>{t('privacyCookiesNoTracking')}</li>
        </ul>
      </section>

      <section className="privacy-block">
        <h3>{t('privacySharingTitle')}</h3>
        <ul>
          <li>{t('privacySharingAds')}</li>
          <li>{t('privacySharingOps')}</li>
        </ul>
      </section>

      <section className="privacy-block">
        <h3>{t('privacyRightsTitle')}</h3>
        <ul>
          <li>{t('privacyRightsAccess')}</li>
          <li>{t('privacyRightsConsent')}</li>
          <li>{t('privacyRightsContact')}</li>
        </ul>
      </section>
    </main>
  );
}