@extends('layouts.storefront')

@section('title', data_get($service, 'seo_title', data_get($service, 'title', 'Service Detail')) . ' | ' . config('app.name'))
@section('meta_description', data_get($service, 'seo_description', data_get($service, 'description', 'Clusterfix service detail')))

@section('content')
    @php
        $gallery = collect(data_get($service, 'gallery', []))
            ->prepend(data_get($service, 'image'))
            ->filter()
            ->unique()
            ->values()
            ->all();
        $compatibilities = collect(data_get($service, 'compatibilities', []));
        $faqs = collect(data_get($service, 'faq', []))->filter(fn ($faq) => filled($faq['answer'] ?? null))->values();
        $category = data_get($service, 'category', 'Repair Service');
        $categorySlug = data_get($service, 'category_slug', 'general');
        $faults = collect(preg_split('/\r\n|\r|\n/', (string) data_get($service, 'fault_description')))
            ->map(fn ($fault) => trim($fault))
            ->filter()
            ->values();
        $description = data_get($service, 'full_description') ?: data_get($service, 'description');
        $makes = $compatibilities->pluck('make')->filter()->unique()->implode(', ') ?: 'BMW';
        $models = $compatibilities->pluck('model')->filter()->unique()->implode(', ') ?: '3-Series, 4-Series, M3, M4';
        $years = $compatibilities
            ->map(function ($compatibility) {
                $from = $compatibility['year_from'] ?? null;
                $to = $compatibility['year_to'] ?? null;

                return $from || $to ? (($from ?? 'Any') . ' - ' . ($to ?? 'Any')) : null;
            })
            ->filter()
            ->unique()
            ->implode(', ') ?: '2012 - 2019';
    @endphp

    <section class="bg-surface-container-low border-b border-outline-variant py-4 relative">
        <div class="absolute inset-0 tech-grid pointer-events-none opacity-20"></div>
        <div class="max-w-container-max mx-auto px-margin-desktop relative z-10">
            <nav class="flex items-center gap-2 text-xs text-on-surface-variant" aria-label="Breadcrumb">
                <a href="{{ route('home') }}" class="hover:text-primary transition-colors flex items-center gap-1 font-medium">
                    <span class="material-symbols-outlined text-[16px]">home</span>
                    Home
                </a>
                <span class="material-symbols-outlined text-[12px] text-slate-400">chevron_right</span>
                <a href="{{ route('services.index') }}" class="hover:text-primary transition-colors font-medium">Repair Services</a>
                <span class="material-symbols-outlined text-[12px] text-slate-400">chevron_right</span>
                <a href="{{ route('services.index', ['category' => $categorySlug]) }}" class="hover:text-primary transition-colors font-medium" id="breadcrumb-category">{{ $category }}</a>
                <span class="material-symbols-outlined text-[12px] text-slate-400">chevron_right</span>
                <span class="text-slate-500 font-semibold" id="breadcrumb-current">{{ data_get($service, 'title') }}</span>
            </nav>
        </div>
    </section>

    <main class="py-12 bg-background relative overflow-hidden">
        <div class="absolute -top-40 -left-40 w-96 h-96 bg-primary/5 rounded-full blur-[120px] pointer-events-none"></div>
        <div class="absolute top-1/2 -right-40 w-96 h-96 bg-blue-600/5 rounded-full blur-[120px] pointer-events-none"></div>

        <div class="max-w-container-max mx-auto px-margin-desktop relative z-10">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-gutter items-start">
                <div class="lg:col-span-7 space-y-6">
                    <div class="relative bg-surface border border-outline-variant rounded-2xl overflow-hidden shadow-lg group">
                        <div class="absolute inset-0 tech-grid pointer-events-none opacity-30"></div>
                        <div class="absolute top-0 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-primary to-transparent animate-scan z-20"></div>

                        <div class="flex items-center justify-center p-6 bg-slate-900/5 min-h-[400px]">
                            <img id="gallery-main-image" src="{{ $gallery[0] ?? asset('theme-ui/assets/images/instrument-cluster.jpg') }}" alt="{{ data_get($service, 'title') }}" class="max-h-[380px] w-auto object-contain transition-all duration-300 rounded-lg"/>
                        </div>

                        <div class="absolute bottom-4 left-4 bg-slate-950/70 backdrop-blur-md px-3 py-1.5 rounded border border-white/10 text-white font-mono text-[9px] tracking-wider uppercase">
                            LAB DIAGNOSTIC SCAN • CALIBRATION PASSED
                        </div>
                    </div>

                    <div class="flex items-center gap-3 flex-wrap" id="gallery-thumbnails">
                        @foreach ($gallery as $index => $image)
                            <button type="button" data-gallery-image="{{ $image }}" class="w-24 h-20 rounded-xl overflow-hidden border {{ $index === 0 ? 'border-primary ring-2 ring-primary/20' : 'border-outline-variant' }} bg-surface hover:border-primary transition-all">
                                <img src="{{ $image }}" alt="{{ data_get($service, 'title') }}" class="w-full h-full object-cover"/>
                            </button>
                        @endforeach
                    </div>
                </div>

                <div class="lg:col-span-5 bg-surface border border-outline-variant rounded-2xl p-8 shadow-lg space-y-6 relative">
                    <div class="flex justify-between items-center">
                        <span id="service-category-badge" class="inline-flex items-center font-label-md text-xs text-primary font-bold bg-primary/10 px-3 py-1 rounded-full border border-primary/20">
                            {{ strtoupper($category) }}
                        </span>
                        <span class="inline-flex items-center gap-1.5 text-[10px] font-bold text-emerald-600 bg-emerald-500/10 border border-emerald-500/20 px-2.5 py-1 rounded-full">
                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
                            ISO 9001 TESTED
                        </span>
                    </div>

                    <div>
                        <h1 id="service-name" class="font-headline-md text-gradient text-3xl font-bold leading-tight">
                            {{ data_get($service, 'title') }}
                        </h1>
                        <p class="text-xs text-on-surface-variant font-medium mt-1">
                            Professional laboratory board-level overhaul service
                        </p>
                    </div>

                    <hr class="border-outline-variant/60"/>

                    <div class="flex items-end justify-between">
                        <div>
                            <span class="text-xs font-bold text-slate-400 uppercase tracking-widest block">Flat Repair Rate</span>
                            <div class="flex items-center gap-2">
                                <span id="service-price" class="text-primary font-display-lg text-4xl font-bold leading-none">${{ number_format((float) data_get($service, 'price', 0), 2) }}</span>
                                <span class="text-body-sm text-on-surface-variant font-semibold">{{ data_get($service, 'currency', 'USD') }}</span>
                            </div>
                        </div>

                        <div class="text-right">
                            <span class="text-xs font-bold text-slate-400 uppercase tracking-widest block">Bench Time</span>
                            <span id="service-turnaround-badge" class="inline-flex items-center gap-1 text-sm bg-surface-container-low text-on-surface-variant font-bold border border-outline-variant px-3 py-1.5 rounded-lg mt-0.5">
                                {{ data_get($service, 'service_days_label', data_get($service, 'turnaround_time')) }}
                            </span>
                        </div>
                    </div>

                    <div class="bg-surface-container-low/40 p-4 rounded-xl border border-outline-variant/60 space-y-3">
                        <div class="flex items-center gap-3 text-body-sm font-semibold text-on-surface">
                            <span class="material-symbols-outlined text-primary text-xl">shield</span>
                            <span>Lifetime Warranty Guarantee</span>
                        </div>
                        <div class="flex items-center gap-3 text-body-sm font-semibold text-on-surface">
                            <span class="material-symbols-outlined text-primary text-xl">autorenew</span>
                            <span>100% Plug-and-Play (Mileage & Keys Retained)</span>
                        </div>
                        <div class="flex items-center gap-3 text-body-sm font-semibold text-on-surface">
                            <span class="material-symbols-outlined text-primary text-xl">local_shipping</span>
                            <span>Free Return Delivery via Tracked DHL</span>
                        </div>
                    </div>

                    <div class="space-y-3">
                        <a id="btn-book-service" href="{{ route('checkout', ['service' => data_get($service, 'slug')]) }}" class="w-full bg-primary text-on-primary font-label-md text-label-md py-5 rounded-xl hover:bg-primary-container transition-all active:scale-95 shadow-md shadow-primary/10 glow-button flex items-center justify-center gap-2 text-center text-base font-bold">
                            <span class="material-symbols-outlined">shopping_cart</span>
                            <span>Book This Repair Service</span>
                        </a>

                        <div class="grid grid-cols-2 gap-3">
                            <a href="{{ route('home') }}#support-inquiry" class="border border-outline-variant hover:border-primary text-on-surface font-label-md py-3 rounded-lg hover:bg-slate-50 transition-all text-center flex items-center justify-center gap-1.5 text-xs font-semibold">
                                <span class="material-symbols-outlined text-base">mail</span>
                                <span>Get Support</span>
                            </a>
                            <button onclick="window.print()" class="border border-outline-variant hover:border-primary text-on-surface font-label-md py-3 rounded-lg hover:bg-slate-50 transition-all text-center flex items-center justify-center gap-1.5 text-xs font-semibold">
                                <span class="material-symbols-outlined text-base">download_2</span>
                                <span>Packing Slip</span>
                            </button>
                        </div>
                    </div>

                    <div class="border-t border-outline-variant/60 pt-4 flex gap-3 items-start text-xs text-on-surface-variant">
                        <span class="material-symbols-outlined text-slate-400">info</span>
                        <div>
                            <span class="font-bold text-on-surface">Are you a repair workshop?</span>
                            Trade customers receive {{ number_format(app(\App\Support\Checkout\CheckoutPricing::class)->tradeDiscountRatePercent(), 2) }}% discount, priority bench queues, and direct engineer hotline. Toggle Trade Account at checkout.
                        </div>
                    </div>
                </div>
            </div>

            <hr class="my-16 border-outline-variant/60"/>

            <div class="grid grid-cols-1 lg:grid-cols-12 gap-gutter">
                <div class="lg:col-span-8 space-y-12">
                    <div class="bg-surface border border-outline-variant rounded-2xl p-8 shadow-sm space-y-6">
                        <h3 class="font-headline-md text-xl font-bold text-gradient flex items-center gap-2">
                            <span class="material-symbols-outlined text-primary text-2xl">troubleshoot</span>
                            Faults & Symptoms Addressed
                        </h3>
                        <p class="text-body-sm text-on-surface-variant leading-relaxed">
                            If your component exhibits any of the following issues, this specific laboratory repair will permanently resolve them. We do not just replace components that are currently failed; we re-engineer known wear points site-wide:
                        </p>

                        @if ($faults->isNotEmpty())
                            <ul class="grid grid-cols-1 md:grid-cols-2 gap-4" id="faults-list">
                                @foreach ($faults as $fault)
                                    <li class="flex items-start gap-3 rounded-xl border border-outline-variant/60 bg-surface-container-low/40 p-4 text-body-sm text-on-surface-variant">
                                        <span class="material-symbols-outlined text-primary text-lg mt-0.5">check_circle</span>
                                        <span>{{ $fault }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        @endif

                        <div class="pt-4 border-t border-outline-variant/40 space-y-3">
                            <h4 class="text-xs font-bold text-slate-500 uppercase tracking-widest">Confirmed Compatible Diagnostic Codes (DTCs)</h4>
                            <div class="flex flex-wrap gap-2" id="dtc-list">
                                <span class="text-xs font-mono bg-slate-100 border border-outline-variant text-slate-600 px-3 py-1 rounded-full">OBD2 DIAGNOSTIC VERIFIED</span>
                            </div>
                        </div>
                    </div>

                    <div class="bg-surface border border-outline-variant rounded-2xl p-8 shadow-sm space-y-6">
                        <h3 class="font-headline-md text-xl font-bold text-gradient flex items-center gap-2">
                            <span class="material-symbols-outlined text-primary text-2xl">science</span>
                            Our Laboratory Process
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-center border-b border-outline-variant/40 pb-6 mb-6">
                            <div class="space-y-2">
                                <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mx-auto text-primary">
                                    <span class="material-symbols-outlined font-bold">microbiology</span>
                                </div>
                                <h4 class="text-sm font-bold text-on-surface">Cleanroom Solder</h4>
                                <p class="text-xs text-on-surface-variant">Class-100 anti-static environments</p>
                            </div>
                            <div class="space-y-2">
                                <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mx-auto text-primary">
                                    <span class="material-symbols-outlined font-bold">device_thermostat</span>
                                </div>
                                <h4 class="text-sm font-bold text-on-surface">Thermal Stressing</h4>
                                <p class="text-xs text-on-surface-variant">Cycling from -20°F to 180°F</p>
                            </div>
                            <div class="space-y-2">
                                <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mx-auto text-primary">
                                    <span class="material-symbols-outlined font-bold">network_node</span>
                                </div>
                                <h4 class="text-sm font-bold text-on-surface">CAN-Bus Emulation</h4>
                                <p class="text-xs text-on-surface-variant">End-to-end active network testing</p>
                            </div>
                        </div>
                        <div id="service-description-text" class="text-body-md text-on-surface-variant leading-relaxed">
                            {!! $description !!}
                        </div>
                    </div>

                    <div class="bg-surface border border-outline-variant rounded-2xl p-8 shadow-sm space-y-6">
                        <h3 class="font-headline-md text-xl font-bold text-gradient flex items-center gap-2">
                            <span class="material-symbols-outlined text-primary text-2xl">rule</span>
                            Vehicle & ECU Compatibility
                        </h3>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div class="border border-outline-variant/60 rounded-xl p-4 bg-surface-container-low/40">
                                <span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1">Manufacturer Make</span>
                                <span id="compat-makes" class="font-body-md text-on-surface font-semibold">{{ $makes }}</span>
                            </div>
                            <div class="border border-outline-variant/60 rounded-xl p-4 bg-surface-container-low/40">
                                <span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1">Compatible Models</span>
                                <span id="compat-models" class="font-body-md text-on-surface font-semibold">{{ $models }}</span>
                            </div>
                            <div class="border border-outline-variant/60 rounded-xl p-4 bg-surface-container-low/40">
                                <span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1">Model Years</span>
                                <span id="compat-years" class="font-body-md text-on-surface font-semibold">{{ $years }}</span>
                            </div>
                        </div>

                        <div class="space-y-3">
                            <h4 class="text-xs font-bold text-slate-500 uppercase tracking-widest">Tested OEM Part Numbers Reference</h4>
                            <div class="flex flex-wrap gap-2" id="compat-parts">
                                <span class="text-xs font-mono bg-slate-100 border border-outline-variant text-slate-600 px-3 py-1 rounded-full">{{ strtoupper(data_get($service, 'slug')) }}</span>
                            </div>
                            <p class="text-[11px] text-on-surface-variant italic">
                                *Note: Even if your specific OEM part number is not listed above, our laboratory engineers can rebuild all variations of this electronic component family.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="lg:col-span-4 space-y-6">
                    <div class="bg-surface border border-outline-variant rounded-2xl p-6 shadow-sm space-y-4">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-emerald-500/10 text-emerald-600 flex items-center justify-center">
                                <span class="material-symbols-outlined font-bold">verified_user</span>
                            </div>
                            <div>
                                <h4 class="text-sm font-bold text-on-surface uppercase tracking-wider">Lifetime Warranty</h4>
                                <p class="text-[10px] text-slate-400 font-semibold">Laboratory Certification Standard</p>
                            </div>
                        </div>
                        <p id="warranty-text-detail" class="text-xs text-on-surface-variant leading-relaxed">
                            {!! data_get($service, 'warranty_text') ?: 'All our automotive electronic laboratory rebuilds come with an industry-leading lifetime warranty on the components replaced.' !!}
                        </p>
                    </div>

                    <div class="bg-surface border border-outline-variant rounded-2xl p-6 shadow-sm space-y-4">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-primary/10 text-primary flex items-center justify-center">
                                <span class="material-symbols-outlined font-bold">alarm</span>
                            </div>
                            <div>
                                <h4 class="text-sm font-bold text-on-surface uppercase tracking-wider">Turnaround Times</h4>
                                <p class="text-[10px] text-slate-400 font-semibold">Average Lab Queue Speeds</p>
                            </div>
                        </div>
                        <p id="turnaround-text-detail" class="text-xs text-on-surface-variant leading-relaxed">
                            {!! data_get($service, 'service_days_label', data_get($service, 'turnaround_time')) !!} standard bench time. Priority express options are selectable at booking checkout.
                        </p>
                    </div>

                    <div class="bg-surface border border-outline-variant rounded-2xl p-6 shadow-sm space-y-4">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-blue-500/10 text-blue-600 flex items-center justify-center">
                                <span class="material-symbols-outlined font-bold">local_shipping</span>
                            </div>
                            <div>
                                <h4 class="text-sm font-bold text-on-surface uppercase tracking-wider">Shipping & Handling</h4>
                                <p class="text-[10px] text-slate-400 font-semibold">Secure Logistics Coverage</p>
                            </div>
                        </div>
                        <p id="shipping-text-detail" class="text-xs text-on-surface-variant leading-relaxed">
                            {!! data_get($service, 'shipping_instructions') ?: 'We provide an inbound shipping label and a secure double-walled packing box as a service addition, or you can self-ship using standard postal codes.' !!}
                        </p>
                    </div>
                </div>
            </div>

            @if ($faqs->isNotEmpty())
                <hr class="my-16 border-outline-variant/60"/>

                <section class="max-w-3xl mx-auto space-y-8">
                    <div class="text-center space-y-2">
                        <h3 class="font-headline-md text-2xl font-bold text-gradient">Frequently Asked Questions</h3>
                        <p class="text-body-sm text-on-surface-variant">Answers to common technical queries about this repair service.</p>
                    </div>

                    <div class="space-y-2" id="faq-accordion-list">
                        @foreach ($faqs as $faq)
                            <div class="border border-outline-variant rounded-xl bg-surface overflow-hidden">
                                <button class="flex justify-between items-center w-full text-left group transition-colors p-5" onclick="this.nextElementSibling.classList.toggle('hidden'); this.querySelector('span:last-child').classList.toggle('rotate-180')">
                                    <span class="font-body-md font-semibold text-on-surface group-hover:text-primary transition-colors">{{ $faq['question'] }}</span>
                                    <span class="material-symbols-outlined transition-transform text-on-surface-variant group-hover:text-primary">expand_more</span>
                                </button>
                                <div class="hidden px-5 pb-5 text-body-sm text-on-surface-variant leading-relaxed">
                                    {{ $faq['answer'] }}
                                </div>
                            </div>
                        @endforeach
                    </div>
                </section>
            @endif

            <hr class="my-16 border-outline-variant/60"/>

            <section class="space-y-8">
                <div>
                    <h3 class="font-headline-md text-2xl font-bold text-gradient text-center lg:text-left">
                        Related Electronics Rebuilds
                    </h3>
                    <p class="text-body-sm text-on-surface-variant text-center lg:text-left">
                        Other laboratory components serviced for this vehicle family or category.
                    </p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-gutter" id="related-services-grid">
                    @foreach (\App\ViewModels\ServiceDetailViewModel::sampleCards() as $related)
                        @continue(data_get($related, 'slug') === data_get($service, 'slug'))
                        <x-storefront.service-card :service="$related" compact />
                    @endforeach
                </div>
            </section>
        </div>
    </main>

    <section class="py-12 bg-background">
        <div class="max-w-container-max mx-auto px-margin-desktop">
            <div class="bg-gradient-to-r from-red-600 to-red-500 text-white rounded-2xl p-8 flex flex-col md:flex-row justify-between items-center gap-8 shadow-xl shadow-primary/10 relative overflow-hidden">
                <div class="absolute inset-0 tech-grid pointer-events-none opacity-[0.2]"></div>
                <div class="absolute inset-0 pointer-events-none opacity-[0.25] z-0">
                    <svg class="w-full h-full" xmlns="http://www.w3.org/2000/svg">
                        <defs>
                            <pattern id="circuit-pattern-detail" width="120" height="120" patternUnits="userSpaceOnUse">
                                <path d="M0 60h40l20-20h30l10 10h20M60 0v40l-20 20v30l10 10v20" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2,2"/>
                                <circle cx="40" cy="60" r="3" fill="none" stroke="white" stroke-width="1.5"/>
                                <circle cx="60" cy="40" r="3" fill="none" stroke="white" stroke-width="1.5"/>
                                <circle cx="90" cy="40" r="3" fill="none" stroke="white" stroke-width="1.5"/>
                                <circle cx="100" cy="50" r="3" fill="none" stroke="white" stroke-width="1.5"/>
                                <circle cx="40" cy="80" r="3" fill="none" stroke="white" stroke-width="1.5"/>
                            </pattern>
                        </defs>
                        <rect width="100%" height="100%" fill="url(#circuit-pattern-detail)"/>
                    </svg>
                </div>
                <div class="absolute -right-10 -bottom-10 w-40 h-40 bg-white/10 rounded-full blur-2xl pointer-events-none"></div>
                <div class="absolute -left-10 -top-10 w-40 h-40 bg-white/10 rounded-full blur-2xl pointer-events-none"></div>
                <div class="flex items-center gap-6 relative z-10">
                    <div class="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center shadow-lg">
                        <span class="material-symbols-outlined text-white text-4xl">help</span>
                    </div>
                    <div>
                        <h3 class="font-headline-sm text-headline-sm font-bold">Not Sure If Your Part Match This Fault?</h3>
                        <p class="text-white/90">Speak to an instrument cluster electronics engineer for a quick diagnostic code verify.</p>
                    </div>
                </div>
                <a href="{{ route('home') }}#support-inquiry" class="bg-white text-slate-900 font-label-md text-label-md px-8 py-4 rounded-lg hover:bg-slate-100 transition-all font-bold relative z-10 active:scale-95 shadow-lg block text-center">
                    Get Free Diagnostics Help
                </a>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const mainImage = document.getElementById('gallery-main-image');

            document.querySelectorAll('[data-gallery-image]').forEach((button) => {
                button.addEventListener('click', () => {
                    if (!mainImage) {
                        return;
                    }

                    mainImage.src = button.dataset.galleryImage;
                    document.querySelectorAll('[data-gallery-image]').forEach((item) => {
                        item.classList.remove('border-primary', 'ring-2', 'ring-primary/20');
                        item.classList.add('border-outline-variant');
                    });
                    button.classList.add('border-primary', 'ring-2', 'ring-primary/20');
                    button.classList.remove('border-outline-variant');
                });
            });
        });
    </script>
@endpush