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

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

{% block body %}

<style>
 
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.logo {
  font-size: 1.8rem;
  font-weight: bold;
}

.logo span {
  color: #8e8e8e;
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.business-btn {
  background: none;
  border: 1px solid #ddd;
  padding: 0.5rem 1rem;
  border-radius: 25px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.business-btn:hover {
  background: #f5f5f5;
}

.user-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.user-initial {
  background: #8e8e8e;
  color: white;
  font-weight: bold;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 1rem;
}

.hero {
  text-align: center;
  padding: 2rem;
}

.header h1 {
  font-size: 2.8rem;
  font-weight: bold;
  margin-bottom: 2rem;
}

.search-bar {
  display: flex;
  justify-content: center;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  background: white;
  padding: 1rem;
  border-radius: 50px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.search-item {
  display: flex;
  align-items: center;
  background: #f8f8f8;
  padding: 0.3rem 1rem; /* Ajusta el espacio interno */
  border-radius: 20px;
}


.search-item i {
  font-size: 0.8rem; /* Tamaño proporcional al input */
  color: #888; /* Color tenue para menor énfasis */
}


.search-item input {
  border: none;
  outline: none;
  background: none;
  font-size: 0.9rem; /* Tamaño ajustado para mejor legibilidad */
  padding: 0.4rem 0; /* Reducción del padding vertical */
  width: 100%; /* Mantener el ancho completo */
}

.search-button {
  padding: 0.5rem 1rem; /* Tamaño cómodo y ajustado */
  font-size: 0.9rem;
}


.search-button:hover {
  background: #444;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
  .search-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 1rem;
  }

  .search-item {
    max-width: none;
    width: 100%;
  }

  .search-button {
    width: 100%;
    padding: 0.4rem;
  }
}



h2 {
  font-size: 1.8rem;
  margin: 20px;
  color: #333;
}

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}

.card:hover {
  transform: scale(1.05);
}

.card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.card-content {
  padding: 15px;
}

.card-content h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  color: #222;
}

.card-content p {
  margin: 5px 0;
  color: #666;
}

.carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.carousel-item {
  flex: 0 0 auto;
  width: 150px;
  text-align: center;
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.carousel-item i {
  font-size: 2.5rem !important;
  color: #555;
  margin-bottom: 10px;
}



.carousel-item p {
  margin: 0;
  font-size: 1rem;
  color: #333;
}

.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: white;
  border-radius: 50%;
  padding: 5px;
  cursor: pointer;
  border: 1px solid #ddd;
}

.carousel-button.left {
  left: 10px;
}

.carousel-button.right {
  right: 10px;
}




.card-content .category {
  font-size: 0.9rem;
  color: #007bff;
  font-weight: bold;
}

.category-bar {
  white-space: nowrap;
  overflow-x: auto; /* Permite el scroll horizontal */
  display: flex; /* Asegúrate de usar flexbox para alinear horizontalmente */
  padding: 10px 0;
  border-top: 1px solid #e0e0e0;
  scroll-behavior: smooth; /* Para scroll suave */
}


.category-item {
  display: flex; /* flex en lugar de inline-flex */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  cursor: pointer;
}


.category-item p {
  margin-top: 5px;
  color: #333;
}

footer {
  background-color: #f8f9fa;
}

footer a {
  font-size: 0.9rem;
}

footer i {
  font-size: 1.2rem;
}


</style>



<div class="container" style="max-width: 900px; margin: auto;">
  <div class="search-bar d-flex flex-nowrap justify-content-between align-items-center">
    <div class="search-item d-flex align-items-center flex-fill">
      <i class="fas fa-th-large me-2 text-muted"></i>
      <input type="text" class="form-control form-control-sm border-0 bg-transparent" placeholder="Servicios">
    </div>
    <div class="vr mx-2"></div>
    <div class="search-item d-flex align-items-center flex-fill me-2">
      <i class="fas fa-map-marker-alt me-2 text-muted"></i>
      <input type="text" class="form-control form-control-sm border-0 bg-transparent" placeholder="Ubicación">
    </div>
    <div class="vr mx-2"></div>
    <button class="search-button btn btn-dark btn-sm rounded-pill ms-2 px-4">Buscar</button>
  </div>
</div>



<div class="">
  <button class="carousel-button left">&lt;</button>
  <div class="">
    <div class="carousel-item">
      <i class="fas fa-cut"></i>
      <p>Salón de Belleza</p>
    </div>
      <div class="carousel-item">
          <i class="fas fa-spa"></i>
          <p>Spa</p>
      </div>
      <div class="carousel-item">
          <i class="fas fa-eye"></i>
          <p>Cejas</p>
      </div>
      <div class="carousel-item">
          <i class="fas fa-paint-brush"></i>
          <p>Manicura</p>
      </div>
      <div class="carousel-item">
          <i class="fas fa-shopping-bag"></i>
          <p>Compras</p>
      </div>
  </div>
  <button class="carousel-button right">&gt;</button>
</div>






<section class="recommendations">
  <h2>Recomendado</h2>
  <div class="card-container">

    <div class="card">
      <img src="{% static 'app/assets/images/salon.png' %}"
        alt="Kuo Qi Nails">
      <div class="card-content">
        <h3>Uñas de Ensueño</h3>
        <p><strong>5.0 ★</strong> (93)</p>
        <p>Choluteca, San Luis</p>
        <p class="category">Salón de uñas</p>
      </div>
    </div>

    <div class="card">
      <img src="{% static 'app/assets/images/tatoo.png' %}"
        alt="The Tattooed Lady">
      <div class="card-content">
        <h3>Tinta Eterna</h3>
        <p><strong>5.0 ★</strong> (1,701)</p>
        <p>Choluteca, barrio cabañas</p>
        <p class="category">Estudio de tatuajes</p>
      </div>
    </div>
    <div class="card">
      <img src="{% static 'app/assets/images/unas.png' %}"
        alt="Creation beauty & Nail lounge">
      <div class="card-content">
        <h3>Espejo y Glamour</h3>
        <p><strong>5.0 ★</strong> (100)</p>
        <p>Choluteca, barrio el porvenir</p>
        <p class="category">Salón de belleza</p>
      </div>
    </div>
    <div class="card">
      <img src="{% static 'app/assets/images/peluqueria.png' %}"
        alt="Blown El Paseo">
      <div class="card-content">
        <h3>Reflejos Divinos</h3>
        <p><strong>5.0 ★</strong> (598)</p>
        <p>Residencial Montelimar</p>
        <p class="category">Peluquería</p>
      </div>
    </div>
  </div>
</section>

<section class="recommendations">
  <h2>Nuevo en Nexus</h2>
  <div class="card-container">
    <div class="card">
      <img src="{% static 'app/assets/images/cejas.png' %}"
        alt="May Chacón Studio">
      <div class="card-content">
        <h3>Mirada Perfecta</h3>
        <p><strong>4.9 ★</strong> (84)</p>
        <p>Choluteca, Barrio San Pile</p>
        <p class="category">Cejas y pestañas</p>
      </div>
    </div>
    <div class="card">
      <img src="{% static 'app/assets/images/peluqueria2.png' %}"
        alt="Match-a Beauty">
      <div class="card-content">
        <h3>Raíces y Flores</h3>
        <p><strong>4.9 ★</strong> (124)</p>
        <p>San Lorenzo, Valle</p>
        <p class="category">Peluquería</p>
      </div>
    </div>
    <div class="card">
      <img src="{% static 'app/assets/images/belleza.png' %}"
        alt="Bevel Beauty Studio">
      <div class="card-content">
        <h3>Studio Elegancia</h3>
        <p><strong>5.0 ★</strong> (56)</p>
        <p>Choluteca, Miramontes</p>
        <p class="category">Salón de belleza</p>
      </div>
    </div>
    <div class="card">
      <img src="{% static 'app/assets/images/sal.png' %}"
        alt="Beautilicious">
      <div class="card-content">
        <h3>Brillo Infinito</h3>
        <p><strong>5.0 ★</strong> (289)</p>
        <p>Choluteca, San Juan Bosco</p>
        <p class="category">Salón de belleza</p>
      </div>
    </div>
  </div>
</section>

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





</script>
{% endblock %}