{% extends 'menu/menu.html' %}
{% load static %}

{% block title %} Solicitar Servicios {% endblock %}

{% block body %}

<section class="carousel-section custom-carousel-container">
  <div class="custom-carousel">
    <!-- Ítem 1: Tienda -->
    <div class="custom-carousel-item" data-category="Tienda" data-target="recommendations-tienda">
      <i class="material-icons" style="font-size: 48px;">store</i>
      <p>Tienda</p>
    </div>

    <!-- Ítem 2: Restaurante -->
    <div class="custom-carousel-item" data-category="Restaurante" data-target="recommendations-restaurante">
      <i class="material-icons" style="font-size: 48px;">restaurant</i>
      <p>Restaurante</p>
    </div>

    <!-- Ítem 3: Servicios -->
    <div class="custom-carousel-item" data-category="Servicios" data-target="recommendations-servicios">
      <i class="material-icons" style="font-size: 48px;">build</i>
      <p>Servicios</p>
    </div>

    <!-- Ítem 4: Farmacia -->
    <div class="custom-carousel-item" data-category="Farmacia" data-target="recommendations-farmacia">
      <i class="material-icons" style="font-size: 48px;">local_pharmacy</i>
      <p>Farmacia</p>
    </div>

    <!-- Ítem 5: Supermercado -->
    <div class="custom-carousel-item" data-category="Supermercado" data-target="recommendations-supermercado">
      <i class="material-icons" style="font-size: 48px;">shopping_cart</i>
      <p>Supermercado</p>
    </div>

    <!-- Ítem 6: Transporte -->
    <div class="custom-carousel-item" data-category="Transporte" data-target="recommendations-transporte">
      <i class="material-icons" style="font-size: 48px;">directions_bus</i>
      <p>Transporte</p>
    </div>

    <!-- Ítem 7: Educación -->
    <div class="custom-carousel-item" data-category="Educación" data-target="recommendations-educacion">
      <i class="material-icons" style="font-size: 48px;">school</i>
      <p>Educación</p>
    </div>

    <!-- Ítem 8: Tecnología -->
    <div class="custom-carousel-item" data-category="Tecnología" data-target="recommendations-tecnologia">
      <i class="material-icons" style="font-size: 48px;">computer</i>
      <p>Tecnología</p>
    </div>

    <!-- Ítem 9: Hotel -->
    <div class="custom-carousel-item" data-category="Hotel" data-target="recommendations-hotel">
      <i class="material-icons" style="font-size: 48px;">hotel</i>
      <p>Hotel</p>
    </div>

    <!-- Ítem 10: Deportes -->
    <div class="custom-carousel-item" data-category="Deportes" data-target="recommendations-deportes">
      <i class="material-icons" style="font-size: 48px;">sports_soccer</i>
      <p>Deportes</p>
    </div>

    <!-- Ítem 11: Salud -->
    <div class="custom-carousel-item" data-category="Salud" data-target="recommendations-salud">
      <i class="material-icons" style="font-size: 48px;">local_hospital</i>
      <p>Salud</p>
    </div>

    <!-- Ítem 12: Belleza -->
    <div class="custom-carousel-item" data-category="Belleza" data-target="recommendations-belleza">
      <i class="material-icons" style="font-size: 48px;">spa</i>
      <p>Belleza</p>
    </div>

    <!-- Ítem 13: Finanzas -->
    <div class="custom-carousel-item" data-category="Finanzas" data-target="recommendations-finanzas">
      <i class="material-icons" style="font-size: 48px;">account_balance</i>
      <p>Finanzas</p>
    </div>

    <!-- Ítem 14: Seguridad -->
    <div class="custom-carousel-item" data-category="Seguridad" data-target="recommendations-seguridad">
      <i class="material-icons" style="font-size: 48px;">security</i>
      <p>Seguridad</p>
    </div>

    <!-- Ítem 15: Entretenimiento -->
    <div class="custom-carousel-item" data-category="Entretenimiento" data-target="recommendations-entretenimiento">
      <i class="material-icons" style="font-size: 48px;">movie</i>
      <p>Entretenimiento</p>
    </div>
  </div>

  <!-- Botones de navegación con Material Icons -->
  <button class="custom-carousel-button custom-left">
    <i class="material-icons">chevron_left</i>
  </button>
  <button class="custom-carousel-button custom-right">
    <i class="material-icons">chevron_right</i>
  </button>
</section>


  <main >

    <section class="recommendations" id="recommendations-tienda">
      <h2 id="category-title"></h2>
      <div class="card-container">
        <!-- Tarjetas de Tienda aquí -->
        <a href="{% url 'reservar_servicios_disenio' %}" class="card-link">
          <div class="card">
            <img src="{% static 'app/assets/images/ropa.jpg' %}" alt="Tienda de Ropa">
            <div class="card-content">
              <h3>Tienda de Ropa</h3>
              <p><strong>5.0 ★</strong> (93)</p>
              <p>Choluteca, San Luis</p>
              <p class="category">Tienda de Ropa</p>
            </div>
          </div>
        </a>
        
        <div class="card">
          <img src="{% static 'app/assets/images/estilo.jpg' %}"
            alt="Estilo y Moda">
          <div class="card-content">
            <h3>Estilo y Moda</h3>
            <p><strong>5.0 ★</strong> (93)</p>
            <p>Choluteca, San Luis</p>
            <p class="category">Estilo y Moda</p>
          </div>
        </div>
        <div class="card">
          <img src="{% static 'app/assets/images/mujeres.jpg' %}" alt=Tienda
            Americana">
          <div class="card-content">
            <h3>Tienda Americana</h3>
            <p><strong>5.0 ★</strong> (93)</p>
            <p>Choluteca, San Luis</p>
            <p class="category">Tienda Americana</p>
          </div>
        </div>
        <div class="card">
          <img src="{% static 'app/assets/images/juguetes.png' %}"
            alt="Tienda de Juguetes">
          <div class="card-content">
            <h3>Tienda de Juguetes</h3>
            <p><strong>5.0 ★</strong> (93)</p>
            <p>Choluteca, San Luis</p>
            <p class="category">Tienda de Juguetes</p>
          </div>
        </div>

      </div>
    </div>

  </section>

  <section class="recommendations" id="recommendations-restaurante">
    <h2 id="category-title"></h2>
    <div class="card-container">
      <!-- Tarjetas de Tienda aquí -->
      <div class="card">
        <img src="{% static 'app/assets/images/manglares.jpg' %}"
          alt="Manglares">
        <div class="card-content">
          <h3>Manglares</h3>
          <p><strong>5.0 ★</strong> (93)</p>
          <p>Choluteca, San Luis</p>
          <p class="category">Manglares</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/Bigos.jpg' %}"
          alt="Bigos">
        <div class="card-content">
          <h3>Bigos</h3>
          <p><strong>5.0 ★</strong> (93)</p>
          <p>Choluteca, San Luis</p>
          <p class="category">Bigos</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/conchamar.jpg' %}" alt=conchamar">
        <div class="card-content">
          <h3>Concha Mar</h3>
          <p><strong>5.0 ★</strong> (93)</p>
          <p>Choluteca, San Luis</p>
          <p class="category">Concha Mar</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/bali.jpg' %}"
          alt="Bali">
        <div class="card-content">
          <h3>Bali</h3>
          <p><strong>5.0 ★</strong> (93)</p>
          <p>Choluteca, San Luis</p>
          <p class="category">Bali</p>
        </div>
      </div>

    </div>
  </div>

</section>
  <!-- Ejemplo de sección para Servicios -->
  <section class="recommendations" id="recommendations-servicios">
    <h2 id="category-title"></h2>
    <div class="card-container">
      <!-- Tarjetas específicas de la categoría Servicios -->
      <div class="card">
        <img src="{% static 'app/assets/images/mecanica.png' %}"
          alt="Mecanica">
        <div class="card-content">
          <h3>Mecanica en General</h3>
          <p><strong>4.9 ★</strong> (120)</p>
          <p>Choluteca, San Luis</p>
          <p class="category">Mecanica en General</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/plomeria.png' %}"
          alt="Plomeria">
        <div class="card-content">
          <h3>Plomeria</h3>
          <p><strong>4.9 ★</strong> (120)</p>
          <p>Choluteca, San Luis</p>
          <p class="category">Plomeria</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/etiquetas.png' %}"
          alt="Etiquetas">
        <div class="card-content">
          <h3>Servicios de Etiquetas</h3>
          <p><strong>4.9 ★</strong> (120)</p>
          <p>Choluteca, San Luis</p>
          <p class="category">Servicios de Etiquetas</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/contaduria.png' %}"
          alt="contaduria">
        <div class="card-content">
          <h3>Servicios Tributarios</h3>
          <p><strong>4.9 ★</strong> (120)</p>
          <p>Choluteca, San Luis</p>
          <p class="category">Servicios Tributarios</p>
        </div>
      </div>
    </div>
  </section>

 <!-- Sección Farmacia -->
<section class="recommendations" id="recommendations-farmacia">
  <h2 id="category-title"></h2>
  <div class="card-container">
    <!-- Tarjetas de Farmacia aquí -->
    <div class="card">
      <img src="{% static 'app/assets/images/farmacia1.png' %}" alt="Farmacia Kielsa">
      <div class="card-content">
        <h3>Farmacia Kielsa</h3>
        <p><strong>4.9 ★</strong> (84)</p>
        <p>Choluteca, Barrio San Pile</p>
        <p class="category">Farmacia Kielsa</p>
      </div>
    </div>
    <div class="card">
      <img src="{% static 'app/assets/images/farmacia4.png' %}" alt="Farmacia Familiar">
      <div class="card-content">
        <h3>Farmacia Familiar</h3>
        <p><strong>4.9 ★</strong> (84)</p>
        <p>Choluteca, Barrio San Pile</p>
        <p class="category">Farmacia Familiar</p>
      </div>
    </div>
    <div class="card">
      <img src="{% static 'app/assets/images/farmacia2.png' %}" alt="Farmacia El Ahorro">
      <div class="card-content">
        <h3>Farmacia El Ahorro</h3>
        <p><strong>4.9 ★</strong> (84)</p>
        <p>Choluteca, Barrio San Pile</p>
        <p class="category">Farmacia El Ahorro</p>
      </div>
    </div>

    <div class="card">
      <img src="{% static 'app/assets/images/farmacia3.png' %}" alt="Farmacia Siman">
      <div class="card-content">
        <h3>Farmacia Siman</h3>
        <p><strong>4.9 ★</strong> (84)</p>
        <p>Choluteca, Barrio San Pile</p>
        <p class="category">Farmacia Siman</p>
      </div>
    </div>

   
  </div>
</section>


  <!-- Sección Supermercado -->
  <section class="recommendations" id="recommendations-supermercado">
    <h2 id="category-title"></h2>
    <div class="card-container">
      <!-- Tarjetas de Supermercado aquí -->
      <div class="card">
        <img src="{% static 'app/assets/images/la colonia.png' %}"
          alt="Supermercado La Colonia">
        <div class="card-content">
          <h3>Supermercado La Colonia</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Supermercado La Colonia</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/monjaras.png' %}"
          alt="Supermercado Mojaras">
        <div class="card-content">
          <h3>Supermercado Mojaras</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Supermercado Mojaras</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/carbajal.png' %}"
          alt="Supermercado Carbajal">
        <div class="card-content">
          <h3>Supermercado Carbajal</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Supermercado Carbajal</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/el descuento.png' %}"
          alt="Supermercado El Descuento">
        <div class="card-content">
          <h3>Supermercado El Descuento</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Supermercado El Descuento</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Sección Transporte -->
  <section class="recommendations" id="recommendations-transporte">
    <h2 id="category-title"></h2>
    <div class="card-container">
      <!-- Tarjetas de Transporte aquí -->
      <div class="card">
        <img src="{% static 'app/assets/images/taxi.png' %}"
          alt="Taxi">
        <div class="card-content">
          <h3>Taxi</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Taxi</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/turismo.png' %}"
          alt="Turismo">
        <div class="card-content">
          <h3>Turismo</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Turismo</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/escolar.png' %}"
          alt="Escolar">
        <div class="card-content">
          <h3>Bus Escolar</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Bus Escolar</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/mudanza.png' %}"
          alt="Mudanza ">
        <div class="card-content">
          <h3>Mudanza Martinez</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Mudanza Martinez</p>
        </div>
      </div>
    </div>
  </section>
  <!-- Sección Educación -->
  <section class="recommendations" id="recommendations-educacion">
    <h2 id="category-title"></h2>
    <div class="card-container">
      <!-- Tarjetas de Educación aquí -->
      <div class="card">
        <img src="{% static 'app/assets/images/primaria.png' %}"
          alt="Instituto Bilingüe Horizontes">
        <div class="card-content">
          <h3>Instituto Bilingüe Horizontes</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Instituto Bilingüe Horizontes</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/primaria2.png' %}"
          alt="Colegio San Miguel Arcángel">
        <div class="card-content">
          <h3>Colegio San Miguel Arcángel</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Colegio San Miguel Arcángel</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/primaria3.png' %}"
          alt="Escuela Monte Verde">
        <div class="card-content">
          <h3>Escuela Monte Verde</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Escuela Monte Verde</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/primaria4.png' %}"
          alt="Centro Educativo Nuevo Amanecer">
        <div class="card-content">
          <h3>Centro Educativo Nuevo Amanecer</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Centro Educativo Nuevo Amanecer</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Sección Tecnología -->
  <section class="recommendations" id="recommendations-tecnologia">
    <h2 id="category-title"></h2>
    <div class="card-container">
      <!-- Tarjetas de Tecnología aquí -->
      <div class="card">
        <img src="{% static 'app/assets/images/desarrollo.png' %}"
          alt="Desarrollo de Software Personalizado">
        <div class="card-content">
          <h3>Desarrollo de Software Personalizado</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Desarrollo de Software Personalizado</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/soporte.png' %}"
          alt="Servicios de Soporte Técnico">
        <div class="card-content">
          <h3>Servicios de Soporte Técnico</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Servicios de Soporte Técnico</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/consultoria.png' %}"
          alt="Consultoría en TI">
        <div class="card-content">
          <h3>Consultoría en TI</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Consultoría en TI</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/seguridad.png' %}"
          alt="Seguridad Informática">
        <div class="card-content">
          <h3>Seguridad Informática</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Seguridad Informática</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Sección Hotel -->
  <section class="recommendations" id="recommendations-hotel">
    <h2 id="category-title"></h2>
    <div class="card-container">
      <!-- Tarjetas de Hotel aquí -->
      <div class="card">
        <img src="{% static 'app/assets/images/hotel1.png' %}"
          alt="Hotel Paraíso del Sol">
        <div class="card-content">
          <h3>Hotel Paraíso del Sol</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Hotel Paraíso del Sol</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/hotel2.png' %}"
          alt="Grand Hotel Vista Mar">
        <div class="card-content">
          <h3>Grand Hotel Vista Mar</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Grand Hotel Vista Mar</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/hotel3.png' %}"
          alt="Hotel Oasis Tropical">
        <div class="card-content">
          <h3>Hotel Oasis Tropical</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Hotel Oasis Tropical</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/hotel4.png' %}"
          alt="Hotel Cumbre Dorada">
        <div class="card-content">
          <h3>Hotel Cumbre Dorada</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Hotel Cumbre Dorada</p>
        </div>
      </div>
    </div>
  </section>
  <!-- Sección Deporte -->
  <section class="recommendations" id="recommendations-deporte">
    <h2 id="category-title"></h2>
    <div class="card-container">
      <!-- Tarjetas de Deporte aquí -->
      <div class="card">
        <img src="{% static 'app/assets/images/canchas.png' %}"
          alt="Alquiler de Canchas Deportivas">
        <div class="card-content">
          <h3>Alquiler de Canchas Deportivas</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Alquiler de Canchas Deportivas</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/nutricion.png' %}"
          alt="Nutrición Deportiva">
        <div class="card-content">
          <h3>Nutrición Deportiva</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Nutrición Deportiva</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/fisioterapia.png' %}"
          alt="Fisioterapia y Rehabilitación Deportiva">
        <div class="card-content">
          <h3>Fisioterapia y Rehabilitación Deportiva</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Fisioterapia y Rehabilitación Deportiva</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/entrenamiento.png' %}"
          alt="Programas de Entrenamiento Deportivo">
        <div class="card-content">
          <h3>Programas de Entrenamiento Deportivo</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Programas de Entrenamiento Deportivo</p>
        </div>
    </div>
    </div>
  </section>
  <!-- Sección Salud -->
  <section class="recommendations" id="recommendations-salud">
    <h2 id="category-title"></h2>
    <div class="card-container">
      <!-- Tarjetas de Salud aquí -->
      <div class="card">
        <img src="{% static 'app/assets/images/consulta.png' %}"
          alt="Consultas Médicas Generales">
        <div class="card-content">
          <h3>Consultas Médicas Generales</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Consultas Médicas Generales</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/dentista.png' %}"
          alt="Desntista">
        <div class="card-content">
          <h3>Desntista</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Desntista</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/laboratorio.png' %}"
          alt=" Laboratorio Clínico">
        <div class="card-content">
          <h3> Laboratorio Clínico</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category"> Laboratorio Clínico</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/fisioterapia.png' %}"
          alt="Fisioterapia y Rehabilitación">
        <div class="card-content">
          <h3>Fisioterapia y Rehabilitación</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Fisioterapia y Rehabilitación</p>
        </div>
      </div>
    </div>
  </section>
  <!-- Sección Belleza -->
  <section class="recommendations" id="recommendations-belleza">
    <h2 id="category-title"></h2>
    <div class="card-container">
      <!-- Tarjetas de Belleza aquí -->
      <div class="card">
        <img src="{% static 'app/assets/images/cejas.png' %}"
          alt="Beauty Glam Studio">
        <div class="card-content">
          <h3>Uñas de Ensueño</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Salon de Uñas</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/salon.png' %}"
          alt="Espejo y Glamour">
        <div class="card-content">
          <h3>Espejo y Glamour</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Espejo y Glamour</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/peluqueria.png' %}"
          alt="Reflejos Divinos">
        <div class="card-content">
          <h3>Reflejos Divinos</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Peluqueria</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/peluqueria2.png' %}"
          alt="Raíces y Flores">
        <div class="card-content">
          <h3>Raíces y Flores</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Peluqueria</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Sección Finanzas -->
  <section class="recommendations" id="recommendations-finanzas">
    <h2 id="category-title"></h2>
    <div class="card-container">
      <!-- Tarjetas de Finanzas aquí -->
      <div class="card">
        <img src="{% static 'app/assets/images/banco1.png' %}"
          alt="Ficohosa">
        <div class="card-content">
          <h3>Ficohosa</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Ficohosa</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/banco2.png' %}"
          alt="Banco Atlantida">
        <div class="card-content">
          <h3>Banco Atlantida</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Banco Atlantida</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/bch.png' %}"
          alt="Banco BCH">
        <div class="card-content">
          <h3>Banco BCH</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Banco BCH</p>
        </div>
      </div>
      <div class="card">
        <img src="{% static 'app/assets/images/banco4.png' %}"
          alt="Banco Banpais">
        <div class="card-content">
          <h3>Banco Banpais</h3>
          <p><strong>4.9 ★</strong> (84)</p>
          <p>Choluteca, Barrio San Pile</p>
          <p class="category">Banco Banpais</p>
        </div>
      </div>
    </div>
  </section>

</main>

{% endblock %}
{% block scripts %}
<script>

  
  
document.addEventListener('DOMContentLoaded', function() {
  const carousel = document.querySelector('.custom-carousel');
  const leftButton = document.querySelector('.custom-carousel-button.custom-left');
  const rightButton = document.querySelector('.custom-carousel-button.custom-right');
  
  const scrollStep = 160; // Ajusta según el tamaño de los elementos visibles

  // Función para verificar y actualizar la visibilidad de los botones
  function updateButtonVisibility() {
    leftButton.style.display = carousel.scrollLeft > 0 ? 'flex' : 'none';
    rightButton.style.display = (carousel.scrollLeft + carousel.clientWidth) < carousel.scrollWidth ? 'flex' : 'none';
  }

  // Inicializa la visibilidad de los botones
  updateButtonVisibility();

  // Manejador de clics para el botón derecho
  rightButton.addEventListener('click', function() {
    let newScroll = carousel.scrollLeft + scrollStep;
    carousel.scrollTo({ left: newScroll, behavior: 'smooth' });
  });

  // Manejador de clics para el botón izquierdo
  leftButton.addEventListener('click', function() {
    let newScroll = carousel.scrollLeft - scrollStep;
    carousel.scrollTo({ left: newScroll, behavior: 'smooth' });
  });

  // Actualizar visibilidad de botones después de cada scroll
  carousel.addEventListener('scroll', updateButtonVisibility);

  // Recalcular límites y visibilidad de botones al redimensionar la ventana
  window.addEventListener('resize', updateButtonVisibility);
});


$(document).ready(function() {
  $('.custom-carousel-item').click(function() {
      // Obtener la categoría y el destino de la sección
      var category = $(this).data('category');
      var targetSection = $(this).data('target');

      // Actualizar el título en la sección correspondiente
      $('#' + targetSection + ' #category-title').text(category);

      // Desplazarse suavemente a la sección correspondiente
      $('html, body').animate({
        scrollTop: $('#' + targetSection).offset().top
      }, 800); // 800ms para desplazamiento suave
    });
  const $carousel = $('.custom-carousel');

  let touchStartX = 0;
  let scrollStart = 0;

  $carousel.on('touchstart', function(e) {
    touchStartX = e.originalEvent.touches[0].clientX; // Registrar la posición inicial del toque
    scrollStart = $carousel.scrollLeft(); // Posición inicial del scroll
  });

  $carousel.on('touchmove', function(e) {
    const touchEndX = e.originalEvent.touches[0].clientX;
    const touchDiff = touchStartX - touchEndX;

    $carousel.scrollLeft(scrollStart + touchDiff); // Ajustar el scroll nativo
  });
});

</script>
{% endblock %}