import { getDictionary } from "@/lib/dictionaries"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default async function PrivacyPage({
  params,
}: {
  params: Promise<{ lang: "en" | "sq" }>
}) {
  const { lang } = await params
  const dict = await getDictionary(lang)

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      {/* Hero Section */}
      <section className="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center animate-fade-in">
            <h1 className="text-3xl sm:text-4xl font-bold mb-3">{dict.privacy.hero.title}</h1>
            <p className="text-gray-600 dark:text-gray-300">{dict.privacy.hero.last_updated}</p>
          </div>
        </div>
      </section>

      {/* Privacy Content */}
      <section className="py-16 bg-gray-50 dark:bg-gray-900">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="space-y-8">
            {dict.privacy.sections.map((section, index) => (
              <Card
                key={index}
                className="animate-slide-up hover:shadow-xl transition-all duration-300 bg-white dark:bg-gray-800"
              >
                <CardHeader>
                  <CardTitle className="text-xl text-gray-900 dark:text-white">{section.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-700 dark:text-gray-300 leading-relaxed">{section.content}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>
    </div>
  )
}