{# Widget « Bouton de contact flottant » — appel, WhatsApp ou email, toujours
   visible en bas de l'écran. Conçu pour la conversion mobile des TPE. #}

{% set href = null %}
{% set icon = 'fa-solid fa-phone' %}
{% if channel == 'phone' and phone %}
    {% set href = 'tel:' ~ phone|replace({' ': '', '.': ''}) %}
{% elseif channel == 'whatsapp' and phone %}
    {# wa.me exige le numéro international sans « + » ni séparateurs #}
    {% set waNumber = phone|replace({' ': '', '.': '', '-': '', '(': '', ')': ''}) %}
    {% if waNumber starts with '+' %}{% set waNumber = waNumber[1:] %}{% endif %}
    {% if waNumber starts with '00' %}{% set waNumber = waNumber[2:] %}{% endif %}
    {% set href = 'https://wa.me/' ~ waNumber %}
    {% set icon = 'fa-brands fa-whatsapp' %}
{% elseif channel == 'email' and email %}
    {% set href = 'mailto:' ~ email %}
    {% set icon = 'fa-solid fa-envelope' %}
{% endif %}

{% if href %}
<a class="izi-fab izi-fab--{{ position }}"
   href="{{ href }}"
   {% if channel == 'whatsapp' %}target="_blank" rel="noopener noreferrer"{% endif %}
   style="--izi-fab-accent: {{ accentColor }};"
   aria-label="{{ label|default('Nous contacter') }}">
    <i class="{{ icon }}" aria-hidden="true"></i>
    {% if showLabel and label %}<span class="izi-fab__label">{{ label }}</span>{% endif %}
</a>

<style>
    .izi-fab {
        position: fixed;
        bottom: 24px;
        z-index: 950;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 14px 20px;
        border-radius: 999px;
        background: var(--izi-fab-accent);
        color: #ffffff;
        font-weight: 600;
        font-size: 15px;
        text-decoration: none;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.3);
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .izi-fab--right { right: 24px; }
    .izi-fab--left { left: 24px; }

    .izi-fab:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 36px rgba(15, 23, 42, 0.35);
        color: #ffffff;
    }

    .izi-fab i { font-size: 18px; }

    @media (max-width: 560px) {
        .izi-fab { bottom: 16px; padding: 14px 16px; }
        .izi-fab--right { right: 16px; }
        .izi-fab--left { left: 16px; }
    }
</style>
{% else %}
    <!-- Bouton flottant : canal non configuré (téléphone ou email manquant) -->
{% endif %}