@extends('layouts.app')

@php
    $currencyCode = $currencyCode ?? $siteSettings->get('currency', 'AED');
@endphp

@section('title', 'Services & Starting Rates | Abu Dhabi Auto Care')
@section('meta_description', 'Explore factory-grade car painting from '.$currencyCode.' 1,299, dent repair, ceramic coating, rim refinishing, and mechanical services in Abu Dhabi Mussafah M11.')

@section('content')
<!-- Page Header -->
<section class="py-8 sm:py-10 bg-slate-950 border-b border-slate-800 relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-r from-black via-zinc-950 to-zinc-900 pointer-events-none"></div>
    <div class="site-container relative z-10">
        <div class="max-w-3xl">
            <div class="inline-flex items-center space-x-2 px-2.5 py-1 rounded-lg bg-zinc-900 border border-zinc-700 text-[10px] font-bold text-amber-300 mb-3">
                <span class="w-2 h-2 rounded-full bg-amber-400 animate-pulse"></span>
                <span>{{ __('Specialized Automotive Services') }} • MUSSAFAH M11</span>
            </div>
            <h1 class="text-2xl sm:text-3xl font-black text-white tracking-tight leading-tight">
                {{ __('Specialized Automotive Services') }} & Packages
            </h1>
            <p class="mt-3 text-xs sm:text-sm text-slate-300 leading-relaxed max-w-2xl">
                Explore our transparent starting rates for full-body repainting, panel dent pulling, ceramic thermal bake curing, and wheels refinishing. Every job includes computerized color match and multi-point quality check.
            </p>
        </div>
    </div>
</section>

<!-- Services Catalog & Filter Section -->
<section class="py-8 sm:py-10 bg-slate-950 min-h-[600px]">
    <div class="site-container">
        <!-- Modern Category Tabs -->
        <nav class="flex flex-wrap items-center gap-2 mb-7 pb-4 border-b border-slate-800" aria-label="Service categories">
            @foreach($categories as $key => $title)
                <a href="{{ route('services.index', ['category' => $key]) }}"
                   @class([
                       'px-4 py-2 rounded-xl text-xs font-bold transition duration-200 border',
                       'bg-sky-600 text-white border-sky-500 shadow-lg shadow-sky-600/30' => $selectedCategory === $key,
                       'bg-slate-900 text-slate-300 border-slate-800 hover:border-slate-700 hover:text-white' => $selectedCategory !== $key
                   ])
                   @if($selectedCategory === $key) aria-current="page" @endif>
                    {{ $title }}
                </a>
            @endforeach
        </nav>

        <!-- Services Grid -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            @forelse($services as $service)
                <x-service-card :service="$service" />
            @empty
                <div class="col-span-full py-16 px-6 text-center rounded-3xl bg-slate-900 border border-slate-800">
                    <div class="w-12 h-12 rounded-2xl bg-slate-800 text-slate-400 flex items-center justify-center mx-auto mb-3">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                    </div>
                    <h3 class="text-base font-bold text-white mb-1">No services found in this category</h3>
                    <p class="text-xs text-slate-400 mb-4">Please select another category or view all automotive services.</p>
                    <a href="{{ route('services.index') }}" class="inline-flex items-center px-4 py-2 rounded-xl bg-sky-600 hover:bg-sky-500 text-white font-bold text-xs transition">
                        View All Services ➔
                    </a>
                </div>
            @endforelse
        </div>

        <div class="mt-12 p-6 rounded-2xl bg-slate-900/60 border border-slate-800 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <p class="text-xs text-slate-400 leading-relaxed max-w-2xl">
                <strong class="text-slate-200">Note on Pricing:</strong> All listed prices are baseline starting rates for standard passenger sedans. Final quote is confirmed after surface inspection depending on vehicle class (Coupe, SUV, 4x4), body condition, and custom paint requirements.
            </p>
            <a href="{{ route('orders.create') }}" class="px-5 py-2.5 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs shrink-0 text-center transition">
                Book Free Inspection ➔
            </a>
        </div>
    </div>
</section>

<!-- Video Showcase if configured -->
@if($videoUrl)
<section class="py-16 bg-slate-900 border-t border-slate-800">
    <div class="site-container">
        <div class="max-w-3xl mx-auto text-center mb-10">
            <span class="text-xs font-bold text-sky-400 uppercase tracking-widest block mb-1">BEHIND THE SCENES</span>
            <h2 class="text-2xl sm:text-3xl font-black text-white tracking-tight">{{ $videoTitle }}</h2>
            <p class="text-xs sm:text-sm text-slate-400 mt-2">{{ $videoDesc }}</p>
        </div>

        <div x-data="{ speed: {{ (float) $videoSpeed }} }" class="max-w-4xl mx-auto">
            <div class="rounded-3xl overflow-hidden border border-slate-800 bg-black shadow-2xl">
                <video x-ref="showcase" x-init="$refs.showcase.playbackRate = speed" controls playsinline preload="none" @if($videoMuted) muted @endif @if($videoAutoplay && $videoMuted) autoplay @endif poster="{{ $videoPoster }}" class="w-full object-cover bg-black" style="aspect-ratio: {{ $videoRatio }}">
                    <source src="{{ $videoUrl }}" type="video/mp4">
                    Your browser does not support this video.
                </video>
            </div>
            <div class="flex items-center justify-end gap-2 mt-4 text-xs text-slate-400">
                <label for="playback-speed" class="font-bold">Playback speed:</label>
                <select id="playback-speed" x-model.number="speed" @change="$refs.showcase.playbackRate = speed" class="px-2.5 py-1 rounded-lg bg-slate-950 border border-slate-800 text-white text-xs">
                    <option value="0.5">0.5×</option>
                    <option value="1">1.0× (Normal)</option>
                    <option value="1.5">1.5×</option>
                    <option value="2">2.0×</option>
                </select>
            </div>
        </div>
    </div>
</section>
@endif
@endsection