"use client";
import Link from "next/link";
import { ArrowLeft, FileText, Building2, Server, Shield, Scale } from "lucide-react";
import signinStyles from "../signin/signin.module.css";

export default function MentionsLegalesContent() {
  return (
    <div className={signinStyles.meshRoot}>
      <div className={signinStyles.simpleBg} aria-hidden="true" />

      {/* Contenu principal */}
      <div className="relative z-10 min-h-screen p-4 py-12">
        <div className="max-w-4xl mx-auto">
          {/* En-tête avec logo */}
          <div className="bg-white/80 backdrop-blur-lg border border-white/20 rounded-3xl p-8 shadow-2xl mb-6">
            <div className="flex justify-center mb-6">
              <img
                src="/odentas-logo.png"
                alt="Logo Odentas"
                className="h-16 w-auto drop-shadow-lg"
              />
            </div>

            <div className="text-center mb-6">
              <div className="flex items-center justify-center gap-3 mb-3">
                <Scale className="w-8 h-8 text-blue-600" />
                <h1 className="text-3xl font-bold text-gray-800">
                  Mentions Légales
                </h1>
              </div>
              <p className="text-gray-600 text-lg">
                Informations légales et éditoriales
              </p>
              <p className="text-sm text-gray-500 mt-2">
                Dernière mise à jour : 14 octobre 2025
              </p>
            </div>
          </div>

          {/* Contenu des mentions légales */}
          <div className="bg-white/80 backdrop-blur-lg border border-white/20 rounded-3xl p-8 shadow-2xl space-y-8">
            
            {/* Préambule */}
            <section>
              <div className="prose prose-sm max-w-none text-gray-700 space-y-3">
                <p>
                  Conformément aux dispositions des Articles 6-III et 19 de la Loi n°2004-575 du 21 juin 2004 
                  pour la Confiance dans l'économie numérique, dite L.C.E.N., il est porté à la connaissance 
                  des utilisateurs et visiteurs, ci-après l'"<strong>Utilisateur</strong>", du site{" "}
                  <strong>app.odentas.fr</strong>, ci-après l'"<strong>Espace Paie</strong>" ou le "<strong>Site</strong>", 
                  les présentes mentions légales.
                </p>
                <p>
                  La connexion et l'utilisation de l'Espace Paie par l'Utilisateur impliquent l'acceptation 
                  intégrale et sans réserve des présentes mentions légales.
                </p>
                <p>
                  Ces dernières sont accessibles sur le Site à la rubrique "Mentions légales".
                </p>
              </div>
            </section>

            {/* Article 1 */}
            <section>
              <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <Building2 className="w-6 h-6 text-blue-600" />
                Article 1 - L'Éditeur
              </h2>
              <div className="prose prose-sm max-w-none text-gray-700 space-y-3">
                <p>
                  L'édition de l'Espace Paie est assurée par :
                </p>
                
                <div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-lg">
                  <p className="font-semibold text-gray-800 mb-3">Odentas Media SAS</p>
                  <ul className="space-y-1 text-sm">
                    <li><strong>Capital social :</strong> 100 euros</li>
                    <li><strong>Immatriculation :</strong> RCS Paris 907 880 348</li>
                    <li><strong>Siège social :</strong> 6 rue d'Armaillé, 75017 Paris</li>
                    <li><strong>Adresse e-mail :</strong>{" "}
                      <a href="mailto:paie@odentas.fr" className="text-blue-600 underline hover:text-blue-800">
                        paie@odentas.fr
                      </a>
                    </li>
                    <li><strong>N° de TVA intracommunautaire :</strong> FR75907880348</li>
                  </ul>
                </div>

                <p className="mt-4">
                  <strong>Le Directeur de la publication est :</strong> Nicolas ROL
                </p>
                
                <p>
                  ci-après l'"<strong>Éditeur</strong>".
                </p>
              </div>
            </section>

            {/* Article 2 */}
            <section>
              <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <Server className="w-6 h-6 text-blue-600" />
                Article 2 - L'Hébergeur
              </h2>
              <div className="prose prose-sm max-w-none text-gray-700 space-y-3">
                <p>
                  L'hébergement technique de l'Espace Paie est assuré par :
                </p>

                <div className="bg-green-50 border-l-4 border-green-400 p-4 rounded-lg">
                  <p className="font-semibold text-gray-800 mb-3">Infrastructure</p>
                  <ul className="space-y-1 text-sm">
                    <li><strong>Base de données et authentification :</strong> Supabase (hébergé sur AWS)</li>
                    <li><strong>Application web :</strong> Vercel Inc.</li>
                    <li><strong>Localisation des données :</strong> 🇫🇷 France (région AWS eu-west-3, Paris)</li>
                  </ul>
                </div>

                <div className="bg-gray-50 border border-gray-200 p-4 rounded-lg mt-4">
                  <p className="font-semibold text-gray-800 mb-2">Vercel Inc.</p>
                  <p className="text-sm">
                    340 S Lemon Ave #4133<br />
                    Walnut, CA 91789, USA<br />
                    Site web :{" "}
                    <a href="https://vercel.com" target="_blank" rel="noopener noreferrer" className="text-blue-600 underline hover:text-blue-800">
                      vercel.com
                    </a>
                  </p>
                </div>

                <div className="bg-gray-50 border border-gray-200 p-4 rounded-lg mt-4">
                  <p className="font-semibold text-gray-800 mb-2">Supabase Inc.</p>
                  <p className="text-sm">
                    970 Toa Payoh North #07-04<br />
                    Singapore 318992<br />
                    Site web :{" "}
                    <a href="https://supabase.com" target="_blank" rel="noopener noreferrer" className="text-blue-600 underline hover:text-blue-800">
                      supabase.com
                    </a>
                  </p>
                </div>

                <div className="bg-green-50 border-l-4 border-green-400 p-3 rounded-lg mt-4">
                  <p className="text-sm">
                    <strong>🇫🇷 Données hébergées en France :</strong> Toutes les données de l'Espace Paie 
                    sont stockées sur des serveurs situés en France et ne font l'objet d'aucun transfert 
                    en dehors de l'Union Européenne.
                  </p>
                </div>
              </div>
            </section>

            {/* Article 3 */}
            <section>
              <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <Shield className="w-6 h-6 text-blue-600" />
                Article 3 - Accès à l'Espace Paie
              </h2>
              <div className="prose prose-sm max-w-none text-gray-700 space-y-3">
                <p>
                  L'Espace Paie est accessible en tout endroit, 7j/7, 24h/24 sauf cas de force majeure, 
                  interruption programmée ou non et pouvant découler d'une nécessité de maintenance.
                </p>
                <p>
                  En cas de modification, interruption ou suspension de l'Espace Paie, l'Éditeur ne saurait 
                  être tenu responsable.
                </p>
                <p>
                  L'accès à l'Espace Paie est réservé aux clients ayant souscrit un abonnement aux services 
                  de gestion de paie d'Odentas. L'accès nécessite une authentification sécurisée par email 
                  et mot de passe ou code à usage unique (OTP).
                </p>
              </div>
            </section>

            {/* Article 4 */}
            <section>
              <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <FileText className="w-6 h-6 text-blue-600" />
                Article 4 - Collecte des Données
              </h2>
              <div className="prose prose-sm max-w-none text-gray-700 space-y-3">
                <p>
                  L'Espace Paie assure à l'Utilisateur une collecte et un traitement d'informations personnelles 
                  dans le respect de la vie privée conformément à la loi n°78-17 du 6 janvier 1978 relative à 
                  l'informatique, aux fichiers et aux libertés (modifiée par la loi n°2018-493 du 20 juin 2018) 
                  et au Règlement Général sur la Protection des Données (RGPD) n°2016/679 du 27 avril 2016.
                </p>
                
                <p>
                  En vertu de la loi Informatique et Libertés et du RGPD, l'Utilisateur dispose d'un droit 
                  d'accès, de rectification, de suppression, de limitation, d'opposition et de portabilité de 
                  ses données personnelles.
                </p>

                <div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-lg">
                  <p className="font-semibold text-gray-800 mb-2">L'Utilisateur peut exercer ces droits :</p>
                  <ul className="list-disc list-inside space-y-1 text-sm">
                    <li>Par mail à l'adresse{" "}
                      <a href="mailto:paie@odentas.fr" className="text-blue-600 underline hover:text-blue-800">
                        paie@odentas.fr
                      </a>
                    </li>
                    <li>Par courrier postal au siège social : 6 rue d'Armaillé, 75017 Paris</li>
                  </ul>
                </div>

                <p className="mt-4">
                  Pour plus d'informations sur la collecte, le traitement et la protection de vos données 
                  personnelles, veuillez consulter notre{" "}
                  <Link href="/politique-confidentialite" className="text-blue-600 underline hover:text-blue-800 font-medium">
                    Politique de Confidentialité
                  </Link>.
                </p>
              </div>
            </section>

            {/* Article 5 */}
            <section>
              <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <Scale className="w-6 h-6 text-blue-600" />
                Article 5 - Propriété Intellectuelle
              </h2>
              <div className="prose prose-sm max-w-none text-gray-700 space-y-3">
                <p>
                  Toute utilisation, reproduction, diffusion, commercialisation, modification de toute ou 
                  partie de l'Espace Paie, sans autorisation de l'Éditeur, est prohibée et pourra entraîner 
                  des actions et poursuites judiciaires telles que notamment prévues par le Code de la 
                  propriété intellectuelle et le Code civil.
                </p>
                <p>
                  L'ensemble du contenu de l'Espace Paie (structure, textes, logos, images, éléments graphiques, 
                  logiciels, icônes, sons, etc.) est la propriété exclusive d'Odentas Media SAS, à l'exception 
                  des marques, logos ou contenus appartenant à d'autres sociétés partenaires ou auteurs.
                </p>
                <p>
                  Toute représentation et/ou reproduction et/ou exploitation partielle ou totale de ce contenu, 
                  par quelque procédé que ce soit, sans l'autorisation préalable et écrite d'Odentas Media SAS, 
                  est strictement interdite et serait susceptible de constituer une contrefaçon au sens des 
                  articles L.335-2 et suivants du Code de la propriété intellectuelle.
                </p>
              </div>
            </section>

            {/* Article 6 */}
            <section>
              <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <FileText className="w-6 h-6 text-blue-600" />
                Article 6 - Cookies
              </h2>
              <div className="prose prose-sm max-w-none text-gray-700 space-y-3">
                <p>
                  L'Espace Paie peut être amené à vous demander l'acceptation de cookies pour des besoins de 
                  statistiques et d'affichage. Un cookie est une information déposée sur votre disque dur par 
                  le serveur du site que vous visitez.
                </p>
                <p>
                  Il contient plusieurs données qui sont stockées sur votre ordinateur dans un simple fichier 
                  texte auquel un serveur accède pour lire et enregistrer des informations. Certaines parties 
                  de l'Espace Paie ne peuvent être fonctionnelles sans l'acceptation de cookies.
                </p>
                <p>
                  Les cookies utilisés sur l'Espace Paie sont essentiels au fonctionnement de l'application 
                  (authentification, sécurité) et analytiques (mesure d'audience anonymisée via PostHog).
                </p>
                <p>
                  Vous pouvez configurer votre navigateur pour refuser les cookies, mais cela pourrait affecter 
                  le bon fonctionnement de l'Espace Paie.
                </p>
              </div>
            </section>

            {/* Article 7 */}
            <section>
              <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <Shield className="w-6 h-6 text-blue-600" />
                Article 7 - Sécurité
              </h2>
              <div className="prose prose-sm max-w-none text-gray-700 space-y-3">
                <p>
                  L'Éditeur met en œuvre toutes les mesures techniques et organisationnelles nécessaires pour 
                  assurer la sécurité et la confidentialité des données traitées via l'Espace Paie :
                </p>
                <ul className="list-disc list-inside space-y-2">
                  <li>Transmission chiffrée HTTPS (TLS 1.3)</li>
                  <li>Authentification à double facteur (OTP par email)</li>
                  <li>Stockage chiffré des données sensibles</li>
                  <li>Sauvegardes automatiques quotidiennes</li>
                  <li>Contrôle d'accès par rôles et permissions</li>
                  <li>Journalisation des accès et actions sensibles</li>
                </ul>
                <p>
                  Toutefois, aucune méthode de transmission sur Internet ou de stockage électronique n'est 
                  totalement sûre. L'Éditeur ne peut garantir une sécurité absolue.
                </p>
              </div>
            </section>

            {/* Article 8 */}
            <section>
              <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <Scale className="w-6 h-6 text-blue-600" />
                Article 8 - Limitation de Responsabilité
              </h2>
              <div className="prose prose-sm max-w-none text-gray-700 space-y-3">
                <p>
                  L'Éditeur ne pourra être tenu responsable des dommages directs et indirects causés au 
                  matériel de l'Utilisateur, lors de l'accès à l'Espace Paie, et résultant soit de l'utilisation 
                  d'un matériel ne répondant pas aux spécifications indiquées, soit de l'apparition d'un bug ou 
                  d'une incompatibilité.
                </p>
                <p>
                  L'Éditeur ne pourra également être tenu responsable des dommages indirects (tels par exemple 
                  qu'une perte de marché ou perte d'une chance) consécutifs à l'utilisation de l'Espace Paie.
                </p>
                <p>
                  Des espaces interactifs (possibilité de poser des questions dans l'espace de contact) sont 
                  à la disposition des utilisateurs. L'Éditeur se réserve le droit de supprimer, sans mise en 
                  demeure préalable, tout contenu déposé dans cet espace qui contreviendrait à la législation 
                  applicable en France, en particulier aux dispositions relatives à la protection des données.
                </p>
              </div>
            </section>

            {/* Article 9 */}
            <section>
              <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <FileText className="w-6 h-6 text-blue-600" />
                Article 9 - Droit Applicable et Juridiction
              </h2>
              <div className="prose prose-sm max-w-none text-gray-700 space-y-3">
                <p>
                  Les présentes mentions légales sont régies par le droit français.
                </p>
                <p>
                  En cas de différend 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>

            {/* Article 10 */}
            <section>
              <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <Building2 className="w-6 h-6 text-blue-600" />
                Article 10 - Contact
              </h2>
              <div className="prose prose-sm max-w-none text-gray-700 space-y-3">
                <p>
                  Pour toute question relative aux présentes mentions légales ou à l'utilisation de l'Espace Paie, 
                  vous pouvez nous contacter :
                </p>
                <div className="bg-gray-50 border border-gray-200 p-4 rounded-lg">
                  <p className="font-semibold text-gray-800 mb-2">Odentas Media SAS</p>
                  <p className="text-sm space-y-1">
                    <strong>Adresse :</strong> 6 rue d'Armaillé, 75017 Paris<br />
                    <strong>Email :</strong>{" "}
                    <a href="mailto:paie@odentas.fr" className="text-blue-600 underline hover:text-blue-800">
                      paie@odentas.fr
                    </a><br />
                    <strong>WhatsApp :</strong> 07 80 978 000<br />
                    <strong>Site web :</strong>{" "}
                    <a href="https://odentas.fr" target="_blank" rel="noopener noreferrer" className="text-blue-600 underline hover:text-blue-800">
                      odentas.fr
                    </a>
                  </p>
                </div>
              </div>
            </section>

            {/* Footer des mentions légales */}
            <div className="border-t border-gray-200 pt-6 text-center">
              <p className="text-sm text-gray-500 mb-4">
                Ces mentions légales s'appliquent exclusivement à l'utilisation de l'Espace Paie Odentas.
              </p>
              <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
                <Link 
                  href="/"
                  className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-800 font-medium transition-colors"
                >
                  <ArrowLeft className="w-4 h-4" />
                  Retour à l'accueil
                </Link>
                <span className="hidden sm:inline text-gray-300">•</span>
                <Link 
                  href="/politique-confidentialite"
                  className="text-blue-600 hover:text-blue-800 font-medium transition-colors"
                >
                  Politique de Confidentialité
                </Link>
              </div>
            </div>
          </div>

          {/* Footer */}
          <div className="text-center mt-6 text-xs text-gray-500">
            <p>© 2021–2025 Odentas Media SAS • RCS Paris 907 880 348</p>
            <div className="mt-2 flex items-center justify-center gap-2">
              <span role="img" aria-label="Drapeau français">🇫🇷</span>
              <span>Données hébergées en France</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
