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

<!-- 🔹 Menú principal -->
  <nav class="navbarMenuPrincipal navbar navbar-expand-lg navbar-light- bg-body-secondary- -bg-body-secondary border-top border-bottom fixed-top">
    

      <?php require('componentes/idiomas/componente_idiomas.php');?>

      <div id="contMenuPrincipal" class="container-fluid justify-content-end col-7 col-sm-7 col-md-7 col-lg-9 col-xl-9 col-xxl-8">
        
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainMenuBlog">
            <span class="navbar-toggler-icon"></span>
          </button>
          

          <div class="collapse navbar-collapse justify-content-start" id="mainMenuBlog" >
             
            <ul class="items navbar-nav">
              <li class="nav-item"><a class="nav-link" href="#">Opción 1</a></li>
              <li class="nav-item"><a class="nav-link" href="#">Opción 2</a></li>
              <li class="nav-item"><a class="nav-link" href="#">Opción 3</a></li>
              <li class="nav-item"><a class="nav-link" href="#">Opción 4</a></li>
              <li class="nav-item"><a class="nav-link" href="#">Opción 5</a></li>
              <li class="nav-item"><a class="nav-link" href="#">Opción 6</a></li>     
              <button class="btn btn-close d-lg-none position-absolute bottom-0 end-0 m-3" type="button" data-bs-toggle="collapse" data-bs-target="#mainMenuBlog" aria-expanded="true" aria-label="Cerrar menú" style="border: 2px solid red;">
              </button>
            </ul>
            
            <?php require('componentes/btnSuscribirse/componente_btnSuscribirse.php');?>
            
          </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="formSuscribirse 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="../correo_enviar/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>
