@props([
    'phone' => '+33611788430',
    'message' => 'Bonjour Atirao, je souhaite vous contacter.',
])

@php
    $whatsappUrl = 'https://wa.me/' . preg_replace('/\D+/', '', $phone) . '?text=' . rawurlencode($message);
@endphp

<div class="communication-widget" data-communication-widget>
    <div class="communication-widget__panel" id="communication-widget-panel" data-communication-panel>
        <p class="communication-widget__title">Communiquer avec nous</p>
        <button class="communication-widget__option" type="button" data-tidio-open>
            <span class="communication-widget__option-icon communication-widget__option-icon--chat" aria-hidden="true">
                <svg viewBox="0 0 24 24" focusable="false">
                    <path d="M4.6 5.4A4.4 4.4 0 0 1 9 1h6a4.4 4.4 0 0 1 4.4 4.4v4.2A4.4 4.4 0 0 1 15 14H9.4l-4.1 3.1A.8.8 0 0 1 4 16.5V14A4.4 4.4 0 0 1 .6 9.7V5.4Zm4.4-2A2 2 0 0 0 7 5.4v4.3a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V5.4a2 2 0 0 0-2-2H9Zm-.3 4.1a1.1 1.1 0 1 1 2.2 0 1.1 1.1 0 0 1-2.2 0Zm4 0a1.1 1.1 0 1 1 2.2 0 1.1 1.1 0 0 1-2.2 0Z"/>
                    <path d="M9 16.4h5.6l3.1 2.3v-2.1a3.9 3.9 0 0 0 3.7-3.9V9.1c1.2.8 2 2.1 2 3.6v3.6a4 4 0 0 1-3.4 3.9v2.1a.8.8 0 0 1-1.3.6l-3.8-2.8H10a4 4 0 0 1-3.8-2.8L9 16.4Z"/>
                </svg>
            </span>
            <span>
                <strong>Support</strong>
                <small>Support 24/7</small>
            </span>
        </button>
        <a class="communication-widget__option" href="{{ $whatsappUrl }}" target="_blank" rel="noopener noreferrer">
            <span class="communication-widget__option-icon communication-widget__option-icon--whatsapp" aria-hidden="true">
                <svg viewBox="0 0 32 32" focusable="false">
                    <path d="M16.01 3.2c-7.05 0-12.79 5.68-12.79 12.68 0 2.24.59 4.43 1.72 6.36l-1.83 6.56 6.77-1.77a12.93 12.93 0 0 0 6.13 1.55c7.05 0 12.79-5.69 12.79-12.69S23.06 3.2 16.01 3.2Zm0 22.96c-1.95 0-3.86-.55-5.5-1.58l-.39-.24-4.01 1.05 1.07-3.87-.25-.4a10.18 10.18 0 0 1-1.57-5.24c0-5.66 4.78-10.26 10.65-10.26 5.86 0 10.64 4.6 10.64 10.26 0 5.67-4.78 10.28-10.64 10.28Zm5.84-7.69c-.32-.16-1.9-.93-2.2-1.04-.29-.11-.51-.16-.72.16-.21.32-.82 1.04-1 1.25-.18.21-.37.24-.69.08-.32-.16-1.35-.49-2.57-1.57-.95-.84-1.59-1.88-1.78-2.2-.18-.32-.02-.49.14-.65.14-.14.32-.37.48-.56.16-.18.21-.32.32-.53.11-.21.05-.4-.03-.56-.08-.16-.72-1.72-.99-2.36-.26-.62-.53-.54-.72-.55h-.62c-.21 0-.56.08-.85.4-.29.32-1.12 1.09-1.12 2.65 0 1.57 1.15 3.08 1.31 3.29.16.21 2.27 3.43 5.49 4.8.77.33 1.37.53 1.83.68.77.24 1.47.21 2.03.13.62-.09 1.9-.77 2.17-1.52.27-.75.27-1.39.19-1.52-.08-.13-.29-.21-.61-.37Z"/>
                </svg>
            </span>
            <span>
                <strong>WhatsApp</strong>
                <small>Pour plus d'info</small>
            </span>
        </a>
    </div>

    <button
        class="communication-widget__toggle"
        type="button"
        aria-label="Choisir un moyen de communication"
        aria-controls="communication-widget-panel"
        aria-expanded="false"
        data-communication-toggle
    >
        <span class="communication-widget__hello" aria-hidden="true">Support</span>
        <span class="communication-widget__support" aria-hidden="true">
            <svg viewBox="0 0 64 64" focusable="false">
                <circle class="communication-widget__support-face" cx="32" cy="30" r="15"/>
                <path class="communication-widget__support-hair" d="M18 28c3-9 9-14 17-13 6 1 10 5 11 12"/>
                <path class="communication-widget__support-headset" d="M14 32c0-12 8-21 18-21s18 9 18 21"/>
                <rect class="communication-widget__support-ear" x="10" y="29" width="8" height="13" rx="4"/>
                <rect class="communication-widget__support-ear" x="46" y="29" width="8" height="13" rx="4"/>
                <path class="communication-widget__support-eye" d="M26 30h.1M38 30h.1"/>
                <path class="communication-widget__support-smile" d="M26 38c3 3 9 3 12 0"/>
                <path class="communication-widget__support-mic" d="M48 40c-2 7-8 10-16 10"/>
                <circle class="communication-widget__support-mic-dot" cx="31" cy="50" r="2.4"/>
                <path class="communication-widget__support-signal communication-widget__support-signal--one" d="M52 15l4-4"/>
                <path class="communication-widget__support-signal communication-widget__support-signal--two" d="M56 24h6"/>
                <path class="communication-widget__support-signal communication-widget__support-signal--three" d="M46 10l1-6"/>
            </svg>
        </span>
    </button>
</div>

<style>
    body:not(.communication-widget--tidio-open) #tidio-chat-iframe {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .communication-widget {
        position: fixed;
        right: 24px;
        bottom: 24px;
        z-index: 9999;
        font-family: "Poppins", Arial, sans-serif;
    }

    .communication-widget__toggle {
        display: grid;
        width: 64px;
        height: 64px;
        padding: 0;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background:
            radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.26), transparent 26%),
            linear-gradient(135deg, #222224 0%, #111113 100%);
        color: #ffffff;
        cursor: pointer;
        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22), 0 0 0 0 rgba(229, 55, 63, 0.22);
        transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
        animation: communication-widget-pulse 2.5s ease-out 4;
    }

    .communication-widget__toggle:hover,
    .communication-widget__toggle:focus-visible,
    .communication-widget.is-open .communication-widget__toggle {
        background:
            radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.3), transparent 26%),
            linear-gradient(135deg, #e5373f 0%, #b91f28 100%);
        transform: translateY(-2px);
        box-shadow: 0 22px 42px rgba(229, 55, 63, 0.24);
        animation-play-state: paused;
    }

    .communication-widget__toggle:focus-visible {
        outline: 3px solid rgba(229, 55, 63, 0.3);
        outline-offset: 4px;
    }

    .communication-widget__hello {
        position: absolute;
        right: 0;
        bottom: calc(100% + 10px);
        padding: 7px 10px;
        border-radius: 999px;
        background: #ffffff;
        color: #222224;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
        transform-origin: right bottom;
        animation: communication-widget-hello 3.3s ease-in-out 3 forwards;
    }

    .communication-widget__hello::after {
        content: "";
        position: absolute;
        right: 16px;
        bottom: -4px;
        width: 8px;
        height: 8px;
        background: #ffffff;
        transform: rotate(45deg);
    }

    .communication-widget.is-open .communication-widget__hello {
        opacity: 0;
        animation-play-state: paused;
    }

    .communication-widget__support {
        display: grid;
        width: 46px;
        height: 46px;
        place-items: center;
    }

    .communication-widget__support svg {
        display: block;
        width: 46px;
        height: 46px;
        overflow: visible;
    }

    .communication-widget__support-face {
        fill: #ffffff;
    }

    .communication-widget__support-hair {
        fill: #69c1bd;
        opacity: 0.95;
    }

    .communication-widget__support-headset,
    .communication-widget__support-eye,
    .communication-widget__support-smile,
    .communication-widget__support-mic,
    .communication-widget__support-signal {
        fill: none;
        stroke: #ffffff;
        stroke-width: 4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .communication-widget__support-eye,
    .communication-widget__support-smile {
        stroke: #222224;
        stroke-width: 3;
    }

    .communication-widget__support-ear,
    .communication-widget__support-mic-dot {
        fill: #ffffff;
    }

    .communication-widget__support-mic,
    .communication-widget__support-mic-dot {
        animation: communication-widget-attention 2s ease-in-out 5;
    }

    .communication-widget__support-signal {
        opacity: 0;
        stroke: #69c1bd;
        stroke-width: 3.5;
        animation: communication-widget-signal 2s ease-in-out 5;
    }

    .communication-widget__support-signal--two {
        animation-delay: 0.16s;
    }

    .communication-widget__support-signal--three {
        animation-delay: 0.32s;
    }

    .communication-widget__panel {
        position: absolute;
        right: 0;
        bottom: calc(100% + 12px);
        width: 280px;
        padding: 12px;
        border: 1px solid rgba(34, 34, 36, 0.08);
        border-radius: 10px;
        background: #ffffff;
        box-shadow: 0 22px 46px rgba(0, 0, 0, 0.16);
        opacity: 0;
        pointer-events: none;
        transform: translateY(10px);
        transition: opacity 180ms ease, transform 180ms ease;
    }

    .communication-widget.is-open .communication-widget__panel {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .communication-widget__title {
        margin: 0 0 10px;
        color: #222224;
        font-size: 14px;
        font-weight: 800;
        line-height: 1.2;
    }

    .communication-widget__option {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 10px;
        padding: 10px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #222224;
        cursor: pointer;
        text-align: left;
        text-decoration: none;
        transition: background 160ms ease, transform 160ms ease;
    }

    .communication-widget__option:hover,
    .communication-widget__option:focus-visible {
        background: #f4f5f6;
        color: #222224;
        transform: translateX(-2px);
        outline: none;
    }

    .communication-widget__option-icon {
        display: grid;
        width: 38px;
        height: 38px;
        place-items: center;
        flex: 0 0 auto;
        border-radius: 50%;
        color: #ffffff;
    }

    .communication-widget__option-icon--chat {
        background: #e5373f;
    }

    .communication-widget__option-icon--whatsapp {
        background: #25d366;
    }

    .communication-widget__option-icon svg {
        width: 22px;
        height: 22px;
        fill: currentColor;
    }

    .communication-widget__option strong,
    .communication-widget__option small {
        display: block;
    }

    .communication-widget__option strong {
        font-size: 13px;
        font-weight: 800;
        line-height: 1.2;
    }

    .communication-widget__option small {
        margin-top: 2px;
        color: #6f7278;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.25;
    }

    @media (max-width: 640px) {
        .communication-widget {
            right: 16px;
            bottom: 16px;
        }

        .communication-widget__toggle {
            width: 58px;
            height: 58px;
        }

        .communication-widget__support,
        .communication-widget__support svg {
            width: 42px;
            height: 42px;
        }

        .communication-widget__hello {
            font-size: 11px;
            right: -2px;
        }

        .communication-widget__panel {
            width: min(280px, calc(100vw - 32px));
        }
    }

    @keyframes communication-widget-pulse {
        0% {
            box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22), 0 0 0 0 rgba(229, 55, 63, 0.28);
        }
        70% {
            box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22), 0 0 0 16px rgba(229, 55, 63, 0);
        }
        100% {
            box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22), 0 0 0 0 rgba(229, 55, 63, 0);
        }
    }

    @keyframes communication-widget-attention {
        0%,
        100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-2px);
        }
    }

    @keyframes communication-widget-signal {
        0%,
        100% {
            opacity: 0;
            transform: translateY(2px);
        }
        25%,
        65% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes communication-widget-hello {
        0%,
        58%,
        100% {
            opacity: 0;
            transform: translateY(6px) scale(0.92);
        }
        10%,
        46% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .communication-widget__toggle,
        .communication-widget__hello,
        .communication-widget__support-mic,
        .communication-widget__support-mic-dot,
        .communication-widget__support-signal {
            animation: none;
        }
    }
</style>

<script>
    (function() {
        var widgets = document.querySelectorAll('[data-communication-widget]');
        var contactUrl = '{{ route('contact') }}';
        var hideAttempts = 0;
        var tidioOpenedByWidget = false;

        function hideTidioLauncher() {
            if (tidioOpenedByWidget) {
                return false;
            }

            document.body.classList.remove('communication-widget--tidio-open');

            if (window.tidioChatApi && typeof window.tidioChatApi.hide === 'function') {
                window.tidioChatApi.hide();
                return true;
            }

            return false;
        }

        function openTidioChat(attempt) {
            attempt = attempt || 0;

            if (!window.tidioChatApi) {
                if (attempt < 20) {
                    window.setTimeout(function() {
                        openTidioChat(attempt + 1);
                    }, 100);
                    return;
                }

                tidioOpenedByWidget = false;
                document.body.classList.remove('communication-widget--tidio-open');
                window.location.href = contactUrl;
                return;
            }

            tidioOpenedByWidget = true;
            document.body.classList.add('communication-widget--tidio-open');

            if (typeof window.tidioChatApi.show === 'function') {
                window.tidioChatApi.show();
            }

            if (typeof window.tidioChatApi.open === 'function') {
                window.tidioChatApi.open();
            }
        }

        function handleTidioClose() {
            tidioOpenedByWidget = false;
            window.setTimeout(hideTidioLauncher, 0);
            window.setTimeout(hideTidioLauncher, 300);
        }

        function bindTidioEvents() {
            if (!window.tidioChatApi || typeof window.tidioChatApi.on !== 'function') {
                return false;
            }

            window.tidioChatApi.on('ready', hideTidioLauncher);
            window.tidioChatApi.on('close', handleTidioClose);
            return true;
        }

        if (window.tidioChatApi && typeof window.tidioChatApi.on === 'function') {
            bindTidioEvents();
        } else {
            document.addEventListener('tidioChat-ready', function() {
                bindTidioEvents();
                hideTidioLauncher();
            }, { once: true });
        }

        var hideInterval = window.setInterval(function() {
            hideAttempts += 1;
            hideTidioLauncher();

            if (hideAttempts > 240) {
                window.clearInterval(hideInterval);
            }
        }, 250);

        widgets.forEach(function(widget) {
            var toggle = widget.querySelector('[data-communication-toggle]');
            var tidioButton = widget.querySelector('[data-tidio-open]');

            function setOpen(isOpen) {
                widget.classList.toggle('is-open', isOpen);
                toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
            }

            toggle.addEventListener('click', function() {
                setOpen(!widget.classList.contains('is-open'));
            });

            tidioButton.addEventListener('click', function() {
                setOpen(false);
                openTidioChat();
            });

            document.addEventListener('click', function(event) {
                if (!widget.contains(event.target)) {
                    setOpen(false);
                }
            });

            document.addEventListener('keydown', function(event) {
                if (event.key === 'Escape') {
                    setOpen(false);
                }
            });
        });
    })();
</script>