{% extends 'Signalement/layout.html.twig' %}
{% trans_default_domain 'home' %}

{% block title %}Activer la localisation - Aide{% endblock %}

{% block body %}
  <div class="flex flex-col h-screen bg-white">
    {# Header simplifié #}
    <div class="flex flex-col p-2 md:p-4 lg:p-6 bg-white border-b">
      <div class="container mx-auto max-w-4xl">
        <div class="flex items-center justify-between w-full">
          <div class="flex items-center">
            <a href="javascript:history.back()" class="mr-4 text-gray-600 hover:text-gray-800">
              <span class="material-symbols-outlined text-2xl">arrow_back</span>
            </a>
            <h1 class="text-xl md:text-2xl font-bold text-gray-800">Activer la localisation</h1>
          </div>
          <img src="{{ asset('assets/img/umay_banniere_couleur.png') }}" alt="Logo" class="w-12 md:w-16">
        </div>
      </div>
    </div>

    {# Contenu principal #}
    <div class="flex-1 overflow-y-auto bg-gray-50">
      <div class="container mx-auto max-w-4xl p-2 md:p-6">

        {# Introduction #}
        <div class="bg-white rounded-lg shadow-sm p-4 md:p-6 mb-4 md:mb-6">
          <div class="flex items-start">
            <span
              class="material-symbols-outlined text-blue-600 text-2xl md:text-3xl mr-3 md:mr-4 flex-shrink-0">info</span>
            <div>
              <h2 class="text-base md:text-lg font-semibold text-gray-800 mb-2">Pourquoi avons-nous besoin de votre
                localisation ?</h2>
              <p class="text-sm md:text-base text-gray-600">
                Pour faire un signalement, nous avons besoin de connaître votre position afin de localiser précisément
                l'événement et d'envoyer de l'aide si nécessaire.
              </p>
            </div>
          </div>
        </div>

        {# iOS Section #}
        <div class="bg-white rounded-lg shadow-sm p-4 md:p-6 mb-4 md:mb-6">
          <div class="flex items-center mb-4">
            <span class="material-symbols-outlined text-gray-800 text-xl md:text-2xl mr-2 md:mr-3">phone_iphone</span>
            <h2 class="text-lg md:text-xl font-bold text-gray-800">Sur iPhone / iPad (iOS)</h2>
          </div>

          {# Étape 1 #}
          <div class="mb-4 md:mb-6">
            <div class="flex items-center mb-2 md:mb-3">
              <span
                class="bg-red-100 text-red-800 text-xs md:text-sm font-medium px-2 md:px-3 py-1 rounded-full mr-2 md:mr-3">Étape 1</span>
              <h3 class="text-sm md:text-base font-semibold text-gray-800">Activer les services de localisation</h3>
            </div>
            <div class="bg-gray-50 p-3 md:p-4 ml-1 md:ml-2 border-l-4 border-red-400">
              <p class="text-sm md:text-base text-gray-700 mb-2">Allez dans :</p>
              <p class="font-mono text-xs md:text-sm bg-white px-2 md:px-3 py-2 rounded border break-words">
                Réglages > Confidentialité > Service de localisation > <strong>Activer</strong>
              </p>
            </div>
          </div>

          {# Étape 2 #}
          <div>
            <div class="flex items-center mb-2 md:mb-3">
              <span
                class="bg-orange-100 text-orange-800 text-xs md:text-sm font-medium px-2 md:px-3 py-1 rounded-full mr-2 md:mr-3">Étape 2</span>
              <h3 class="text-sm md:text-base font-semibold text-gray-800">Autoriser votre navigateur</h3>
            </div>
            <div class="bg-gray-50 p-3 md:p-4 ml-1 md:ml-2 border-l-4 border-orange-400">
              <p class="text-sm md:text-base text-gray-700 mb-2">Allez dans :</p>
              <p class="font-mono text-xs md:text-sm bg-white px-2 md:px-3 py-2 rounded border break-words">
                Réglages > [Votre navigateur] > Localisation > <strong>Autoriser</strong>
              </p>
              <p class="text-xs md:text-sm text-gray-500 mt-2">
                Remplacez [Votre navigateur] par Safari, Chrome, Firefox ou le navigateur que vous utilisez.
              </p>
            </div>
          </div>
        </div>

        {# Android Section #}
        <div class="bg-white rounded-lg shadow-sm p-4 md:p-6 mb-4 md:mb-6">
          <div class="flex items-center mb-4">
            <span class="material-symbols-outlined text-gray-800 text-xl md:text-2xl mr-2 md:mr-3">android</span>
            <h2 class="text-lg md:text-xl font-bold text-gray-800">Sur Android</h2>
          </div>

          {# Étape 1 #}
          <div class="mb-4 md:mb-6">
            <div class="flex items-center mb-2 md:mb-3">
              <span
                class="bg-red-100 text-red-800 text-xs md:text-sm font-medium px-2 md:px-3 py-1 rounded-full mr-2 md:mr-3">Étape 1</span>
              <h3 class="text-sm md:text-base font-semibold text-gray-800">Activer la localisation</h3>
            </div>
            <div class="bg-gray-50 p-3 md:p-4 ml-1 md:ml-2 border-l-4 border-red-400">
              <p class="text-sm md:text-base text-gray-700 mb-2">Allez dans :</p>
              <p class="font-mono text-xs md:text-sm bg-white px-2 md:px-3 py-2 rounded border break-words">
                Paramètres > Localisation > <strong>Activer</strong>
              </p>
              <p class="text-xs md:text-sm text-gray-500 mt-2">
                Vous pouvez aussi glisser depuis le haut de l'écran et appuyer sur l'icône de localisation.
              </p>
            </div>
          </div>

          {# Étape 2 #}
          <div>
            <div class="flex items-center mb-2 md:mb-3">
              <span
                class="bg-orange-100 text-orange-800 text-xs md:text-sm font-medium px-2 md:px-3 py-1 rounded-full mr-2 md:mr-3">Étape 2</span>
              <h3 class="text-sm md:text-base font-semibold text-gray-800">Autoriser votre navigateur</h3>
            </div>
            <div class="bg-gray-50 p-3 md:p-4 ml-1 md:ml-2 border-l-4 border-orange-400">
              <p class="text-sm md:text-base text-gray-700 mb-2">Allez dans :</p>
              <p class="font-mono text-xs md:text-sm bg-white px-2 md:px-3 py-2 rounded border break-words">
                Paramètres > Applications > [Votre navigateur] > Autorisations > Localisation >
                <strong>Autoriser</strong>
              </p>
              <p class="text-xs md:text-sm text-gray-500 mt-2">
                Remplacez [Votre navigateur] par Chrome, Firefox, Samsung Internet ou le navigateur que vous utilisez.
              </p>
            </div>
          </div>
        </div>

        {# Windows Section #}
        <div class="bg-white rounded-lg shadow-sm p-4 md:p-6 mb-4 md:mb-6">
          <div class="flex items-center mb-4">
            <span class="material-symbols-outlined text-gray-800 text-xl md:text-2xl mr-2 md:mr-3">desktop_windows</span>
            <h2 class="text-lg md:text-xl font-bold text-gray-800">Sur Windows</h2>
          </div>

          <div class="mb-4 md:mb-6">
            <div class="flex items-center mb-2 md:mb-3">
              <span class="bg-blue-100 text-blue-800 text-xs md:text-sm font-medium px-2 md:px-3 py-1 rounded-full mr-2 md:mr-3">Étape 1</span>
              <h3 class="text-sm md:text-base font-semibold text-gray-800">Activer les services de localisation Windows</h3>
            </div>
            <div class="bg-gray-50 p-3 md:p-4 ml-1 md:ml-2 border-l-4 border-blue-400">
              <p class="text-sm md:text-base text-gray-700 mb-2">Allez dans :</p>
              <p class="font-mono text-xs md:text-sm bg-white px-2 md:px-3 py-2 rounded border break-words">
                Paramètres > Confidentialité > Localisation > <strong>Activer</strong>
              </p>
              <p class="text-xs md:text-sm text-gray-500 mt-2">
                Ou appuyez sur Windows + I, puis recherchez "Localisation".
              </p>
            </div>
          </div>

          <div>
            <div class="flex items-center mb-2 md:mb-3">
              <span class="bg-blue-100 text-blue-800 text-xs md:text-sm font-medium px-2 md:px-3 py-1 rounded-full mr-2 md:mr-3">Étape 2</span>
              <h3 class="text-sm md:text-base font-semibold text-gray-800">Autoriser les applications à accéder à la localisation</h3>
            </div>
            <div class="bg-gray-50 p-3 md:p-4 ml-1 md:ml-2 border-l-4 border-blue-400">
              <p class="text-sm md:text-base text-gray-700 mb-2">Dans les paramètres de localisation :</p>
              <p class="font-mono text-xs md:text-sm bg-white px-2 md:px-3 py-2 rounded border break-words">
                Activer "Autoriser les applications à accéder à votre position"
              </p>
            </div>
          </div>
        </div>

        {# macOS Section #}
        <div class="bg-white rounded-lg shadow-sm p-4 md:p-6 mb-4 md:mb-6">
          <div class="flex items-center mb-4">
            <span class="material-symbols-outlined text-gray-800 text-xl md:text-2xl mr-2 md:mr-3">laptop_mac</span>
            <h2 class="text-lg md:text-xl font-bold text-gray-800">Sur Mac (macOS)</h2>
          </div>

          <div class="mb-4 md:mb-6">
            <div class="flex items-center mb-2 md:mb-3">
              <span class="bg-gray-200 text-gray-800 text-xs md:text-sm font-medium px-2 md:px-3 py-1 rounded-full mr-2 md:mr-3">Étape 1</span>
              <h3 class="text-sm md:text-base font-semibold text-gray-800">Activer les services de localisation</h3>
            </div>
            <div class="bg-gray-50 p-3 md:p-4 ml-1 md:ml-2 border-l-4 border-gray-400">
              <p class="text-sm md:text-base text-gray-700 mb-2">Allez dans :</p>
              <p class="font-mono text-xs md:text-sm bg-white px-2 md:px-3 py-2 rounded border break-words">
                Menu Pomme > Réglages Système > Confidentialité et sécurité > Service de localisation > <strong>Activer</strong>
              </p>
            </div>
          </div>

          <div>
            <div class="flex items-center mb-2 md:mb-3">
              <span class="bg-gray-200 text-gray-800 text-xs md:text-sm font-medium px-2 md:px-3 py-1 rounded-full mr-2 md:mr-3">Étape 2</span>
              <h3 class="text-sm md:text-base font-semibold text-gray-800">Autoriser votre navigateur</h3>
            </div>
            <div class="bg-gray-50 p-3 md:p-4 ml-1 md:ml-2 border-l-4 border-gray-400">
              <p class="text-sm md:text-base text-gray-700 mb-2">Dans la liste des applications :</p>
              <p class="font-mono text-xs md:text-sm bg-white px-2 md:px-3 py-2 rounded border break-words">
                Cochez la case à côté de votre navigateur (Safari, Chrome, Firefox, etc.)
              </p>
            </div>
          </div>
        </div>

        {# Navigateurs Section #}
        <div class="bg-white rounded-lg shadow-sm p-4 md:p-6 mb-4 md:mb-6">
          <div class="flex items-center mb-4">
            <span class="material-symbols-outlined text-gray-800 text-xl md:text-2xl mr-2 md:mr-3">web</span>
            <h2 class="text-lg md:text-xl font-bold text-gray-800">Dans votre navigateur</h2>
          </div>

          {# Chrome #}
          <div class="mb-4 md:mb-6">
            <div class="flex items-center mb-2 md:mb-3">
              <span class="bg-green-100 text-green-800 text-xs md:text-sm font-medium px-2 md:px-3 py-1 rounded-full mr-2 md:mr-3">Chrome</span>
              <h3 class="text-sm md:text-base font-semibold text-gray-800">Google Chrome</h3>
            </div>
            <div class="bg-gray-50 p-3 md:p-4 ml-1 md:ml-2 border-l-4 border-green-400">
              <p class="font-mono text-xs md:text-sm bg-white px-2 md:px-3 py-2 rounded border break-words">
                Menu ⋮ > Paramètres > Confidentialité et sécurité > Paramètres des sites > Position
              </p>
              <p class="text-xs md:text-sm text-gray-500 mt-2">
                Ou tapez <code class="bg-gray-200 px-1 rounded">chrome://settings/content/location</code> dans la barre d'adresse.
              </p>
            </div>
          </div>

          {# Firefox #}
          <div class="mb-4 md:mb-6">
            <div class="flex items-center mb-2 md:mb-3">
              <span class="bg-orange-100 text-orange-800 text-xs md:text-sm font-medium px-2 md:px-3 py-1 rounded-full mr-2 md:mr-3">Firefox</span>
              <h3 class="text-sm md:text-base font-semibold text-gray-800">Mozilla Firefox</h3>
            </div>
            <div class="bg-gray-50 p-3 md:p-4 ml-1 md:ml-2 border-l-4 border-orange-400">
              <p class="font-mono text-xs md:text-sm bg-white px-2 md:px-3 py-2 rounded border break-words">
                Menu ☰ > Paramètres > Vie privée et sécurité > Permissions > Localisation > Paramètres
              </p>
            </div>
          </div>

          {# Edge #}
          <div class="mb-4 md:mb-6">
            <div class="flex items-center mb-2 md:mb-3">
              <span class="bg-blue-100 text-blue-800 text-xs md:text-sm font-medium px-2 md:px-3 py-1 rounded-full mr-2 md:mr-3">Edge</span>
              <h3 class="text-sm md:text-base font-semibold text-gray-800">Microsoft Edge</h3>
            </div>
            <div class="bg-gray-50 p-3 md:p-4 ml-1 md:ml-2 border-l-4 border-blue-400">
              <p class="font-mono text-xs md:text-sm bg-white px-2 md:px-3 py-2 rounded border break-words">
                Menu ⋯ > Paramètres > Cookies et autorisations de site > Localisation
              </p>
            </div>
          </div>

          {# Safari #}
          <div>
            <div class="flex items-center mb-2 md:mb-3">
              <span class="bg-gray-200 text-gray-800 text-xs md:text-sm font-medium px-2 md:px-3 py-1 rounded-full mr-2 md:mr-3">Safari</span>
              <h3 class="text-sm md:text-base font-semibold text-gray-800">Safari (Mac)</h3>
            </div>
            <div class="bg-gray-50 p-3 md:p-4 ml-1 md:ml-2 border-l-4 border-gray-400">
              <p class="font-mono text-xs md:text-sm bg-white px-2 md:px-3 py-2 rounded border break-words">
                Safari > Réglages > Sites web > Localisation
              </p>
            </div>
          </div>
        </div>

        {# Permission sur le site #}
        <div class="bg-white rounded-lg shadow-sm p-4 md:p-6 mb-4 md:mb-6">
          <div class="flex items-center mb-4">
            <span class="material-symbols-outlined text-gray-800 text-xl md:text-2xl mr-2 md:mr-3">language</span>
            <h2 class="text-lg md:text-xl font-bold text-gray-800">Autoriser ce site</h2>
          </div>

          <div>
            <div class="flex items-center mb-2 md:mb-3">
              <span
                class="bg-yellow-100 text-yellow-800 text-xs md:text-sm font-medium px-2 md:px-3 py-1 rounded-full mr-2 md:mr-3">Étape 3</span>
              <h3 class="text-sm md:text-base font-semibold text-gray-800">Autoriser la localisation pour ce site</h3>
            </div>
            <div class="bg-gray-50 p-3 md:p-4 ml-1 md:ml-2 border-l-4 border-yellow-400">
              <p class="text-sm md:text-base text-gray-700 mb-3">
                Lorsque le navigateur vous demande d'autoriser la localisation pour ce site, appuyez sur <strong>"Autoriser"</strong>.
              </p>
              <p class="text-sm md:text-base text-gray-700 mb-2">
                Si vous avez déjà refusé, vous pouvez réinitialiser la permission :
              </p>
              <ul class="list-disc list-inside text-gray-600 text-xs md:text-sm space-y-1">
                <li>Appuyez sur l'icône de cadenas ou d'information dans la barre d'adresse</li>
                <li>Recherchez "Localisation" ou "Position"</li>
                <li>Changez le paramètre en "Autoriser"</li>
              </ul>
            </div>
          </div>
        </div>

        {# Bouton retour #}
        <div class="text-center mb-8 md:mb-12">
          <a href="javascript:history.back()"
             class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-pink-500 to-red-500 text-white rounded-xl hover:opacity-90 transition-opacity">
            <span class="material-symbols-outlined mr-2">arrow_back</span>
            Retour
          </a>
        </div>

      </div>
    </div>
  </div>
{% endblock %}