import { useTranslation } from 'react-i18next'
import { PageShell } from '@/layouts/PageShell'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'

const segments = [
  { name: 'Chronic refill', size: 1280 },
  { name: 'Lapsed buyers', size: 640 },
  { name: 'High-value households', size: 210 },
  { name: 'Institutional accounts', size: 18 },
  { name: 'Bole catchment', size: 940 },
]

export function MarketingPage() {
  const { t } = useTranslation()
  return (
    <PageShell title={t('marketing.title')} subtitle={t('marketing.subtitle')}>
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {segments.map((s) => (
          <Card key={s.name}>
            <CardHeader>
              <CardTitle className="text-base">{s.name}</CardTitle>
            </CardHeader>
            <CardContent className="flex items-center justify-between pt-0">
              <span className="font-display text-2xl font-bold">{s.size.toLocaleString()}</span>
              <Badge variant="secondary">self-updating</Badge>
            </CardContent>
          </Card>
        ))}
      </div>
    </PageShell>
  )
}