<section class="orders-section">
  <div class="container order-shell">
    <div class="order-page-header">
      <div>
        <span class="eyebrow">Carrito de compras</span>
        <h2>Completa tu compra con seguridad</h2>
        <p>
          Este espacio funciona como carrito final del cliente. Aquí puedes revisar los productos,
          completar los datos de entrega y elegir el método de pago que prefieras.
        </p>
      </div>
      <div class="order-summary-panel">
        <div>
          <span>Productos</span>
          <strong>03</strong>
        </div>
        <div>
          <span>Total</span>
          <strong>S/ 699</strong>
        </div>
        <div>
          <span>Pago</span>
          <strong>Online</strong>
        </div>
      </div>
    </div>

    <div class="orders-grid">
      <article class="order-card">
        <div class="order-card-top">
          <h3>Alimento premium</h3>
          <span class="status-pill preparing">1 unidad</span>
        </div>
        <p>Fórmula completa para perros con proteínas esenciales.</p>
        <ul class="order-meta">
          <li><strong>Precio:</strong> S/ 129</li>
          <li><strong>Entrega:</strong> 24 horas</li>
        </ul>
      </article>

      <article class="order-card">
        <div class="order-card-top">
          <h3>Juguete interactivo</h3>
          <span class="status-pill shipping">2 unidades</span>
        </div>
        <p>Material resistente ideal para perros activos.</p>
        <ul class="order-meta">
          <li><strong>Precio:</strong> S/ 69</li>
          <li><strong>Entrega:</strong> 48 horas</li>
        </ul>
      </article>

      <article class="order-card">
        <div class="order-card-top">
          <h3>Kit de descanso</h3>
          <span class="status-pill delivered">1 unidad</span>
        </div>
        <p>Cama ortopédica + manta térmica + snack relajante.</p>
        <ul class="order-meta">
          <li><strong>Precio:</strong> S/ 249</li>
          <li><strong>Entrega:</strong> 24 horas</li>
        </ul>
      </article>
    </div>

    <div class="checkout-card">
      <h3>Formulario de compra</h3>
      <form class="checkout-form" method="post" action="index.php?page=pedidos&action=store">
        <input type="hidden" name="total" value="699" />
        <label>
          Nombre completo
          <input type="text" name="nombre" placeholder="Tu nombre" required />
        </label>
        <label>
          Dirección de envío
          <input type="text" name="direccion" placeholder="Calle, número, barrio" required />
        </label>
        <label>
          Método de pago
          <select name="metodo_pago" required>
            <option value="">Selecciona un método</option>
            <option value="tarjeta-credito">Tarjeta de crédito</option>
            <option value="tarjeta-debito">Tarjeta de débito</option>
            <option value="transferencia">Transferencia bancaria</option>
            <option value="mercado-pago">Mercado Pago</option>
            <option value="paypal">PayPal</option>
          </select>
        </label>

        <div class="payment-panels">
          <div class="payment-panel" data-payment="tarjeta-credito">
            <label>
              Número de tarjeta
              <input type="text" name="numero_tarjeta" placeholder="4242 4242 4242 4242" required />
            </label>
          </div>

          <div class="payment-panel" data-payment="tarjeta-debito">
            <label>
              Número de tarjeta
              <input type="text" name="numero_tarjeta_debito" placeholder="4242 4242 4242 4242" required />
            </label>
          </div>

          <div class="payment-panel" data-payment="transferencia">
            <label>
              Banco de destino
              <input type="text" name="banco_destino" placeholder="Banco de la Nación" required />
            </label>
            <label>
              Referencia de transferencia
              <input type="text" name="referencia_transferencia" placeholder="Referencia o comprobante" required />
            </label>
          </div>

          <div class="payment-panel" data-payment="mercado-pago">
            <label>
              Usuario Mercado Pago
              <input type="email" name="email_mercado_pago" placeholder="tuemail@mercadopago.com" required />
            </label>
          </div>

          <div class="payment-panel" data-payment="paypal">
            <label>
              Usuario PayPal
              <input type="email" name="email_paypal" placeholder="tuemail@paypal.com" required />
            </label>
          </div>
        </div>
        <label>
          Comentarios adicionales
          <textarea name="comentarios" rows="4" placeholder="Indica detalles de entrega o entrega urgente"></textarea>
        </label>
        <button type="submit" class="btn btn-primary">Confirmar compra</button>
      </form>
    </div>

    <div class="btn-wrap">
      <a href="index.php?page=productos" class="btn btn-secondary">Seguir comprando</a>
    </div>
  </div>
</section>

<?php if (isset($_GET['auth']) && $_GET['auth'] === 'success'): ?>
<div class="auth-modal" id="authModal" aria-hidden="false">
  <div class="auth-modal-card">
    <span class="eyebrow">Acceso permitido</span>
    <h3><?= htmlspecialchars($_GET['mode'] === 'register' ? 'Registro completado' : 'Inicio de sesión correcto') ?></h3>
    <p>Bienvenido a PetCare. Tu acceso fue autorizado y ahora puedes continuar con tu carrito de compras.</p>
    <button type="button" class="btn btn-primary" id="continueCheckoutBtn">Continuar</button>
  </div>
</div>
<?php endif; ?>
