{{-- First-run spotlight of the core loop. Vanilla JS, no library, so it stays
     within the CSP. Shows once (localStorage), desktop only, owners only. --}}
<style>
    #il-tour-overlay { position: fixed; inset: 0; z-index: 9998; pointer-events: none; }
    #il-tour-hole {
        position: absolute; border-radius: 10px;
        box-shadow: 0 0 0 9999px rgba(22,19,28,0.72);
        transition: all .35s cubic-bezier(.4,0,.2,1);
        pointer-events: none;
    }
    #il-tour-card {
        position: fixed; z-index: 9999; width: 300px; max-width: calc(100vw - 32px);
        background: #fff; border-radius: 14px; padding: 18px 18px 16px;
        box-shadow: 0 20px 50px -12px rgba(0,0,0,.5);
        pointer-events: auto; transition: top .35s cubic-bezier(.4,0,.2,1), left .35s cubic-bezier(.4,0,.2,1);
        font-family: 'Inter', system-ui, sans-serif;
    }
    #il-tour-card .il-step { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #6B46C1; }
    #il-tour-card h4 { margin: 6px 0 4px; font-size: 16px; font-weight: 700; color: #16131C; }
    #il-tour-card p { margin: 0; font-size: 13px; line-height: 1.5; color: #6E6878; }
    #il-tour-card .il-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
    #il-tour-card .il-dots { display: flex; gap: 5px; }
    #il-tour-card .il-dot { width: 6px; height: 6px; border-radius: 999px; background: #E3DFD9; }
    #il-tour-card .il-dot.on { background: #6B46C1; }
    #il-tour-card .il-btns { display: flex; gap: 8px; }
    #il-tour-card button { border: 0; cursor: pointer; font-size: 13px; font-weight: 600; border-radius: 8px; padding: 7px 14px; }
    #il-tour-card .il-skip { background: transparent; color: #9a94a4; padding: 7px 6px; }
    #il-tour-card .il-next { background: #6B46C1; color: #fff; }
</style>

<script>
(function () {
    var KEY = 'il_onboarding_tour_v1';
    try { if (localStorage.getItem(KEY)) return; } catch (e) { return; }
    if (window.innerWidth < 1024) return; // desktop sidebar only

    var steps = [
        { sel: '[data-tour="enquiries"]', title: 'Requests land here', body: 'Clients send you the idea, placement and budget through your booking link. You review each one before any calendar is shown.' },
        { sel: '[data-tour="calendar"]', title: 'Then you offer times', body: 'Reply with a few times that fit your week. Once a client picks one, it becomes an appointment on your calendar.' },
        { sel: '[data-tour="clients"]', title: 'Everyone in one place', body: 'Every client, their references and their history — no more scrolling back through DMs.' },
        { sel: '[data-tour="settings"]', title: 'Your link and your rules', body: 'Set your hours, deposit and branding here. Your public booking link lives in Settings too.' },
    ];

    function ready(fn) {
        if (document.readyState !== 'loading') { fn(); }
        else { document.addEventListener('DOMContentLoaded', fn); }
    }

    ready(function () {
        // Only run where the owner nav actually exists.
        if (!document.querySelector('[data-tour="enquiries"]')) return;

        var overlay = document.createElement('div'); overlay.id = 'il-tour-overlay';
        var hole = document.createElement('div'); hole.id = 'il-tour-hole';
        var card = document.createElement('div'); card.id = 'il-tour-card';
        overlay.appendChild(hole);
        document.body.appendChild(overlay);
        document.body.appendChild(card);

        var i = 0;

        function visible(sel) {
            var els = document.querySelectorAll(sel);
            for (var k = 0; k < els.length; k++) { if (els[k].offsetParent !== null) return els[k]; }
            return null;
        }

        function finish() {
            try { localStorage.setItem(KEY, '1'); } catch (e) {}
            overlay.remove(); card.remove();
        }

        function render() {
            var step = steps[i];
            var el = visible(step.sel);
            if (!el) { // element missing — skip to next or finish
                if (i < steps.length - 1) { i++; return render(); }
                return finish();
            }
            var r = el.getBoundingClientRect();
            var pad = 6;
            hole.style.top = (r.top - pad) + 'px';
            hole.style.left = (r.left - pad) + 'px';
            hole.style.width = (r.width + pad * 2) + 'px';
            hole.style.height = (r.height + pad * 2) + 'px';

            var dots = steps.map(function (_, n) { return '<span class="il-dot' + (n === i ? ' on' : '') + '"></span>'; }).join('');
            var last = i === steps.length - 1;
            card.innerHTML =
                '<div class="il-step">Step ' + (i + 1) + ' of ' + steps.length + '</div>' +
                '<h4>' + step.title + '</h4>' +
                '<p>' + step.body + '</p>' +
                '<div class="il-actions"><div class="il-dots">' + dots + '</div>' +
                '<div class="il-btns"><button class="il-skip" type="button">Skip</button>' +
                '<button class="il-next" type="button">' + (last ? 'Got it' : 'Next') + '</button></div></div>';

            // Position the card to the right of the highlighted item.
            var top = Math.min(Math.max(r.top, 16), window.innerHeight - 200);
            var left = r.right + 20;
            if (left + 300 > window.innerWidth) { left = r.left - 320; }
            card.style.top = top + 'px';
            card.style.left = Math.max(16, left) + 'px';

            card.querySelector('.il-skip').onclick = finish;
            card.querySelector('.il-next').onclick = function () {
                if (last) { return finish(); }
                i++; render();
            };
        }

        render();
        window.addEventListener('resize', render);
    });
})();
</script>