'use client';

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

export default function TermsPage() {
  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">
                <FileText className="w-12 h-12 text-white" aria-hidden="true" />
                <h1 className="text-5xl font-bold text-white">{t('terms.title', 'Conditions d\'Utilisation')}</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('terms.title', 'Conditions d\'Utilisation')}</span>
                  </li>
                </ol>
              </motion.nav>

              <p className="text-white/90">{t('terms.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. Acceptance of Terms</h2>
                <p className="text-gray-700 leading-relaxed">
                  By accessing and using Dropex services, you accept and agree to be bound by the terms and provisions of this agreement. If you do not agree to these terms, please do not use our services.
                </p>
              </section>

              <section>
                <h2 className="text-2xl font-bold text-gray-900 mb-4">2. Service Description</h2>
                <p className="text-gray-700 leading-relaxed">
                  Dropex provides logistics and delivery services throughout Morocco, including cash-on-delivery (COD) collection, parcel tracking, and related services. We reserve the right to modify or discontinue services at any time.
                </p>
              </section>

              <section>
                <h2 className="text-2xl font-bold text-gray-900 mb-4">3. User Responsibilities</h2>
                <p className="text-gray-700 leading-relaxed mb-4">
                  As a user of our services, you agree to:
                </p>
                <ul className="list-disc list-inside space-y-2 text-gray-700">
                  <li>Provide accurate and complete information</li>
                  <li>Comply with all applicable laws and regulations</li>
                  <li>Not ship prohibited or illegal items</li>
                  <li>Package items securely and appropriately</li>
                  <li>Pay all fees and charges in a timely manner</li>
                </ul>
              </section>

              <section>
                <h2 className="text-2xl font-bold text-gray-900 mb-4">4. Pricing and Payment</h2>
                <p className="text-gray-700 leading-relaxed">
                  Prices for our services are subject to change. For COD orders, we collect payment from recipients and reconcile funds according to agreed terms. Delivery fees are separate from COD amounts collected.
                </p>
              </section>

              <section>
                <h2 className="text-2xl font-bold text-gray-900 mb-4">5. Liability and Insurance</h2>
                <p className="text-gray-700 leading-relaxed">
                  While we take every precaution to ensure safe delivery, Dropex&apos;s liability for lost or damaged items is limited. We recommend obtaining additional insurance for high-value items. Our standard liability does not exceed the declared value of the shipment.
                </p>
              </section>

              <section>
                <h2 className="text-2xl font-bold text-gray-900 mb-4">6. Delivery Times</h2>
                <p className="text-gray-700 leading-relaxed">
                  Delivery times are estimates and not guarantees. Delays may occur due to weather, traffic, customs, or other factors beyond our control. We are not liable for delays in delivery.
                </p>
              </section>

              <section>
                <h2 className="text-2xl font-bold text-gray-900 mb-4">7. Prohibited Items</h2>
                <p className="text-gray-700 leading-relaxed mb-4">
                  The following items are prohibited from shipment:
                </p>
                <ul className="list-disc list-inside space-y-2 text-gray-700">
                  <li>Illegal drugs and narcotics</li>
                  <li>Explosives and hazardous materials</li>
                  <li>Weapons and ammunition</li>
                  <li>Counterfeit goods</li>
                  <li>Items prohibited by Moroccan law</li>
                </ul>
              </section>

              <section>
                <h2 className="text-2xl font-bold text-gray-900 mb-4">8. Termination</h2>
                <p className="text-gray-700 leading-relaxed">
                  We reserve the right to terminate or suspend your access to our services at any time for violation of these terms or for any other reason deemed necessary.
                </p>
              </section>

              <section>
                <h2 className="text-2xl font-bold text-gray-900 mb-4">9. Governing Law</h2>
                <p className="text-gray-700 leading-relaxed">
                  These terms are governed by the laws of Morocco. Any disputes shall be resolved in the courts of Morocco.
                </p>
              </section>

              <section>
                <h2 className="text-2xl font-bold text-gray-900 mb-4">10. Contact Information</h2>
                <p className="text-gray-700 leading-relaxed">
                  For questions about these Terms of Service, please{' '}
                  <Link
                    href="/contact"
                    className="text-[#3A4A9C] hover:underline font-medium"
                  >
                    contact us
                  </Link>
                  .
                </p>
              </section>
            </article>
          </motion.div>
        </Container>
      </section>
    </div>
  );
}