{# Talk to Agent Modal – supports email *and* SMS #}
<div
  id="talk-to-agent-modal"
  x-data="{
    showModal    : false,
    actionUrl    : '',
    agentName    : '',
    agentEmail   : '',
    agentPhone   : '',
    agentChatUrl : '',
    hideTimer    : null,
    get channel () {                      // <-- computed: 'sms' or 'email'
      return this.agentPhone ? 'sms' : 'email';
    },
    reset() {
      if (this.hideTimer) {
        clearTimeout(this.hideTimer);
        this.hideTimer = null;
      }
      this.showModal  = false;
      this.hideTimer = window.setTimeout(() => {
        this.actionUrl  = '';
        this.agentName  = '';
        this.agentEmail = '';
        this.agentPhone = '';
        this.agentChatUrl = '';
        this.hideTimer = null;
      }, 220);
    }
  }"
  x-on:open-modal.window="
      if ($event.detail.id === 'talk-to-agent-modal') {
        if (hideTimer) {
          clearTimeout(hideTimer);
          hideTimer = null;
        }
        showModal      = true;
        actionUrl      = $event.detail.url ?? '';
        agentName      = $event.detail.agentName      ?? '';
        agentEmail     = $event.detail.agentEmail     ?? '';
        agentPhone     = $event.detail.agentPhoneNumber ?? '';  // ⭐
        agentChatUrl   = $event.detail.agentChatUrl ?? '';
      }"
  x-on:close-modal.window="if ($event.detail.id === 'talk-to-agent-modal') reset()"
  x-on:keydown.escape.window="reset()"
  x-cloak
  x-show="showModal"
  class="fixed inset-0 z-50 overflow-y-auto"
  aria-modal="true"
  role="dialog"
  aria-labelledby="modal-title"
>


  <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">

    <!-- Backdrop -->
    <div x-show="showModal"
         x-transition:enter="ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 bg-gray-500/75 backdrop-blur-sm"
         aria-hidden="true"
         @click="reset()">
    </div>

    <span class="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">&#8203;</span>

    <!-- Modal panel -->
    <div x-show="showModal"
         x-transition:enter="ease-out duration-300"
         x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
         x-transition:leave="ease-in duration-200"
         x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
         x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         @click.stop
         class="inline-block w-full max-w-lg transform overflow-hidden rounded-lg bg-white text-left align-middle shadow-xl transition-all"
    >
      <!-- Header -->
      <div class="flex items-center justify-between border-b border-gray-200 px-6 py-4">
        <h3 id="modal-title" class="text-lg font-medium text-gray-900">
          Talk to Your Agent
        </h3>
        <button @click="reset()"
                class="text-gray-400 transition hover:text-gray-500">
          <i aria-hidden="true" data-lucide="x" class="h-6 w-6"></i>
        </button>
      </div>

      <!-- Body -->
      <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
        <div class="sm:flex sm:items-start">
          <!-- icon bubble -->
          <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center
                      justify-center rounded-full bg-indigo-100 sm:mx-0 sm:h-10 sm:w-10">
            <!-- Mail icon -->
            <span x-show="channel==='email'" aria-hidden="true">
              <i data-lucide="mail" class="h-6 w-6 text-indigo-600"></i>
            </span>
            <!-- Phone icon -->
            <span x-show="channel==='sms'" aria-hidden="true">
              <i data-lucide="phone" class="h-6 w-6 text-indigo-600"></i>
            </span>
          </div>

          <!-- text -->
          <div class="mt-3 flex-1 text-center sm:mt-0 sm:ml-4 sm:text-left">
            <template x-if="channel==='email'">
              <div>
                <p class="mb-4 text-sm text-gray-600">
                  Your agent <strong x-text="agentName"></strong> is ready to assist you via email.
                  Simply send an email to communicate directly.
                </p>

                <!-- Email card -->
                <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
                  <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                      <div class="flex-shrink-0 text-gray-400">
                        <i aria-hidden="true" data-lucide="mail" class="h-5 w-5"></i>
                      </div>
                      <div>
                        <p class="text-xs font-medium uppercase tracking-wide text-gray-500">
                          Agent Email
                        </p>
                        <a :href="'mailto:'+agentEmail"
                           class="text-sm font-medium text-indigo-600 transition hover:text-indigo-800"
                           x-text="agentEmail"></a>
                      </div>
                    </div>
                    <button @click="navigator.clipboard.writeText(agentEmail); $dispatch('copied-to-clipboard')"
                            class="rounded-md p-2 text-gray-400 transition hover:bg-gray-100 hover:text-gray-600"
                            title="Copy email address">
                      <i aria-hidden="true" data-lucide="copy" class="h-4 w-4"></i>
                    </button>
                  </div>
                </div>

                <p class="mt-4 text-xs text-gray-500">
                  💡 <strong>Tip:</strong> Your agent responds from that address. Each agent has its own unique email.
                </p>
              </div>
            </template>

            <template x-if="channel==='sms'">
              <div>
                <p class="mb-4 text-sm text-gray-600">
                  Your agent <strong x-text="agentName"></strong> is ready to chat over SMS.
                  Send a text message to the number below to start the conversation.
                </p>

                <!-- Phone card -->
                <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
                  <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                      <div class="flex-shrink-0 text-gray-400">
                        <i aria-hidden="true" data-lucide="phone" class="h-5 w-5"></i>
                      </div>
                      <div>
                        <p class="text-xs font-medium uppercase tracking-wide text-gray-500">
                          Agent Number
                        </p>
                        <a :href="'sms:'+agentPhone"
                           class="text-sm font-medium text-indigo-600 transition hover:text-indigo-800 phone-number-to-format"
                           x-text="agentPhone"></a>
                      </div>
                    </div>
                    <button @click="navigator.clipboard.writeText(agentPhone); $dispatch('copied-to-clipboard')"
                            class="rounded-md p-2 text-gray-400 transition hover:bg-gray-100 hover:text-gray-600"
                            title="Copy phone number">
                      <i aria-hidden="true" data-lucide="copy" class="h-4 w-4"></i>
                    </button>
                  </div>
                </div>

                <p class="mt-4 text-xs text-gray-500">
                  💡 <strong>Tip:</strong> Text like you would with a friend—your agent understands natural language.
                </p>
              </div>
            </template>
          </div>
        </div>
      </div>

      <!-- Footer -->
      <div class="bg-gray-50 px-4 py-3 space-y-3 sm:space-y-0 sm:flex sm:flex-row-reverse sm:px-6">
        <a x-show="agentChatUrl"
           :href="agentChatUrl"
           class="inline-flex w-full items-center justify-center gap-2 rounded-md border border-transparent
                  bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm
                  transition hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500
                  sm:ml-3 sm:w-auto sm:text-sm">
          <i aria-hidden="true" data-lucide="message-square" class="h-4 w-4"></i>
          Open Web Chat
        </a>
        <!-- email CTA -->
        <a x-show="channel==='email'"
           :href="'mailto:'+agentEmail"
           class="inline-flex w-full items-center justify-center gap-2 rounded-md border border-transparent
                  bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm
                  transition hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500
                  sm:ml-3 sm:w-auto sm:text-sm">
          <i aria-hidden="true" data-lucide="mail" class="h-4 w-4"></i>
          Send Email
        </a>

        <!-- sms CTA -->
        <a x-show="channel==='sms'"
           :href="'sms:'+agentPhone"
           class="inline-flex w-full items-center justify-center gap-2 rounded-md border border-transparent
                  bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm
                  transition hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500
                  sm:ml-3 sm:w-auto sm:text-sm">
          <i aria-hidden="true" data-lucide="phone" class="h-4 w-4"></i>
          Send Text
        </a>

        <button @click="reset()"
                class="inline-flex w-full justify-center rounded-md border border-gray-300
                       bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm
                       transition hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500
                       sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
          Close
        </button>
      </div>
    </div>
  </div>
</div>