@extends('layouts.app')

@section('title', 'Automotive Transformation Gallery | Abu Dhabi Auto Care')
@section('meta_description', 'Browse real car painting, color change, rim restoration, and detailing projects completed in our Mussafah M11 workshop in Abu Dhabi.')

@section('content')
<!-- Page Heading -->
<section class="py-14 bg-gradient-to-b from-slate-900 to-slate-950 border-b border-slate-800">
    <div class="site-container">
        <div class="flex items-center space-x-2 text-xs text-sky-400 font-semibold mb-3">
            <a href="{{ route('home') }}" class="hover:underline">Home</a>
            <span>/</span>
            <span class="text-slate-300">Workshop Gallery</span>
        </div>
        <div class="max-w-3xl">
            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-sky-500/10 text-sky-400 border border-sky-500/20 mb-3">
                REAL VEHICLES • REAL RESULTS
            </span>
            <h1 class="text-3xl sm:text-5xl font-black text-white tracking-tight leading-tight">
                Craftsmanship You Can See with Your Own Eyes
            </h1>
            <p class="text-slate-400 text-sm sm:text-base mt-4 leading-relaxed">
                Explore real vehicles refinished and restored inside our Mussafah M11 workshop. From deep mirror clear-coats to radical custom color transformations.
            </p>
        </div>
    </div>
</section>

<!-- Gallery Filter & Grid -->
<section class="py-16 bg-slate-950">
    <div class="site-container">
        <div class="flex flex-wrap items-center justify-between gap-4 mb-8">
            <div class="flex items-center space-x-2 text-xs text-slate-400">
                <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
                <span>German Thermal Cured Lacquer Refinishing</span>
            </div>
            <a href="https://wa.me/971545143060?text={{ urlencode('Hello Abu Dhabi Auto Care, here is a photo of my car. Can you give me an estimate?') }}" target="_blank" class="px-4 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs transition flex items-center">
                <span>Send Car Photo on WhatsApp for Quote ➔</span>
            </a>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @forelse($galleryItems as $item)
                <figure class="rounded-3xl bg-slate-900 border border-slate-800 overflow-hidden hover:border-sky-500/40 transition duration-300 shadow-xl group flex flex-col justify-between">
                    <div class="relative overflow-hidden aspect-[4/3] bg-slate-950">
                        <img class="w-full h-full object-cover group-hover:scale-105 transition duration-500"
                             src="{{ $item->url }}"
                             alt="{{ $item->alt_text ?: $item->title }}"
                             width="800"
                             height="600"
                             loading="lazy">
                        <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent opacity-70"></div>
                        <span class="absolute top-3 left-3 px-3 py-1 rounded-full bg-slate-950/80 backdrop-blur text-sky-400 text-[10px] font-bold border border-slate-800">
                            Mussafah M11 Project
                        </span>
                    </div>
                    <figcaption class="p-6">
                        <h3 class="text-sm sm:text-base font-bold text-white group-hover:text-sky-300 transition">{{ $item->title }}</h3>
                        <p class="text-xs text-slate-400 mt-1 line-clamp-2">{{ $item->alt_text ?: 'Factory German paint and multi-stage mirror clear coat finish.' }}</p>
                        <div class="mt-4 pt-3 border-t border-slate-800/80 flex items-center justify-between">
                            <span class="text-[11px] text-amber-400 font-semibold">German Paint Quality</span>
                            <a href="{{ route('orders.create') }}" class="text-xs text-sky-400 hover:underline font-bold">
                                Get Similar Finish ➔
                            </a>
                        </div>
                    </figcaption>
                </figure>
            @empty
                <div class="col-span-full p-12 text-center bg-slate-900 rounded-3xl border border-slate-800">
                    <span class="text-xs font-bold text-sky-400 uppercase tracking-widest block mb-2">PORTFOLIO DATABASE</span>
                    <h2 class="text-xl font-bold text-white">High-Resolution Showcase</h2>
                    <p class="text-slate-400 text-xs mt-2 max-w-md mx-auto">
                        Speak directly with our master painters or visit our workshop to see live vehicles in our spray booths.
                    </p>
                    <a href="{{ route('orders.create') }}" class="mt-4 inline-block px-5 py-2.5 rounded-xl bg-sky-600 text-white text-xs font-bold shadow-lg">
                        Request Workshop Quotation ➔
                    </a>
                </div>
            @endforelse
        </div>

        <div class="mt-10">
            {{ $galleryItems->links() }}
        </div>
    </div>
</section>

<!-- Call to Action -->
<section class="py-14 bg-gradient-to-r from-sky-900 via-blue-900 to-indigo-950 text-white border-t border-slate-800 text-center">
    <div class="site-container max-w-3xl">
        <h2 class="text-2xl sm:text-3xl font-black">Want to See How Your Car Would Look?</h2>
        <p class="text-xs sm:text-sm text-sky-200 mt-2">
            Send us your current color and preferred new color code on WhatsApp for digital consultation and an instant quote.
        </p>
        <div class="mt-6 flex flex-wrap items-center justify-center gap-3">
            <a href="{{ route('orders.create') }}" class="px-6 py-3 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs shadow-xl transition">
                Book Service Online ➔
            </a>
            <a href="https://wa.me/971545143060?text={{ urlencode('Hello Abu Dhabi Auto Care, I saw your gallery and want to paint my car.') }}" target="_blank" class="px-6 py-3 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs shadow-xl transition">
                WhatsApp +971 54 514 3060
            </a>
        </div>
    </div>
</section>
@endsection