"use client";

import Link from "next/link";
import { Button } from "@/components/ui/button";
import { ArrowLeft } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useTranslation } from "@/context/i18n-context";

export default function PrivacyPage() {
  const { t } = useTranslation();

  return (
    <div className="relative flex flex-col items-center min-h-screen p-4 sm:p-8 bg-gray-50 dark:bg-background">
      <div className="w-full max-w-4xl mx-auto">
        <Button asChild variant="ghost" className="mb-4 -ml-4">
          <Link href="/">
            <ArrowLeft className="mr-2 h-4 w-4" />
            {t('privacyPage.back')}
          </Link>
        </Button>
        <main className="w-full">
          <Card>
            <CardHeader>
              <CardTitle className="text-3xl font-bold">{t('privacyPage.title')}</CardTitle>
            </CardHeader>
            <CardContent className="space-y-6 text-muted-foreground">
              <div className="space-y-2">
                <h3 className="font-semibold text-foreground">{t('privacyPage.general')}</h3>
                <p>
                  {t('privacyPage.generalText')}
                </p>
              </div>
              <div className="space-y-2">
                <h3 className="font-semibold text-foreground">{t('privacyPage.collection')}</h3>
                <p>
                  {t('privacyPage.collectionText')}
                </p>
              </div>
              <div className="space-y-2">
                <h3 className="font-semibold text-foreground">{t('privacyPage.rights')}</h3>
                <p>
                  {t('privacyPage.rightsText')}
                </p>
              </div>
              <div className="pt-4 border-t">
                <h3 className="font-semibold text-foreground">{t('privacyPage.disclaimer')}</h3>
                <p className="text-sm">
                  {t('privacyPage.disclaimerText')}
                </p>
              </div>
            </CardContent>
          </Card>
        </main>
      </div>
    </div>
  );
}