@props(['contextSaree' => null])

@php
    $isCheckoutOrReceipt = request()->is('checkout*') || request()->is('order-received*');
    $whatsappNumber = $storeConfig['storeContactInfo']['whatsappNumber'] ?? '8801700000000';
    $messengerUrl = $storeConfig['storeContactInfo']['messengerUrl'] ?? 'https://m.me/aangina.bd';

    if (!empty($contextSaree)) {
        $prefilledMessage = sprintf(
            'Hello! I have a question about %s (SKU: %s, Price: %s) — %s',
            $contextSaree['title'],
            $contextSaree['sku'],
            $contextSaree['formattedPrice'] ?? ('BDT ' . number_format($contextSaree['priceBDT'])),
            url()->current()
        );
    } else {
        $prefilledMessage = 'Hello! I would like some help browsing your saree collection.';
    }

    $whatsappLink = 'https://wa.me/' . $whatsappNumber . '?text=' . rawurlencode($prefilledMessage);
@endphp

@if(!empty($storeConfig['floatingChatWidget']['enabled']) && !$isCheckoutOrReceipt)
<div x-data
     x-show="!$store.ui.anyOverlayOpen"
     x-cloak
     :class="$store.ui.pdpStickyBarVisible ? 'bottom-[76px] lg:bottom-[24px]' : 'bottom-[16px] lg:bottom-[24px]'"
     class="fixed right-[16px] lg:right-[24px] z-floating flex flex-col items-end transition-all duration-200">

    {{-- ====================================================================
         SMART POPOVER CARD (Width: 300px, --bg-main bg, 1px --border-subtle border)
         ==================================================================== --}}
    <div x-show="$store.ui.chatPopoverOpen"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 translate-y-2 scale-95"
         x-transition:enter-end="opacity-100 translate-y-0 scale-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 translate-y-0 scale-100"
         x-transition:leave-end="opacity-0 translate-y-2 scale-95"
         @click.outside="$store.ui.closeChatPopover()"
         class="mb-[12px] w-[300px] bg-bg-main border border-border-subtle">

        {{-- Popover Header (--brand-primary bg, --text-light text) --}}
        <div class="bg-brand-primary text-text-light px-[16px] py-[12px] flex items-center justify-between">
            <h3 class="font-heading font-semibold text-[18px] text-text-light leading-tight">
                Need Help Choosing a Saree?
            </h3>
            <button type="button"
                    @click="$store.ui.closeChatPopover()"
                    aria-label="Close chat help"
                    class="w-[32px] h-[32px] -mr-[6px] inline-flex items-center justify-center text-text-light hover:text-brand-accent transition-colors duration-200 cursor-pointer">
                ✕
            </button>
        </div>

        {{-- Popover Body (16px padding) --}}
        <div class="p-[16px] space-y-[12px]">
            <p class="font-body text-[13px] leading-[1.5] text-text-muted">
                Chat with our Dhaka team for fabric details or phone ordering (10 AM – 10 PM).
            </p>

            {{-- Option 1: Primary Action (CHAT ON WHATSAPP →, 44px height, --brand-accent fill + --text-primary bold text) --}}
            <a href="{{ $whatsappLink }}"
               target="_blank"
               rel="noopener noreferrer"
               class="btn-compact-primary w-full text-center">
                CHAT ON WHATSAPP →
            </a>

            {{-- Option 2: Secondary Action (MESSAGE ON FACEBOOK MESSENGER, 44px height, 1.5px --brand-primary outlined) --}}
            <a href="{{ $messengerUrl }}"
               target="_blank"
               rel="noopener noreferrer"
               class="btn-compact-secondary w-full text-center text-[12px]">
                MESSAGE ON FACEBOOK MESSENGER
            </a>
        </div>
    </div>

    {{-- ====================================================================
         FLOATING TRIGGER BUTTON
         Desktop: Pill button (height: 46px, padding: 0 18px) "[ 💬 Chat / Help ]"
         Mobile: Circular button (48x48px) "💬"
         Colors: Solid --brand-primary bg, --text-light text, 1.5px --brand-accent border ring;
                 Hover/Tap flips to --brand-accent bg + --text-primary text.
         ==================================================================== --}}
    <button type="button"
            @click="$store.ui.toggleChatPopover()"
            :aria-expanded="$store.ui.chatPopoverOpen"
            aria-label="Chat or get help on WhatsApp and Messenger"
            class="w-[48px] h-[48px] lg:w-auto lg:h-[46px] lg:px-[18px] rounded-full bg-brand-primary text-text-light border-[1.5px] border-brand-accent hover:bg-brand-accent hover:text-text-primary active:bg-brand-accent active:text-text-primary inline-flex items-center justify-center gap-[8px] font-body font-semibold text-[13px] tracking-[0.4px] transition-colors duration-200 cursor-pointer">
        <svg class="w-[20px] h-[20px] stroke-current fill-none shrink-0" viewBox="0 0 24 24" stroke-width="1.9" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"/>
        </svg>
        <span class="hidden lg:inline">Chat / Help</span>
    </button>
</div>
@endif