'use client';

import { useRef } from 'react';
import { motion, useInView } from 'framer-motion';
import { FileText, Users, CreditCard, AlertTriangle, Scale, Gavel, Mail } from 'lucide-react';
import { LandingHeader, LandingFooter } from '@/components/layout';

export default function TermsPage() {
  const heroRef = useRef(null);
  const contentRef = useRef(null);

  const isHeroInView = useInView(heroRef, { once: true });
  const isContentInView = useInView(contentRef, { once: true });

  const sections = [
    {
      icon: Users,
      title: '1. Objet et acceptation',
      content: `Les présentes Conditions Générales d'Utilisation (CGU) régissent l'utilisation de la plateforme Xpeditis, accessible à l'adresse www.xpeditis.com.

En accédant à notre plateforme et en utilisant nos services, vous acceptez sans réserve les présentes CGU. Si vous n'acceptez pas ces conditions, vous ne devez pas utiliser nos services.

Xpeditis se réserve le droit de modifier ces CGU à tout moment. Les utilisateurs seront informés de toute modification par email et/ou notification sur la plateforme.`,
    },
    {
      icon: FileText,
      title: '2. Description des services',
      content: `Xpeditis propose une plateforme B2B de réservation de fret maritime permettant :

• La recherche et comparaison de tarifs de transport maritime
• La réservation de conteneurs auprès de compagnies maritimes partenaires
• Le suivi en temps réel des expéditions
• La gestion documentaire (Bill of Lading, certificats, etc.)
• L'accès à un tableau de bord analytique

Xpeditis agit en qualité d'intermédiaire technologique et ne se substitue pas aux transporteurs maritimes dans l'exécution des prestations de transport.`,
    },
    {
      icon: Users,
      title: '3. Inscription et compte utilisateur',
      content: `**Conditions d'inscription**
L'inscription est réservée aux professionnels du transport et de la logistique (transitaires, commissionnaires, etc.). L'utilisateur doit fournir des informations exactes et complètes.

**Responsabilité du compte**
L'utilisateur est responsable de la confidentialité de ses identifiants et de toutes les activités effectuées sous son compte. Il s'engage à notifier immédiatement Xpeditis en cas d'utilisation non autorisée.

**Suspension et résiliation**
Xpeditis peut suspendre ou résilier un compte en cas de violation des CGU, d'activité frauduleuse ou de non-paiement.`,
    },
    {
      icon: CreditCard,
      title: '4. Tarification et paiement',
      content: `**Tarifs affichés**
Les tarifs affichés sur la plateforme sont indicatifs et peuvent varier selon la disponibilité et les conditions du marché. Le tarif définitif est confirmé lors de la validation de la réservation.

**Modalités de paiement**
Les paiements s'effectuent par virement bancaire ou carte bancaire. Les factures sont payables selon les conditions convenues (généralement 30 jours).

**Frais supplémentaires**
Des frais additionnels peuvent s'appliquer (surcharges carburant, frais portuaires, etc.). Ces frais sont clairement indiqués avant validation.`,
    },
    {
      icon: AlertTriangle,
      title: '5. Responsabilité',
      content: `**Limitation de responsabilité**
Xpeditis agit en tant qu'intermédiaire technologique. La responsabilité du transport incombe aux compagnies maritimes selon leurs conditions générales et les conventions internationales applicables.

**Force majeure**
Xpeditis ne peut être tenue responsable des retards ou annulations dus à des cas de force majeure (intempéries, grèves, pandémies, etc.).

**Disponibilité de la plateforme**
Xpeditis s'efforce de maintenir la plateforme disponible 24h/24. Cependant, des interruptions peuvent survenir pour maintenance ou raisons techniques.`,
    },
    {
      icon: Scale,
      title: '6. Propriété intellectuelle',
      content: `Tous les éléments de la plateforme Xpeditis (logo, design, textes, logiciels, bases de données) sont protégés par les droits de propriété intellectuelle.

L'utilisateur s'engage à :
• Ne pas reproduire, modifier ou distribuer le contenu de la plateforme
• Ne pas utiliser les données à des fins concurrentielles
• Ne pas tenter de désassembler ou décompiler le logiciel
• Respecter les marques et logos de Xpeditis et de ses partenaires`,
    },
    {
      icon: Gavel,
      title: '7. Droit applicable et litiges',
      content: `**Droit applicable**
Les présentes CGU sont régies par le droit français.

**Résolution des litiges**
En cas de litige, les parties s'engagent à rechercher une solution amiable. À défaut, les tribunaux de Paris seront seuls compétents.

**Médiation**
Conformément aux dispositions du Code de la consommation, l'utilisateur peut recourir gratuitement au service de médiation auquel Xpeditis est adhérent.`,
    },
  ];

  const containerVariants = {
    hidden: { opacity: 0, y: 50 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.6,
        staggerChildren: 0.1,
      },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.5 },
    },
  };

  return (
    <div className="min-h-screen bg-white">
      <LandingHeader />

      {/* Hero Section */}
      <section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
        <div className="absolute inset-0 opacity-10">
          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
        </div>

        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8 }}
            className="text-center"
          >
            <motion.div
              initial={{ scale: 0.8, opacity: 0 }}
              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
            >
              <FileText className="w-5 h-5 text-brand-turquoise" />
              <span className="text-white/90 text-sm font-medium">Cadre juridique</span>
            </motion.div>

            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
              Conditions Générales
              <br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
                d'Utilisation
              </span>
            </h1>

            <p className="text-xl text-white/80 mb-6 max-w-3xl mx-auto leading-relaxed">
              Ces conditions régissent votre utilisation de la plateforme Xpeditis.
              Veuillez les lire attentivement avant d'utiliser nos services.
            </p>

            <p className="text-white/60 text-sm">
              Dernière mise à jour : Janvier 2025
            </p>
          </motion.div>
        </div>

        {/* Wave */}
        <div className="absolute bottom-0 left-0 right-0">
          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
            <path
              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
              fill="white"
            />
          </svg>
        </div>
      </section>

      {/* Content Section */}
      <section ref={contentRef} className="py-20">
        <div className="max-w-4xl mx-auto px-6 lg:px-8">
          <motion.div
            variants={containerVariants}
            initial="hidden"
            animate={isContentInView ? 'visible' : 'hidden'}
            className="space-y-12"
          >
            {sections.map((section, index) => {
              const IconComponent = section.icon;
              return (
                <motion.div
                  key={index}
                  variants={itemVariants}
                  className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
                >
                  <div className="flex items-start space-x-4">
                    <div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center flex-shrink-0">
                      <IconComponent className="w-6 h-6 text-brand-turquoise" />
                    </div>
                    <div>
                      <h2 className="text-2xl font-bold text-brand-navy mb-4">{section.title}</h2>
                      <div className="text-gray-600 leading-relaxed whitespace-pre-line prose prose-sm max-w-none">
                        {section.content.split('**').map((part, i) =>
                          i % 2 === 1 ? <strong key={i}>{part}</strong> : part
                        )}
                      </div>
                    </div>
                  </div>
                </motion.div>
              );
            })}
          </motion.div>

          {/* Contact Section */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.6 }}
            className="mt-16 bg-gradient-to-br from-brand-navy to-brand-navy/95 p-10 rounded-3xl text-center"
          >
            <Mail className="w-12 h-12 text-brand-turquoise mx-auto mb-4" />
            <h3 className="text-2xl font-bold text-white mb-4">Besoin de précisions ?</h3>
            <p className="text-white/80 mb-6">
              Pour toute question concernant nos conditions générales d'utilisation,
              notre équipe juridique est à votre disposition.
            </p>
            <a
              href="mailto:legal@xpeditis.com"
              className="inline-flex items-center space-x-2 px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-colors font-medium"
            >
              <Mail className="w-5 h-5" />
              <span>legal@xpeditis.com</span>
            </a>
          </motion.div>
        </div>
      </section>

      <LandingFooter />
    </div>
  );
}