@extends('layouts.app')
@section('title', 'Services & Pricing | Abu Dhabi Auto Care')
@section('content')
<section class="page-heading site-container"><span class="eyebrow accent">THE RIGHT CARE, ALL IN ONE PLACE</span><h1>Built around your car.</h1><p>Explore our services and starting prices. Your final quotation is confirmed after an assessment.</p></section>
<section class="site-container pb-20">
    <nav class="filter-tabs" aria-label="Service categories">@foreach($categories as $key => $title)<a href="{{ route('services.index', ['category' => $key]) }}" @class(['filter-tab', 'selected' => $selectedCategory === $key]) @if($selectedCategory === $key) aria-current="page" @endif>{{ $title }}</a>@endforeach</nav>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">@forelse($services as $service)<x-service-card :service="$service" />@empty<div class="empty-state"><h2>No services in this category yet.</h2><a href="{{ route('services.index') }}" class="text-link">Explore all services →</a></div>@endforelse</div>
    <p class="muted mt-8 text-sm">Prices are starting rates. Vehicle size, condition, parts and finish may affect the final quote. See each service for available packages.</p>
</section>
@if($videoUrl)
<section class="workshop-section section-space"><div class="site-container"><div class="section-heading"><div><span class="eyebrow accent">BEHIND THE SCENES</span><h2>{{ $videoTitle }}</h2></div><p>{{ $videoDesc }}</p></div>
    <div x-data="{ speed: {{ (float) $videoSpeed }} }" class="max-w-4xl mx-auto">
        <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 rounded-xl bg-black" style="aspect-ratio: {{ $videoRatio }}">
            <source src="{{ $videoUrl }}" type="video/mp4">Your browser does not support this video.
        </video>
        <div class="field mt-4 max-w-48"><label for="playback-speed">Playback speed</label><select id="playback-speed" x-model.number="speed" @change="$refs.showcase.playbackRate = speed"><option value="0.5">0.5×</option><option value="1">Normal</option><option value="1.5">1.5×</option><option value="2">2×</option></select></div>
    </div>
</div></section>
@endif
@endsection