<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Confirmação de Pagamento - Locação de Caçamba</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-50 text-slate-900">

<div class="w-full max-w-4xl mx-auto py-8 px-4 sm:px-6">

  <!-- TÍTULO -->
  <div class="mb-6 text-center">
    <h1 class="text-2xl sm:text-3xl font-bold">Finalize seu pedido</h1>
    <p class="text-gray-500 mt-2 text-sm sm:text-base">Envie o comprovante para que possamos confirmar</p>
  </div>

  <!-- ETAPA -->
  <div class="flex justify-center mb-6">
    <div class="bg-slate-900 text-white px-4 py-1.5 rounded-full text-xs sm:text-sm font-medium">
      Etapa 3 de 3
    </div>
  </div>

  <!-- STEPS -->
  <div class="flex items-center justify-between w-full max-w-3xl mx-auto mb-8">

    <!-- STEP 1 -->
    <div class="flex items-center flex-1">
      <div class="flex flex-col items-center flex-1">
        <div class="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-green-500 text-white flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 sm:w-8 sm:h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M20 6 9 17l-5-5"/>
          </svg>
        </div>
        <span class="text-[10px] sm:text-xs mt-2 font-medium text-center">
          Escolha a caçamba
        </span>
      </div>
      <div class="h-[2px] sm:h-[3px] flex-1 mx-2 sm:mx-4 bg-green-500"></div>
    </div>

    <!-- STEP 2 -->
    <div class="flex items-center flex-1">
      <div class="flex flex-col items-center flex-1">
        <div class="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-green-500 text-white flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 sm:w-8 sm:h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round"
              d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/>
            <circle cx="12" cy="10" r="3"/>
          </svg>
        </div>
        <span class="text-[10px] sm:text-xs mt-2 font-medium text-center">
          Dados de entrega
        </span>
      </div>
      <div class="h-[2px] sm:h-[3px] flex-1 mx-2 sm:mx-4 bg-green-500"></div>
    </div>

    <!-- STEP 3 -->
    <div class="flex items-center flex-1">
      <div class="flex flex-col items-center flex-1">
        <div class="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-orange-500 text-white flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 sm:w-8 sm:h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <rect width="20" height="14" x="2" y="5" rx="2"/>
            <line x1="2" x2="22" y1="10" y2="10"/>
          </svg>
        </div>
        <span class="text-[10px] sm:text-xs mt-2 font-medium text-center">
          Enviar comprovante
        </span>
      </div>
    </div>

  </div>

  <!-- MENSAGEM -->
  <div class="bg-white rounded-xl border shadow-sm p-6 mb-6 text-center space-y-4">
    <h2 class="text-xl font-bold text-orange-500">Quase lá!</h2>
    <p class="text-gray-500">
      Para confirmar sua locação, envie o comprovante do pagamento via WhatsApp. Assim podemos agilizar a entrega da sua caçamba.
    </p>
    <p class="text-sm text-gray-400">Você também pode adicionar uma observação se quiser.</p>

    <!-- OBSERVAÇÃO -->
    <textarea id="obs" class="w-full border rounded-md p-2 text-sm focus:ring-2 focus:ring-orange-400" placeholder="Observação (opcional)"></textarea>
  </div>

  <!-- BOTÃO WHATSAPP -->
  <div class="text-center">
    <button id="sendWhats" class="w-full sm:w-auto bg-green-500 hover:bg-green-600 text-white font-bold px-6 py-3 rounded-lg transition-colors">
      Enviar comprovante pelo WhatsApp
    </button>
  </div>

</div>

<script>
  // Recupera os dados do localStorage
  const btn = document.getElementById('sendWhats');
  const obs = document.getElementById('obs');

  btn.addEventListener('click', () => {
    const data = JSON.parse(localStorage.getItem('cacambaCheckout'));
    if(!data) {
      alert('Nenhum pedido encontrado. Volte e selecione sua caçamba.');
      return;
    }

    // Mensagem para WhatsApp
    const message = `
Olá, fiz o pagamento da locação de uma caçamba.

Detalhes do pedido:
- Quantidade: ${data.quantidade}
- Valor unitário: R$ ${data.valor_unitario},00
- Total: R$ ${data.total},00

Observação: ${obs.value || 'Nenhuma'}

Por favor, confirmar o recebimento.
    `;

    // Número de destino do WhatsApp (exemplo: 5511999999999)
    const whatsappNumber = '5511984910998';
    const url = `https://wa.me/${whatsappNumber}?text=${encodeURIComponent(message)}`;

    window.open(url, '_blank');
  });
</script>

</body>
</html>
