'use client';

import { useTranslation } from 'react-i18next';
import { motion } from 'motion/react';
import Link from 'next/link';
import { Shield, Home, ChevronRight } from 'lucide-react';
import { Container } from '@/components/ui';

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

  return (
    <div className="pt-20">
      {/* Header */}
      <section className="relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-[#2d3875] via-[#3A4A9C] to-[#2d3875]" />
        <div className="absolute inset-0 bg-gradient-to-b from-black/10 via-transparent to-black/20" />
        <div className="absolute inset-0 opacity-[0.05]" style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
        }} />

        <Container className="relative z-10">
          <div className="py-12 pb-24">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              className="max-w-4xl mx-auto text-center"
            >
              <div className="flex items-center justify-center gap-4 mb-6">
                <Shield className="w-12 h-12 text-white" aria-hidden="true" />
                <h1 className="text-5xl font-bold text-white">{t('privacy.title', 'Politique de Confidentialité')}</h1>
              </div>

              <motion.nav
                initial={{ opacity: 0, y: -10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.4, delay: 0.15 }}
                className="mb-6 flex justify-center"
              >
                <ol className="flex items-center gap-2 text-sm">
                  <li className="flex items-center gap-2 group">
                    <Link
                      href="/"
                      className="flex items-center gap-1.5 text-white/80 hover:text-white transition-colors"
                    >
                      <Home className="w-4 h-4" />
                      <span className="font-medium">{t('breadcrumb.home', 'Accueil')}</span>
                    </Link>
                  </li>
                  <li className="text-white/50">
                    <ChevronRight className="w-4 h-4" />
                  </li>
                  <li className="flex items-center gap-2">
                    <span className="text-white font-semibold">{t('privacy.title', 'Politique de Confidentialité')}</span>
                  </li>
                </ol>
              </motion.nav>

              <p className="text-white/90">{t('privacy.lastUpdated', 'Dernière mise à jour: Janvier 2025')}</p>
            </motion.div>
          </div>
        </Container>

        {/* Wave Transition */}
        <div className="absolute bottom-0 left-0 right-0 z-20 pointer-events-none">
          <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-auto" preserveAspectRatio="none">
            <path d="M0,64 C360,96 720,96 1080,64 C1260,48 1350,32 1440,32 L1440,120 L0,120 Z" className="fill-white" />
          </svg>
        </div>
      </section>

      {/* Content */}
      <section className="py-20 bg-white">
        <Container size="md">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="prose prose-lg max-w-none"
          >
            <article className="space-y-8">
              <section>
                <h2 className="text-2xl font-bold text-gray-900 mb-4">1. Information We Collect</h2>
                <p className="text-gray-700 leading-relaxed">
                  We collect information that you provide directly to us when using our logistics services, including your name, business information, contact details, and delivery addresses. We also collect information about your shipments and transactions.
                </p>
              </section>

              <section>
                <h2 className="text-2xl font-bold text-gray-900 mb-4">2. How We Use Your Information</h2>
                <p className="text-gray-700 leading-relaxed mb-4">
                  We use the information we collect to:
                </p>
                <ul className="list-disc list-inside space-y-2 text-gray-700">
                  <li>Process and fulfill your delivery orders</li>
                  <li>Provide customer support and respond to your requests</li>
                  <li>Send you service updates and promotional communications</li>
                  <li>Improve our services and develop new features</li>
                  <li>Comply with legal obligations</li>
                </ul>
              </section>

              <section>
                <h2 className="text-2xl font-bold text-gray-900 mb-4">3. Information Sharing</h2>
                <p className="text-gray-700 leading-relaxed">
                  We do not sell your personal information. We may share your information with delivery partners, service providers, and as required by law. All third parties are contractually obligated to protect your data.
                </p>
              </section>

              <section>
                <h2 className="text-2xl font-bold text-gray-900 mb-4">4. Data Security</h2>
                <p className="text-gray-700 leading-relaxed">
                  We implement appropriate technical and organizational measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction.
                </p>
              </section>

              <section>
                <h2 className="text-2xl font-bold text-gray-900 mb-4">5. Your Rights</h2>
                <p className="text-gray-700 leading-relaxed mb-4">
                  You have the right to:
                </p>
                <ul className="list-disc list-inside space-y-2 text-gray-700">
                  <li>Access your personal information</li>
                  <li>Correct inaccurate information</li>
                  <li>Request deletion of your information</li>
                  <li>Object to processing of your information</li>
                  <li>Withdraw consent at any time</li>
                </ul>
              </section>

              <section>
                <h2 className="text-2xl font-bold text-gray-900 mb-4">6. Contact Us</h2>
                <p className="text-gray-700 leading-relaxed">
                  If you have any questions about this Privacy Policy, please{' '}
                  <Link
                    href="/contact"
                    className="text-[#3A4A9C] hover:underline font-medium"
                  >
                    contact us
                  </Link>
                  .
                </p>
              </section>
            </article>
          </motion.div>
        </Container>
      </section>
    </div>
  );
}