@php
    use App\Helpers\SeoHelper;
    $locale = app()->getLocale();
    $localizedRoute = function($routeName, $params = []) use ($locale) {
        return SeoHelper::localizedRoute($routeName, $params, $locale);
    };
    // Only show contextual calculator when context exists AND belongs to this service (never show another service's options)
    $contextForThisService = isset($pricingContext, $slug) && !empty($pricingContext['tiers'])
        && (isset($pricingContext['service_slug']) ? $pricingContext['service_slug'] === $slug : true);
    $contactUrl = $localizedRoute('contact.index') . (isset($slug) ? '?service=' . $slug : '');
@endphp

@if($contextForThisService)
{{-- Contextual calculator: tiers and addons for this service --}}
<div class="bg-gradient-to-br from-white to-neutral-50 rounded-3xl shadow-2xl p-8 border-2 border-neutral-200">
    <div class="text-center mb-8">
        <h3 class="section-intro__title mb-3">{{ __('messages.pricing_calculator.estimate_cost') }}</h3>
        <p class="text-neutral-600">{{ __('messages.pricing_calculator.customize_package') }}</p>
    </div>

    <form id="pricingCalculator" class="space-y-6">
        <div>
            <label class="block text-sm font-semibold text-neutral-700 mb-3">{{ __('messages.pricing_calculator.project_scope') }}</label>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                @foreach($pricingContext['tiers'] as $index => $tier)
                <label class="relative cursor-pointer">
                    <input type="radio" name="scope" value="{{ $tier['id'] }}" data-price="{{ $tier['price'] }}" class="peer sr-only" {{ $index === 0 ? 'checked' : '' }}>
                    <div class="p-4 border-2 border-neutral-300 rounded-xl peer-checked:border-criazo-primary peer-checked:bg-criazo-primary/5 smooth-transition">
                        <div class="type-card-title mb-1">{{ __('messages.' . $tier['label_key']) }}</div>
                        <div class="text-sm text-neutral-600">{{ __('messages.' . $tier['desc_key']) }}</div>
                    </div>
                </label>
                @endforeach
            </div>
        </div>

        @if(!empty($pricingContext['addons']))
        <div>
            <label class="block text-sm font-semibold text-neutral-700 mb-3">{{ __('messages.pricing_calculator.addons') }}</label>
            <div class="space-y-3">
                @foreach($pricingContext['addons'] as $addon)
                <label class="flex items-center justify-between p-4 border-2 border-neutral-300 rounded-xl cursor-pointer hover:border-criazo-primary smooth-transition">
                    <div class="flex items-center gap-3">
                        <input type="checkbox" name="addon" value="{{ $addon['id'] }}" data-price="{{ $addon['price'] }}" class="w-5 h-5 text-criazo-primary rounded">
                        <span class="font-medium text-neutral-900">{{ __('messages.' . $addon['label_key']) }}</span>
                    </div>
                    <span class="text-criazo-primary font-semibold">+€{{ number_format($addon['price']) }}</span>
                </label>
                @endforeach
            </div>
        </div>
        @endif

        <div class="mt-8 p-8 bg-gradient-to-r from-criazo-600 to-criazo-800 rounded-2xl text-white text-center">
            <p class="text-sm font-semibold mb-2 opacity-90">{{ __('messages.pricing_calculator.estimated_cost') }}</p>
            <div class="type-stat mb-4">
                €<span id="totalPrice">{{ number_format($pricingContext['tiers'][0]['price']) }}</span>
            </div>
            <p class="text-sm opacity-90 mb-6">{{ __('messages.pricing_calculator.price_may_vary') }}</p>
            <a href="{{ $contactUrl }}" class="inline-flex items-center px-8 py-4 bg-white text-criazo-primary rounded-full type-btn hover:bg-neutral-100 smooth-transition shadow-xl">
                {{ __('messages.pricing_calculator.get_quote') }} →
            </a>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const calculator = document.getElementById('pricingCalculator');
    if (!calculator) return;
    const totalPriceElement = document.getElementById('totalPrice');
    if (!totalPriceElement) return;

    function calculateTotal() {
        let total = 0;
        const selectedScope = calculator.querySelector('input[name="scope"]:checked');
        if (selectedScope) total += parseInt(selectedScope.dataset.price, 10);
        calculator.querySelectorAll('input[name="addon"]:checked').forEach(function(addon) {
            total += parseInt(addon.dataset.price, 10);
        });
        animateValue(totalPriceElement, parseInt(totalPriceElement.textContent.replace(/,/g, ''), 10), total, 500);
    }

    function animateValue(element, start, end, duration) {
        const range = end - start;
        const increment = range / (duration / 16);
        let current = start;
        const timer = setInterval(function() {
            current += increment;
            if ((increment > 0 && current >= end) || (increment < 0 && current <= end)) {
                current = end;
                clearInterval(timer);
            }
            element.textContent = Math.round(current).toLocaleString();
        }, 16);
    }

    calculator.querySelectorAll('input[name="scope"]').forEach(function(input) {
        input.addEventListener('change', calculateTotal);
    });
    calculator.querySelectorAll('input[name="addon"]').forEach(function(input) {
        input.addEventListener('change', calculateTotal);
    });
});
</script>
@else
{{-- No contextual config for this service: simple CTA to get a tailored quote --}}
<div class="bg-gradient-to-br from-white to-neutral-50 rounded-3xl shadow-2xl p-10 border-2 border-neutral-200 text-center">
    <h3 class="section-intro__title mb-3">{{ __('messages.pricing_calculator.get_tailored_quote') }}</h3>
    <p class="text-neutral-600 mb-8 max-w-md mx-auto">{{ __('messages.pricing_calculator.get_tailored_quote_desc') }}</p>
    <a href="{{ $contactUrl }}" class="inline-flex items-center px-8 py-4 bg-criazo-primary text-white rounded-full type-btn hover:bg-criazo-hover smooth-transition shadow-xl">
        {{ __('messages.pricing_calculator.get_quote') }} →
    </a>
</div>
@endif