@extends('layouts.main')
@section('content')

<section class="bg-white py-16 px-4 md:px-8">
  <div class="max-w-6xl mx-auto prose">
    <!-- Header -->
    <div class="text-center mb-16">
      <h1 class="text-4xl font-bold text-gray-800 mb-4">Politique de Confidentialité</h1>
      <p class="text-gray-600">Dernière mise à jour : 04/04/2025</p>
    </div>

    <!-- Introduction -->
    <div class="bg-yellow-500 p-6 rounded-xl mb-12">
      <p class="text-gray-800">
        Le Syndic Chalet Med s'engage à protéger vos données personnelles. Cette politique explique comment nous collectons, utilisons et protégeons vos informations dans le cadre de nos services de gestion de résidence.
      </p>
    </div>

    <!-- Content Sections -->
    <div class="space-y-12">
      <!-- Data Collection -->
      <div class="border-l-4 border-yellow-500 pl-6">
        <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
          <i class="fas fa-database text-yellow-600 mr-3"></i>
          1. Données Collectées
        </h2>
        <p class="text-gray-600 mb-4">Nous collectons :</p>
        <ul class="list-disc pl-6 space-y-2 text-gray-600">
          <li>Informations d'identification (nom, prénom, adresse)</li>
          <li>Coordonnées (email, téléphone)</li>
          <li>Informations financières relatives aux cotisations</li>
          <li>Données de connexion (adresse IP, logs)</li>
        </ul>
      </div>

      <!-- Data Usage -->
      <div class="border-l-4 border-yellow-500 pl-6">
        <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
          <i class="fas fa-shield-alt text-yellow-600 mr-3"></i>
          2. Utilisation des Données
        </h2>
        <div class="grid md:grid-cols-2 gap-6">
          <div class="bg-gray-200 p-4 rounded-lg">
            <h3 class="font-semibold mb-2">Finalités principales :</h3>
            <ul class="list-disc pl-4 space-y-2">
              <li>Gestion des cotisations</li>
              <li>Communication administrative</li>
              <li>Sécurité de la résidence</li>
            </ul>
          </div>
          <div class="bg-gray-200 p-4 rounded-lg">
            <h3 class="font-semibold mb-2">Bases légales :</h3>
            <ul class="list-disc pl-4 space-y-2">
              <li>Exécution contractuelle</li>
              <li>Consentement explicite</li>
              <li>Intérêt légitime</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- Data Protection -->
      <div class="border-l-4 border-yellow-500 pl-6">
        <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
          <i class="fas fa-lock text-yellow-600 mr-3"></i>
          3. Protection des Données
        </h2>
        <div class="grid md:grid-cols-3 gap-4 text-center">
          <div class="p-4 bg-yellow-500 rounded-lg">
            <i class="fas fa-encryption text-yellow-600 text-2xl mb-2"></i>
            <p class="font-semibold">Chiffrement SSL</p>
          </div>
          <div class="p-4 bg-yellow-500 rounded-lg">
            <i class="fas fa-user-shield text-white text-2xl mb-2"></i>
            <p class="font-semibold">Accès restreint</p>
          </div>
          <div class="p-4 bg-yellow-500 rounded-lg">
            <i class="fas fa-backup text-yellow-600 text-2xl mb-2"></i>
            <p class="font-semibold">Sauvegardes régulières</p>
          </div>
        </div>
      </div>

      <!-- User Rights -->
      <div class="border-l-4 border-yellow-500 pl-6">
        <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
          <i class="fas fa-user-check text-yellow-600 mr-3"></i>
          4. Vos Droits
        </h2>
        <div class="space-y-4">
          <p class="text-gray-600">Conformément à la loi 09-08 relative à la protection des personnes physiques à l'égard du traitement des données à caractère personnel, vous avez le droit de :</p>
          <ul class="grid md:grid-cols-2 gap-4">
            <li class="flex items-center p-3 bg-gray-200 rounded-lg">
              <i class="fas fa-eye mr-2 text-yellow-600"></i> Accès
            </li>
            <li class="flex items-center p-3 bg-gray-200 rounded-lg">
              <i class="fas fa-edit mr-2 text-yellow-600"></i> Rectification
            </li>
            <li class="flex items-center p-3 bg-gray-200 rounded-lg">
              <i class="fas fa-trash mr-2 text-yellow-600"></i> Suppression
            </li>
            <li class="flex items-center p-3 bg-gray-200 rounded-lg">
              <i class="fas fa-ban mr-2 text-yellow-600"></i> Opposition
            </li>
          </ul>
          <p class="text-gray-600">Pour exercer ces droits, contactez notre DPO :<br>
            <a href="mailto:dpo@chaletmed.com" class="text-yellow-600 hover:underline">dpo@chaletmed.com</a>
          </p>
        </div>
      </div>

      <!-- Cookies -->
      <div class="border-l-4 border-yellow-500 pl-6">
        <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
          <i class="fas fa-cookie-bite text-yellow-600 mr-3"></i>
          5. Gestion des Cookies
        </h2>
        <div class="bg-yellow-500 p-4 rounded-lg">
          <p class="text-gray-600 mb-4">Nous utilisons des cookies pour :</p>
          <div class="grid md:grid-cols-2 gap-4">
            <div class="flex items-center">
              <i class="fas fa-shield-alt text-white mr-2"></i>
              Sécurité des connexions
            </div>
            <div class="flex items-center">
              <i class="fas fa-chart-line text-white mr-2"></i>
              Analyse d'audience
            </div>
          </div>
          <div class="mt-4">
            <a href="#cookie-settings" class="text-white hover:underline">
              <i class="fas fa-cog mr-2"></i>Gérer les préférences
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Legal Info -->
    <div class="mt-16 border-t border-gray-200 pt-8">
      <h3 class="text-lg font-bold text-gray-800 mb-4">Informations Légales</h3>
      <div class="grid md:grid-cols-2 gap-6 text-gray-600">
        <div>
          <p class="font-semibold">Responsable de traitement :</p>
          <p>Syndic Chalet Med<br>
          Route de Sebta, Fnideq</p>
        </div>
        <div>
          <p class="font-semibold">Hébergeur :</p>
          <p>[Nom de l'hébergeur]<br>
          [Adresse]</p>
        </div>
      </div>
    </div>

    <!-- Update Clause -->
    <div class="mt-12 bg-gray-200 p-6 rounded-xl">
      <p class="text-sm text-gray-600">
        Cette politique peut être mise à jour. Nous vous invitons à la consulter régulièrement. Version en vigueur depuis le 04/04/2025.
      </p>
    </div>
  </div>
</section>


@endsection