'use client';

import Link from 'next/link';
import { Shield, Lock, Eye, ArrowRight } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { useSystemConfig } from '@/hooks/useSystemConfig';

export default function PrivacyPolicyPage() {
  const sysConfig = useSystemConfig();
  return (
    <div className="bg-surface-sunken min-h-screen">
      <div className="mx-auto max-w-3xl px-4 py-12">
        <div className="mb-8 text-center">
          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-primary-100 text-primary-600 dark:bg-primary-500/15 dark:text-primary-300">
            <Shield className="h-6 w-6" />
          </div>
          <h1 className="text-3xl font-bold text-ink">Privacy Policy</h1>
          <p className="mt-2 text-ink-muted">Last updated: August 2026</p>
        </div>

        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>1. Information We Collect</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-ink-muted leading-relaxed">
                We collect information you provide directly, such as account details, transaction history, and support inquiries. We also collect usage data to improve our services.
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>2. How We Use Your Information</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-ink-muted leading-relaxed">
                Your information is used to provide and improve our services, process transactions, communicate with you, and ensure platform security. We do not sell your personal data to third parties.
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>3. Data Security</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-ink-muted leading-relaxed">
                We implement industry-standard security measures including encryption, secure servers, and regular security audits to protect your data.
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>4. Your Rights</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-ink-muted leading-relaxed">
                You have the right to access, correct, or delete your personal data. Contact our support team for any data-related requests.
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>5. Cookies & Tracking</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-ink-muted leading-relaxed">
                We use cookies and similar technologies to enhance your experience, analyze usage, and personalize content. You can manage cookie preferences in your browser settings.
              </p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>6. Contact Us</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-ink-muted leading-relaxed">
                For privacy-related inquiries, please contact us at {sysConfig.privacyEmail} or create a support ticket from your dashboard.
              </p>
            </CardContent>
          </Card>
        </div>

        <div className="mt-8 flex justify-center">
          <Link href="/terms">
            <Button variant="outline" size="lg">
              Terms of Service <ArrowRight className="h-4 w-4" />
            </Button>
          </Link>
        </div>
      </div>
    </div>
  );
}