@extends('layouts.app')

@section('title', 'Compare Car Registration Plate Prices - RegCompare')

@section('content')
    <div class="relative overflow-hidden bg-base">
        <!-- Hero Background Shape -->
        <div class="absolute inset-0 z-0 opacity-30 pointer-events-none">
            <div class="absolute -top-[30%] -right-[10%] w-[800px] h-[800px] rounded-full bg-blue-100/50 blur-3xl"></div>
            <div class="absolute top-[20%] -left-[10%] w-[600px] h-[600px] rounded-full bg-indigo-100/50 blur-3xl"></div>
        </div>

        <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 sm:py-32">
            <div class="text-center">
                <h1 class="text-4xl sm:text-6xl font-bold tracking-tight text-base-dark mb-6">
                    Find the Perfect Plate <br />
                    <span class="text-brand">at the Best Price</span>
                </h1>
                <p class="mt-4 text-xl text-base-subtle max-w-2xl mx-auto mb-10">
                    Compare prices from top UK registration plate dealers in seconds. Smart search, live pricing, and
                    verified dealers.
                </p>

                <!-- Search/Action Box -->
                <div class="max-w-3xl mx-auto bg-white rounded-2xl shadow-xl border border-gray-100 p-2 sm:p-4">
                    <form action="{{ route('search.redirect') }}" method="POST" class="flex flex-col sm:flex-row gap-2">
                        @csrf
                        <div class="flex-grow">
                            <label for="search" class="sr-only">Search for a plate</label>
                            <input type="text" name="search" id="search"
                                placeholder="Enter name, initials or numbers..."
                                class="w-full px-5 py-4 bg-gray-50 border-0 rounded-xl text-base-dark placeholder-gray-400 focus:ring-2 focus:ring-brand focus:bg-white transition-all text-lg"
                                required />
                        </div>
                        <button type="submit"
                            class="px-8 py-4 bg-accent hover:bg-accent-hover text-white font-bold rounded-xl shadow-lg shadow-amber-500/30 transition-all duration-200 transform hover:scale-[1.02]">
                            Search Plates
                        </button>
                    </form>
                </div>

                <div class="mt-8 flex justify-center gap-6 text-sm text-base-subtle">
                    <div class="flex items-center">
                        <svg class="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                        <span>Free to use</span>
                    </div>
                    <div class="flex items-center">
                        <svg class="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                        <span>Verified Dealers</span>
                    </div>
                    <div class="flex items-center">
                        <svg class="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                        <span>Daily Updates</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Features Section -->
    <div class="bg-white py-24">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
                <!-- Feature 1 -->
                <div class="bg-base p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
                    <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-6 text-brand">
                        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-base-dark mb-3">Smart Search</h3>
                    <p class="text-base-subtle">Our intelligent algorithm finds the best matches for your name or initials
                        across thousands of plates.</p>
                </div>

                <!-- Feature 2 -->
                <div class="bg-base p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
                    <div class="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center mb-6 text-indigo-600">
                        <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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
                            </path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-base-dark mb-3">Price Comparison</h3>
                    <p class="text-base-subtle">We compare prices from leading dealers to ensure you get the absolute best
                        deal
                        on your new plate.</p>
                </div>

                <!-- Feature 3 -->
                <div class="bg-base p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
                    <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mb-6 text-green-600">
                        <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-base-dark mb-3">Trusted Dealers</h3>
                    <p class="text-base-subtle">We only list plates from DVLA recognised resellers and trusted independent
                        dealers.</p>
                </div>
            </div>
        </div>
    </div>
@endsection