{{--
    SSOT: Tracking Data & Click Logic

    Single source of truth for ALL tracking providers (PostHog, GTM/GA4).
    - trackingContext: campaign data pushed to dataLayer
    - buildClickProps(): click property builder consumed by all providers
    - Shared click listener pushes to dataLayer for GTM
--}}
<script>
    // ── SSOT: Tracking context (campaign data) ──
    window.trackingContext = {
        campaign_id: '{{ $landingWebsite->id }}',
        recipient_suffix: {!! json_encode($suffix ?? null) !!},
        global_parameters_key: {!! json_encode($globalParametersKey ?? null) !!},
        device_type: /Mobi/i.test(navigator.userAgent) ? (/Tablet|iPad/i.test(navigator.userAgent) ? 'tablet' : 'mobile') : 'desktop'
    };

    window.dataLayer = window.dataLayer || [];

    // ── Consent defaults (must run BEFORE GTM snippet loads) ──
    function gtag(){dataLayer.push(arguments);}
    gtag('consent', 'default', {
        'ad_user_data': 'granted',
        'ad_personalization': 'granted',
        'ad_storage': 'granted',
        'analytics_storage': 'granted'
    });

    window.dataLayer.push(window.trackingContext);

    // ── SSOT: Click property builder ──
    // Consumed by PostHog (directly) and GTM (via dataLayer push)
    // Adding/removing a property here = automatically sent to ALL providers
    window.buildClickProps = function(el) {
        var clickable = el.closest('a, button, [data-click-id], [data-variable-keys], [role="button"], input[type="submit"], input[type="button"], .btn');
        if (!clickable) return null;

        var clickId = clickable.getAttribute('data-click-id')
            || clickable.id
            || clickable.getAttribute('data-name')
            || (clickable.className ? clickable.className.split(' ')[0] : '')
            || clickable.tagName.toLowerCase();

        var vk = clickable.dataset?.variableKeys
            || clickable.closest('[data-variable-keys]')?.dataset?.variableKeys
            || null;

        var vt = clickable.dataset?.variableTypes
            || clickable.closest('[data-variable-types]')?.dataset?.variableTypes
            || null;

        return {
            click_id: clickId,
            click_text: (clickable.innerText || clickable.getAttribute('aria-label') || '').substring(0, 100).trim(),
            variable_keys: vk || null,
            variable_types: vt || null,
            element_tag: clickable.tagName.toLowerCase(),
            element_href: clickable.href || null
        };
    };

    // ── Shared click listener — pushes to dataLayer for GTM ──
    var _firstClickTracked = false;
    document.addEventListener('click', function(e) {
        var target = e.target.nodeType === 3 ? e.target.parentElement : e.target;
        if (!target) return;
        var props = window.buildClickProps(target);
        if (props) {
            window.dataLayer.push(Object.assign({ event: 'all_click' }, window.trackingContext, props));

            // ── Time to first click (once per page) ──
            if (!_firstClickTracked) {
                _firstClickTracked = true;
                var delay = Math.round(performance.now());
                window.dataLayer.push(Object.assign({ event: 'time_to_first_click', time_to_first_click_ms: delay, click_id: props.click_id }, window.trackingContext));
            }
        }
    }, true);

    // ── Form submit tracking ──
    document.addEventListener('submit', function(e) {
        var form = e.target;
        if (!form || form.tagName !== 'FORM') return;
        var formId = form.getAttribute('id') || form.getAttribute('data-click-id') || form.getAttribute('name') || 'unknown';
        window.dataLayer.push(Object.assign({ event: 'form_submit', form_id: formId }, window.trackingContext));
    }, true);

    // ── Scroll depth tracking (25%, 50%, 75%, 100%) ──
    (function() {
        var thresholds = [25, 50, 75, 100];
        var reached = {};
        function onScroll() {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            var docHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - window.innerHeight;
            if (docHeight <= 0) return;
            var pct = Math.round((scrollTop / docHeight) * 100);
            for (var i = 0; i < thresholds.length; i++) {
                var t = thresholds[i];
                if (pct >= t && !reached[t]) {
                    reached[t] = true;
                    window.dataLayer.push(Object.assign({ event: 'scroll_depth', scroll_depth: t }, window.trackingContext));
                }
            }
        }
        window.addEventListener('scroll', onScroll, { passive: true });
    })();
</script>