@php
    use App\Helpers\SeoHelper;
    $locale = app()->getLocale();
    $localizedRoute = function($routeName, $params = []) use ($locale) {
        return SeoHelper::localizedRoute($routeName, $params, $locale);
    };
    $stickyTitle = $stickyCtaTitle ?? __('messages.services.get_started_now');
    $stickyContactUrl = $stickyCtaContactUrl ?? $localizedRoute('contact.index');
    $stickySimulateUrl = $stickyCtaSimulateUrl ?? null;
    $stickyServiceSlug = $stickyCtaServiceSlug ?? null;
    $editorial = ! empty($editorial);
@endphp

@if($editorial)
<div id="sticky-cta-bar" class="svc-sticky-cta safe-area-pb" role="complementary" aria-label="{{ __('messages.accessibility.cta_bar') }}">
    <div class="site-container svc-sticky-cta__inner">
        <p class="svc-sticky-cta__title">{{ $stickyTitle }}</p>
        <div class="svc-sticky-cta__actions">
            @if($stickySimulateUrl)
            <a href="{{ $stickySimulateUrl }}" class="svc-sticky-cta__ghost">{{ __('messages.service_detail.get_estimate') }}</a>
            @endif
            <a href="{{ $stickyContactUrl }}{{ $stickyServiceSlug ? '?service=' . $stickyServiceSlug : '' }}"
               class="svc-sticky-cta__btn"
               title="{{ __('messages.accessibility.get_free_consultation') }}">
                {{ __('messages.services.schedule_call') }}
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
            </a>
        </div>
    </div>
</div>
@else
<div id="sticky-cta-bar" class="fixed bottom-0 left-0 right-0 z-40 transform translate-y-full transition-transform duration-300 ease-out bg-white border-t border-neutral-200 shadow-lg safe-area-pb" role="complementary" aria-label="{{ __('messages.accessibility.cta_bar') }}">
    <div class="site-container py-3 flex flex-wrap items-center justify-between gap-3">
        <p class="text-sm font-semibold text-neutral-900 truncate pr-2">{{ $stickyTitle }}</p>
        <div class="flex items-center gap-2 flex-shrink-0">
            @if($stickySimulateUrl)
            <a href="{{ $stickySimulateUrl }}" class="inline-flex items-center px-4 py-2.5 bg-neutral-100 text-neutral-900 rounded-full text-sm font-semibold hover:bg-neutral-200 smooth-transition">
                {{ __('messages.service_detail.get_estimate') }}
            </a>
            @endif
            <a href="{{ $stickyContactUrl }}{{ $stickyServiceSlug ? '?service=' . $stickyServiceSlug : '' }}"
               class="inline-flex items-center px-5 py-2.5 bg-criazo-primary text-white rounded-full text-sm font-semibold hover:bg-criazo-hover smooth-transition"
               title="{{ __('messages.accessibility.get_free_consultation') }}">
                {{ __('messages.services.schedule_call') }}
                <svg class="w-4 h-4 ml-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
            </a>
        </div>
    </div>
</div>
@endif

<script>
(function() {
    var bar = document.getElementById('sticky-cta-bar');
    if (!bar) return;
    var showAfter = {{ $editorial ? 480 : 400 }};
    var ticking = false;
    var editorial = {{ $editorial ? 'true' : 'false' }};
    function update() {
        var show = window.scrollY > showAfter;
        if (editorial) {
            bar.classList.toggle('is-visible', show);
        } else {
            bar.classList.toggle('translate-y-full', !show);
        }
        ticking = false;
    }
    window.addEventListener('scroll', function() {
        if (!ticking) {
            requestAnimationFrame(update);
            ticking = true;
        }
    }, { passive: true });
})();
</script>