{# FAB — bouton flottant en bas à droite, visible sur toutes les pages.
   Cliqué, déploie une mini-card avec : message intervention sur site +
   téléphone gros + lien vers /a-propos#zone-intervention (zones).
   Pas d'overlay sombre ni de blocage scroll : reste léger et discret.

   IntersectionObserver sur .tca-footer : quand le footer entre dans le
   viewport, le FAB glisse en bas + fade-out → libère les liens légaux. #}
{% set phoneRaw = siteParams.phone|default('04 73 28 74 74') %}
{% set phoneDigits = phoneRaw|replace({' ': '', '.': '', '-': '', '(': '', ')': ''}) %}

<div class="tca-fab" id="tca-fab" data-open="false">
    <button type="button"
            class="tca-fab__trigger"
            id="tca-fab-trigger"
            aria-expanded="false"
            aria-controls="tca-fab-panel"
            aria-label="Demander une intervention sur site">
        <svg class="tca-fab__icon tca-fab__icon--default" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <rect x="1" y="6" width="15" height="11" rx="1"/>
            <polygon points="16 8 20 8 23 11 23 17 16 17 16 8"/>
            <circle cx="5.5" cy="18.5" r="2.5"/>
            <circle cx="18.5" cy="18.5" r="2.5"/>
        </svg>
        <svg class="tca-fab__icon tca-fab__icon--close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <line x1="18" y1="6" x2="6" y2="18"/>
            <line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
        <span class="tca-fab__label">Intervention sur site</span>
    </button>

    <div class="tca-fab__panel" id="tca-fab-panel" role="dialog" aria-labelledby="tca-fab-panel-title" hidden>
        <div class="tca-fab__panel-head">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
            <h3 id="tca-fab-panel-title">Nous venons chez vous</h3>
        </div>
        <p class="tca-fab__panel-text">
            Intervention sur site partout en Auvergne et dans le Massif Central. Appelez-nous pour planifier votre intervention.
        </p>
        <a href="tel:+33{{ phoneDigits|slice(1) }}" class="tca-fab__phone">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
            {{ phoneRaw }}
        </a>
        <a href="{{ path('app_about') }}#zone-intervention" class="tca-fab__zones-link">Voir nos zones d'intervention →</a>
    </div>
</div>

<script>
(function () {
    var btn = document.getElementById('tca-fab-trigger');
    var fab = document.getElementById('tca-fab');
    var panel = document.getElementById('tca-fab-panel');
    if (!btn || !fab || !panel) return;

    function setOpen(open) {
        fab.setAttribute('data-open', open ? 'true' : 'false');
        btn.setAttribute('aria-expanded', open ? 'true' : 'false');
        if (open) {
            panel.hidden = false;
        } else {
            setTimeout(function () {
                if (fab.getAttribute('data-open') === 'false') panel.hidden = true;
            }, 220);
        }
    }

    btn.addEventListener('click', function () {
        setOpen(fab.getAttribute('data-open') !== 'true');
    });

    document.addEventListener('click', function (e) {
        if (fab.getAttribute('data-open') !== 'true') return;
        if (!fab.contains(e.target)) setOpen(false);
    });

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && fab.getAttribute('data-open') === 'true') setOpen(false);
    });

    // Cache le FAB quand le footer entre dans le viewport
    // → laisse cliquer librement sur les liens mentions / CGU / cookies.
    var footer = document.querySelector('.tca-footer');
    if (footer && 'IntersectionObserver' in window) {
        var observer = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting) {
                    fab.setAttribute('data-hidden', 'true');
                    if (fab.getAttribute('data-open') === 'true') setOpen(false);
                } else {
                    fab.setAttribute('data-hidden', 'false');
                }
            });
        }, { rootMargin: '0px 0px -40px 0px', threshold: 0 });
        observer.observe(footer);
    }
})();
</script>