test/app/mentions-legales/page.tsx

'use client'

import { motion } from 'framer-motion'
import { Shield, FileText } from 'lucide-react'
import BackgroundAnimations from '@/components/BackgroundAnimations'

export default function MentionsLegales() {
  return (
    <section className="section-padding bg-security-dark relative overflow-hidden min-h-screen pt-32">
      <BackgroundAnimations variant="default" />
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="max-w-4xl mx-auto"
        >
          {/* Header */}
          <div className="text-center mb-12">
            <motion.div
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: 0.2 }}
              className="inline-flex items-center justify-center w-20 h-20 bg-security-accent/10 border border-security-accent/30 rounded-2xl mb-6"
            >
              <FileText className="w-10 h-10 text-security-accent" />
            </motion.div>
            <h1 className="text-5xl md:text-6xl font-black mb-6 text-white">
              Mentions <span className="gradient-text">Légales</span>
            </h1>
            <p className="text-xl text-gray-400">
              Informations légales concernant le site runlock.re
            </p>
          </div>

          {/* Content */}
          <div className="card-dark p-8 md:p-10 rounded-3xl space-y-8">
            <section>
              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
                <Shield className="w-6 h-6 text-security-accent" />
                <span>1. Éditeur du site</span>
              </h2>
              <div className="text-gray-300 leading-relaxed space-y-2">
                <p><strong className="text-white">Raison sociale :</strong> NorthBlue</p>
                <p><strong className="text-white">Site web :</strong> runlock.re</p>
                <p><strong className="text-white">Email :</strong> contact@runlock.re</p>
                <p><strong className="text-white">Téléphone :</strong> 0693 51 15 58</p>
                <p><strong className="text-white">Localisation :</strong> La Réunion (974)</p>
              </div>
            </section>

            <section>
              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
                <Shield className="w-6 h-6 text-security-accent" />
                <span>2. Directeur de la publication</span>
              </h2>
              <div className="text-gray-300 leading-relaxed">
                <p>Le directeur de la publication est le représentant légal de NorthBlue.</p>
              </div>
            </section>

            <section>
              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
                <Shield className="w-6 h-6 text-security-accent" />
                <span>3. Hébergement</span>
              </h2>
              <div className="text-gray-300 leading-relaxed">
                <p>Le site runlock.re est hébergé par :</p>
                <ul className="list-disc list-inside mt-2 space-y-1 ml-4">
                  <li>OVH</li>
                  <li>2 rue Kellermann - 59100 Roubaix - France</li>
                  <li>Site web : <a href="https://www.ovh.com" target="_blank" rel="noopener noreferrer" className="text-security-accent hover:underline">www.ovh.com</a></li>
                </ul>
              </div>
            </section>

            <section>
              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
                <Shield className="w-6 h-6 text-security-accent" />
                <span>4. Propriété intellectuelle</span>
              </h2>
              <div className="text-gray-300 leading-relaxed space-y-2">
                <p>
                  L'ensemble des contenus présents sur le site runlock.re (textes, images, logos, graphismes, icônes, etc.) 
                  est la propriété exclusive de NorthBlue ou de ses partenaires, sauf mention contraire.
                </p>
                <p>
                  Toute reproduction, représentation, modification, publication, adaptation de tout ou partie des éléments du site, 
                  quel que soit le moyen ou le procédé utilisé, est interdite sans autorisation écrite préalable de NorthBlue.
                </p>
                <p>
                  Toute exploitation non autorisée du site ou de son contenu engage la responsabilité civile et/ou pénale 
                  de l'utilisateur et peut entraîner des poursuites judiciaires.
                </p>
              </div>
            </section>

            <section>
              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
                <Shield className="w-6 h-6 text-security-accent" />
                <span>5. Limitations de responsabilité</span>
              </h2>
              <div className="text-gray-300 leading-relaxed space-y-2">
                <p>
                  NorthBlue s'efforce de fournir des informations aussi précises que possible sur le site runlock.re. 
                  Toutefois, elle ne pourra être tenue responsable des omissions, des inexactitudes et des carences 
                  dans la mise à jour, qu'elles soient de son fait ou du fait des tiers partenaires qui lui fournissent ces informations.
                </p>
                <p>
                  Toutes les informations indiquées sur le site runlock.re sont données à titre indicatif et sont susceptibles d'évoluer. 
                  Par ailleurs, les renseignements figurant sur le site runlock.re ne sont pas exhaustifs.
                </p>
              </div>
            </section>

            <section>
              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
                <Shield className="w-6 h-6 text-security-accent" />
                <span>6. Droit applicable</span>
              </h2>
              <div className="text-gray-300 leading-relaxed">
                <p>
                  Les présentes mentions légales sont régies par le droit français. 
                  En cas de litige et à défaut d'accord amiable, le litige sera porté devant les tribunaux français 
                  conformément aux règles de compétence en vigueur.
                </p>
              </div>
            </section>

            <section>
              <h2 className="text-2xl font-bold text-white mb-4 flex items-center space-x-2">
                <Shield className="w-6 h-6 text-security-accent" />
                <span>7. Contact</span>
              </h2>
              <div className="text-gray-300 leading-relaxed">
                <p>
                  Pour toute question concernant les présentes mentions légales, vous pouvez nous contacter :
                </p>
                <ul className="list-disc list-inside mt-2 space-y-1 ml-4">
                  <li>Par email : <a href="mailto:contact@runlock.re" className="text-security-accent hover:underline">contact@runlock.re</a></li>
                  <li>Par téléphone : <a href="tel:0693511558" className="text-security-accent hover:underline">0693 51 15 58</a></li>
                </ul>
              </div>
            </section>

            <div className="pt-6 border-t border-security-border text-sm text-gray-400">
              <p>Dernière mise à jour : {new Date().toLocaleDateString('fr-FR', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  )
}