<template>
  <footer class="bg-[#58595b] text-white py-8">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <!-- Logo y información de contacto -->
        <div class="flex flex-col md:flex-row gap-6">
          <!-- Logo -->
          <div class="flex-shrink-0">
            <img
              src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
              alt="Comalcalco Logo"
              class="h-20 w-auto object-contain"
            />
          </div>

          <!-- Información de contacto -->
          <div class="space-y-3">
            <!-- Dirección -->
            <div class="flex items-start space-x-3">
              <div class="bg-yellow-600 rounded-full p-2 flex-shrink-0">
                <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
                </svg>
              </div>
              <p class="text-sm text-gray-300">
                Plaza Juárez S/N, Centro, C.P. 86300, Comalcalco,<br>
                Tabasco, México.
              </p>
            </div>

            <!-- Teléfono -->
            <div class="flex items-center space-x-3">
              <div class="bg-yellow-600 rounded-full p-2 flex-shrink-0">
                <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/>
                </svg>
              </div>
              <p class="text-sm text-gray-300">9331140000</p>
            </div>

            <!-- Horarios -->
            <div class="flex items-center space-x-3">
              <div class="bg-yellow-600 rounded-full p-2 flex-shrink-0">
                <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
                </svg>
              </div>
              <p class="text-sm text-gray-300">Lunes a Viernes de 8:00 a 16:00 horas</p>
            </div>

            <!-- Email -->
            <div class="flex items-center space-x-3">
              <div class="bg-yellow-600 rounded-full p-2 flex-shrink-0">
                <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
                  <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
                </svg>
              </div>
              <p class="text-sm text-gray-300">
                <a href="mailto:mejoraregulatoria@comalcalco.gob.mx" class="hover:text-yellow-400 transition-colors">
                  mejoraregulatoria@comalcalco.gob.mx
                </a>
              </p>
            </div>
          </div>
        </div>

        <!-- Servicios de emergencia -->
        <div class="space-y-4">
          <!-- Emergencias -->
          <div class="flex items-center space-x-3">
            <div class="bg-yellow-600 rounded-full p-2 flex-shrink-0">
              <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
              </svg>
            </div>
            <div>
              <p class="text-yellow-400 font-semibold text-sm">Emergencias</p>
              <p class="text-white text-lg font-bold">911</p>
            </div>
          </div>

          <!-- Bomberos -->
          <div class="flex items-center space-x-3">
            <div class="bg-yellow-600 rounded-full p-2 flex-shrink-0">
              <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd"/>
              </svg>
            </div>
            <div>
              <p class="text-yellow-400 font-semibold text-sm">Bomberos</p>
              <p class="text-white text-lg font-bold">993 315 5670</p>
            </div>
          </div>

          <!-- Cruz Roja -->
          <div class="flex items-center space-x-3">
            <div class="bg-yellow-600 rounded-full p-2 flex-shrink-0">
              <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V4a2 2 0 00-2-2H6zm1 2a1 1 0 000 2h6a1 1 0 100-2H7zm6 7a1 1 0 011 1v3a1 1 0 11-2 0v-3a1 1 0 011-1zm-3 3a1 1 0 100 2h.01a1 1 0 100-2H10zm-4 1a1 1 0 011-1h.01a1 1 0 110 2H7a1 1 0 01-1-1zm1-4a1 1 0 100 2h.01a1 1 0 100-2H7zm2 1a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1zm4-4a1 1 0 100 2h.01a1 1 0 100-2H13zM9 9a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1zM7 8a1 1 0 000 2h.01a1 1 0 000-2H7z" clip-rule="evenodd"/>
              </svg>
            </div>
            <div>
              <p class="text-yellow-400 font-semibold text-sm">Cruz Roja Mexicana</p>
              <p class="text-white text-lg font-bold">993 334 3004</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Copyright -->
      <div class="mt-8 pt-6 border-t border-gray-600 text-center">
        <div class="flex flex-col md:flex-row justify-center items-center space-y-2 md:space-y-0 md:space-x-6">
          <p class="text-sm text-gray-300">
            © Ayuntamiento de Comalcalco 2024-2027
          </p>
          <span class="hidden md:block text-gray-500">|</span>
          <a href="#" class="text-sm text-gray-300 hover:text-yellow-400 transition-colors">
            Aviso de Privacidad
          </a>
        </div>
      </div>
    </div>
  </footer>
</template>
