<?php require_once 'includes/header.php'; ?>

<?php if (isset($_GET['reserva']) && $_GET['reserva'] === 'ok'): ?>
  <div style="background:#4CAF50; color:white; padding:16px; text-align:center; font-size:1rem;">
    ✅ ¡Reserva confirmada! Te esperamos pronto en Canelita.
  </div>
<?php endif; ?>

  <section class="reservas-section" id="reservas" style="padding-top: 120px;">
    <div class="section-header light">
      <span class="section-tag">Haz tu Reserva</span>
      <h2>Reserva tu Mesa</h2>
      <p>Garantiza tu lugar y disfruta de la mejor experiencia</p>
    </div>
    <div class="reservas-container">
      <form class="reserva-form" id="reservaForm" novalidate action="procesar_reserva.php" method="POST">
        <div class="form-row">
          <div class="form-group">
            <label for="res-nombre">Nombre completo *</label>
            <input type="text" id="res-nombre" name="res-nombre" placeholder="Ej. Juan Pérez" />
            <span class="error-msg" id="err-nombre"></span>
          </div>
          <div class="form-group">
            <label for="res-telefono">Teléfono *</label>
            <input type="tel" id="res-telefono" name="res-telefono" placeholder="Ej. 987654321" />
            <span class="error-msg" id="err-telefono"></span>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="res-fecha">Fecha *</label>
            <input type="date" id="res-fecha" name="res-fecha" />
            <span class="error-msg" id="err-fecha"></span>
          </div>
          <div class="form-group">
            <label for="res-hora">Hora *</label>
            <select id="res-hora" name="res-hora">
              <option value="">Seleccionar hora</option>
              <option>12:00 PM</option><option>12:30 PM</option>
              <option>1:00 PM</option><option>1:30 PM</option>
              <option>7:00 PM</option><option>7:30 PM</option>
              <option>8:00 PM</option><option>8:30 PM</option><option>9:00 PM</option>
            </select>
            <span class="error-msg" id="err-hora"></span>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="res-personas">N° de personas *</label>
            <input type="number" id="res-personas" name="res-personas" min="1" max="20" placeholder="Ej. 4" />
            <span class="error-msg" id="err-personas"></span>
          </div>
          <div class="form-group">
            <label for="res-email">Correo electrónico *</label>
            <input type="email" id="res-email" name="res-email" placeholder="Ej. juan@email.com" />
            <span class="error-msg" id="err-email"></span>
          </div>
        </div>
        <div class="form-group full">
          <label for="res-nota">Nota especial (opcional)</label>
          <textarea id="res-nota" name="res-nota" rows="3" placeholder="Alergias, ocasiones especiales, preferencias..."></textarea>
        </div>
        <button type="submit" class="btn btn-primary full-width">
          <i class="fas fa-calendar-check"></i> Confirmar Reserva
        </button>
      </form>

      <div class="reserva-info">
        <h3>Información</h3>
        <ul>
          <li><i class="fas fa-clock"></i> Lun–Dom: 12:00 PM – 10:00 PM</li>
          <li><i class="fas fa-phone"></i> +51 941 325 268</li>
          <li><i class="fas fa-map-marker-alt"></i> Av. Canelita 206, Chota</li>
          <li><i class="fas fa-info-circle"></i> Reservas con 24h de anticipación</li>
        </ul>
      </div>
    </div>
  </section>

<?php require_once 'includes/footer.php'; ?>