import type { Metadata } from 'next';
import { getTranslations } from 'next-intl/server';
import { Container, Divider, Stack, Typography } from '@mui/material';
import { AppAlert } from '@/components';
import BrandMark from '@/components/auth/BrandMark';

export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'legal' });
  return { title: t('privacy_title') };
}

interface LegalSection {
  title: string;
  body: string;
}

/**
 * Draft Privacy Policy — placeholder legal copy flagged for human/legal review before launch
 * (ui-phase-3 §3.3). Publicly reachable logged-out (in `PUBLIC_PATHS`) so the login consent line
 * can link to it. A Server Component: static translated copy only, no interactivity.
 */
export default async function PrivacyPage() {
  const t = await getTranslations('legal');
  const sections = t.raw('privacy_sections') as LegalSection[];

  return (
    <Container maxWidth="sm" sx={{ py: 4 }}>
      <Stack sx={{ alignItems: 'center', mb: 4 }}>
        <BrandMark />
      </Stack>
      <Stack sx={{ gap: 3 }}>
        <Typography variant="h5" component="h1">
          {t('privacy_title')}
        </Typography>
        <AppAlert severity="info" variant="outlined">
          {t('draft_banner')}
        </AppAlert>
        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
          {t('privacy_intro')}
        </Typography>
        {sections.map((section, index) => (
          <Stack key={section.title} sx={{ gap: 1 }}>
            <Divider />
            <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
              {index + 1}. {section.title}
            </Typography>
            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
              {section.body}
            </Typography>
          </Stack>
        ))}
      </Stack>
    </Container>
  );
}
