<link rel="stylesheet" href="componentes/menuPrincipalHeader/style_menuPrincipalHeader.css">

<!-- 🔹 Menú principal -->
  <nav class="navbar navbar-expand-lg navbar-light bg-body-secondary -bg-body-secondary border-top border-bottom fixed-top">
    <div class="container-fluid justify-content-center">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainMenu">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-center" id="mainMenu">
        <ul class="navbar-nav">
          <li class="ocultar nav-item"><a class="nav-link" href="#">Opción 1</a></li>
          <li class="ocultar nav-item"><a class="nav-link" href="#">Opción 2</a></li>
          <li class="ocultar nav-item"><a class="nav-link" href="#">Opción 3</a></li>
          <li class="ocultar nav-item"><a class="nav-link" href="#">Opción 4</a></li>
          <li class="ocultar nav-item"><a class="nav-link" href="#">Opción 5</a></li>
          <li class="ocultar nav-item"><a class="nav-link" href="#">Opción 6</a></li>     
          <button class="btn btn-close d-lg-none position-absolute top-0 end-0 m-3" type="button" data-bs-toggle="collapse" data-bs-target="#mainMenu" aria-expanded="true" aria-label="Cerrar menú">
          </button>
        </ul>

          <button type="btn" class="btn subscribe" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="mdo"><?php t("Subscribe"); ?></button>
     </div>
    </div>
  </nav>

  <?php /*
<!-- <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content border-0 shadow-lg">
      <div class="modal-header bg-secondary text-white">
        <h5 class="modal-title" id="exampleModalLabel">Reciba información personalizada</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
      </div>

      <div class="modal-body">
        <form  method="POST" action="procesar.php">
          <div class="row g-3">
            <div class="col-md-6">
              <label for="nombre" class="form-label">Nombre:</label>
              <input type="text" class="form-control" name="nombre" id="nombre" placeholder="Escriba su nombre">
            </div>

            <div class="col-md-6">
              <label for="correo" class="form-label">Correo electrónico:</label>
              <input type="email" class="form-control" name="correo" id="correo" required>
            </div>

            <div class="col-12">
              <label for="mensaje" class="form-label">Mensaje (opcional):</label>
              <textarea class="form-control" id="mensaje" name="mensaje" rows="4" placeholder="Escriba su mensaje o comentario..."></textarea>
            </div>
          </div>
        </form>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button type="submit" class="btn btn-primary">Enviar</button>
      </div>
    </div>
  </div>
</div> -->
*/ ?>


<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content border-0 shadow-lg">
      <div class="modal-header bg-secondary text-white">
        <h5 class="modal-title" id="exampleModalLabel" style="text-transform: Capitalize" ><?php t("receive personalized attention"); ?></h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="<?php t("close"); ?>"></button>
      </div>

      <form method="POST" action="procesar.php"> <!-- FORMULARIO COMIENZA AQUÍ -->
        <div class="modal-body">
          <div class="row g-3">

            <div class="col-md-6">
              <label for="nombre" class="form-label"><?php t("name"); ?></label>
              <input type="text" class="form-control" name="nombre" id="nombre" placeholder="<?php t("write your name"); ?>" required>
            </div>

            <div class="col-md-6">
              <label for="correo" class="form-label"><?php t("email"); ?>:</label>
              <input type="email" class="form-control" name="correo" id="correo" placeholder="<?php t("name@example.com"); ?>" required>
            </div>

            <div class="col-12">
              <label for="mensaje" class="form-label"><?php t("message (optional)"); ?>:</label>
              <textarea class="form-control" name="mensaje" id="mensaje" rows="4" 
						placeholder="<?php t("write your message or commentary"); ?>..." 
			  ></textarea>
            </div>

          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><?php t("close"); ?></button>
          <button type="submit" class="btn btn-primary"><?php t("send"); ?></button>
        </div>
      </form> 

    </div>
  </div>
</div>
