Tingkatkan Konversi Penjualan Anda dengan Tombol WhatsApp Interaktif!

<section class="py-8 md:py-12 bg-neutral-50">
  <!-- WhatsApp Floating Button - Always on Top -->
  <div id="wa-floating-button" class="fixed bottom-6 right-6 z-[9999]">
    <div class="relative group">
      <!-- Chat Bubble (Container for two views) -->
      <div id="wa-chat-bubble" class="absolute bottom-16 right-0 w-80 bg-white rounded-2xl shadow-2xl border border-gray-200 transform scale-0 opacity-0 invisible" style="transition: transform 0.2s ease-out, opacity 0.2s ease-out;">
        <!-- View 1: Contact Form (Initially visible if no data) -->
        <div id="wa-form-view">
          <div class="bg-gradient-to-r from-green-500 to-green-600 p-4 rounded-t-2xl">
            <div class="flex items-center space-x-3">
              <img src="https://fotomu.jpg" class="w-12 h-12 rounded-full border-2 border-white object-cover custom-cursor">
              <div class="text-white">
                <h4 class="font-semibold custom-cursor">Selamat Datang!</h4>
                <p class="text-sm opacity-90 custom-cursor">Silakan isi data Anda</p>
              </div>
            </div>
          </div>
          <form id="wa-contact-form" class="p-4 custom-cursor" onsubmit="handleFormSubmit(event)">
            <div class="space-y-3">
              <div>
                <label for="wa-name" class="text-sm font-medium text-gray-600">Nama</label>
                <input type="text" id="wa-name" name="name" placeholder="Nama Lengkap Anda" class="mt-1 w-full p-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500 text-sm" required="">
              </div>
              <div>
                <label for="wa-number" class="text-sm font-medium text-gray-600">Nomor WhatsApp</label>
                <input type="tel" id="wa-number" name="phone" placeholder="Contoh: 628123456789" class="mt-1 w-full p-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500 text-sm" required="">
              </div>
            </div>
            <div id="wa-form-error" class="text-red-600 text-xs mt-2 text-center hidden">Mohon isi semua kolom.</div>
            <button id="wa-submit-button" type="submit" class="mt-4 w-full bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-lg flex items-center justify-center transition-colors custom-cursor">
              <span id="wa-submit-text" class="custom-cursor">Mulai Chat</span>
              <svg id="wa-spinner" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white hidden custom-cursor" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
              </svg>
            </button>
          </form>
        </div>
        <!-- View 2: Chat Options (Initially hidden) -->
        <div id="wa-chat-view" class="hidden">
          <div class="bg-gradient-to-r from-green-500 to-green-600 p-4 rounded-t-2xl">
            <div class="flex items-center space-x-3">
              <img src="https://fotomu.jpg" class="w-12 h-12 rounded-full border-2 border-white object-cover custom-cursor">
              <div class="text-white">
                <h4 class="font-semibold custom-cursor">Nama Kamu</h4>
                <p class="text-sm opacity-90 custom-cursor">Online sekarang</p>
              </div>
            </div>
          </div>
          <div class="p-4">
            <div class="bg-gray-100 rounded-lg p-3 mb-4">
              <p id="wa-welcome-message" class="text-gray-800 text-sm custom-cursor">Halo! Ada yang bisa kami bantu? 👋</p>
            </div>
            <div class="space-y-2">
              <a href="javascript:void(0)" onclick="sendWhatsAppMessage('Saya mau order!')" class="flex items-center w-full text-left p-3 hover:bg-gray-50 rounded-lg transition-colors text-sm text-gray-700 custom-cursor">
                <span class="mr-3 text-lg custom-cursor">🛒</span> Saya mau order!
              </a>
              <a href="javascript:void(0)" onclick="sendWhatsAppMessage('Saya mau tanya produk')" class="flex items-center w-full text-left p-3 hover:bg-gray-50 rounded-lg transition-colors text-sm text-gray-700 custom-cursor">
                <span class="mr-3 text-lg custom-cursor">❓</span> Tanya produk
              </a>
              <a href="javascript:void(0)" onclick="sendWhatsAppMessage('Saya mau tanya harga')" class="flex items-center w-full text-left p-3 hover:bg-gray-50 rounded-lg transition-colors text-sm text-gray-700 custom-cursor">
                <span class="mr-3 text-lg custom-cursor">💰</span> Tanya harga
              </a>
            </div>
          </div>
        </div>
        <!-- Universal Close Button -->
        <button onclick="toggleChatBubble(event)" class="absolute top-2 right-2 w-7 h-7 bg-black bg-opacity-10 hover:bg-opacity-20 rounded-full flex items-center justify-center transition-colors z-10 custom-cursor">
          <svg class="w-4 h-4 text-white custom-cursor" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <!-- Main WhatsApp Button -->
      <button id="wa-main-button" onclick="toggleChatBubble(event)" class="w-16 h-16 bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white rounded-full shadow-2xl hover:shadow-3xl transform hover:scale-110 transition-all duration-300 flex items-center justify-center custom-cursor">
        <svg class="w-8 h-8 custom-cursor" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"></path></svg>
      </button>
    </div>
  </div>
  <!-- JavaScript for WhatsApp Button Logic -->
  <script>
    // --- UI ELEMENT REFERENCES ---
    const chatBubble = document.getElementById('wa-chat-bubble');
    const notificationBadge = document.getElementById('wa-notification');
    const formView = document.getElementById('wa-form-view');
    const chatView = document.getElementById('wa-chat-view');
    const contactForm = document.getElementById('wa-contact-form');
    const nameInput = document.getElementById('wa-name');
    const numberInput = document.getElementById('wa-number');
    const submitButton = document.getElementById('wa-submit-button');
    const submitText = document.getElementById('wa-submit-text');
    const spinner = document.getElementById('wa-spinner');
    const formError = document.getElementById('wa-form-error');
    const welcomeMessage = document.getElementById('wa-welcome-message');

    // --- CORE FUNCTIONS ---
    function toggleChatBubble(event) {
      if (event) event.stopPropagation();
      const isVisible = chatBubble.classList.contains('visible');
      if (isVisible) {
        closeBubble();
      } else {
        openBubble();
      }
    }

    function openBubble() {
      chatBubble.style.transition = 'none';
      chatBubble.classList.remove('scale-0', 'opacity-0', 'invisible');
      chatBubble.classList.add('scale-100', 'opacity-100', 'visible');
      checkUserSession();
      setTimeout(() => {
        chatBubble.style.transition = 'transform 0.2s ease-out, opacity 0.2s ease-out';
      }, 10);
    }

    function closeBubble() {
      chatBubble.classList.remove('scale-100', 'opacity-100', 'visible');
      chatBubble.classList.add('scale-0', 'opacity-0');
      setTimeout(() => {
        chatBubble.classList.add('invisible');
      }, 200);
    }

    function checkUserSession() {
      const userData = localStorage.getItem('ourUser');
      if (userData) {
        const user = JSON.parse(userData);
        showChatView(user.name);
      } else {
        showFormView();
      }
    }

    function showFormView() {
      formView.classList.remove('hidden');
      chatView.classList.add('hidden');
    }

    function showChatView(name) {
      welcomeMessage.textContent = `Halo ${name}! Ada yang bisa kami bantu? 👋`;
      formView.classList.add('hidden');
      chatView.classList.remove('hidden');
    }

    async function handleFormSubmit(event) {
      event.preventDefault();
      const name = nameInput.value.trim();
      const phone = numberInput.value.trim();

      if (!name || !phone) {
        formError.classList.remove('hidden');
        return;
      }
      formError.classList.add('hidden');
      setLoading(true);
      const webhookUrl = 'https://idris.dripsender.id:15153/api/integration/6b877465-ab55-4219-b15f-7cc40718175d';
      try {
        const response = await fetch(webhookUrl, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ name, phone }),
        });
        if (!response.ok) {
          alert('Maaf, terjadi kesalahan. Silakan coba lagi.');
        } else {
          const user = { name, phone };
          localStorage.setItem('ourUser', JSON.stringify(user));
          showChatView(name);
        }
      } catch (error) {
        alert('Maaf, terjadi gangguan koneksi. Silakan periksa jaringan Anda dan coba lagi.');
      } finally {
        setLoading(false);
      }
    }

    function setLoading(isLoading) {
      if (isLoading) {
        submitText.classList.add('hidden');
        spinner.classList.remove('hidden');
        submitButton.disabled = true;
      } else {
        submitText.classList.remove('hidden');
        spinner.classList.add('hidden');
        submitButton.disabled = false;
      }
    }

    function sendWhatsAppMessage(templateMessage) {
      const phoneNumber = '6285156326893';
      const userData = localStorage.getItem('ourUser');
      let finalMessage = templateMessage;
      if (userData) {
        const user = JSON.parse(userData);
        finalMessage = `Halo kak, saya ${user.name}. ${templateMessage}`;
      }
      const whatsappUrl = `https://wa.me/${phoneNumber}?text=${encodeURIComponent(finalMessage)}`;
      window.open(whatsappUrl, '_blank');
      closeBubble();
    }

    document.addEventListener('click', function(event) {
      const waButtonContainer = document.getElementById('wa-floating-button');
      if (chatBubble.classList.contains('visible') && !waButtonContainer.contains(event.target)) {
        closeBubble();
      }
    });
  </script>
  <!-- CSS for animations and styling -->
  <style>
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-8px); }
    }
    #wa-main-button {
      animation: float 3s ease-in-out infinite;
    }
    #wa-main-button:hover {
      animation: none;
    }
    @media (max-width: 640px) {
      #wa-chat-bubble {
        width: calc(100vw - 48px);
        max-width: 320px;
        right: 0;
      }
      #wa-floating-button {
        bottom: 1rem;
        right: 1rem;
      }
    }
  </style>
</section>