@extends('layouts.app')

@section('title', 'About RegCompare - Your Hub for UK Registration Plates')

@section('content')
    <div class="bg-base min-h-screen">
        <!-- Hero Section -->
        <div class="relative bg-brand-dark overflow-hidden">
            <div class="absolute inset-0">
                <img class="w-full h-full object-cover opacity-20"
                    src="https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"
                    alt="Luxury car detail">
                <div class="absolute inset-0 bg-brand-dark/80 mix-blend-multiply"></div>
            </div>
            <div class="relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8 text-center sm:text-left">
                <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">About RegCompare</h1>
                <p class="mt-6 text-xl text-blue-100 max-w-3xl">
                    Seamlessly search for UK car registration plates across data from multiple dealers, large and small.
                </p>
            </div>
        </div>

        <!-- Content Section -->
        <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8">
            <div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center">
                <div>
                    <h2 class="text-3xl font-extrabold text-base-dark sm:text-4xl mb-6">
                        Aggregating the UK's Best Plates
                    </h2>
                    <p class="text-lg text-base-subtle mb-8 leading-relaxed">
                        RegCompare was built with a simple mission: to simplify the search for private number plates.
                        Instead of visiting dozens of individual dealer websites, we bring the market to you.
                    </p>

                    <div class="space-y-8">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <div
                                    class="flex items-center justify-center h-12 w-12 rounded-xl bg-brand text-white shadow-md">
                                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <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" />
                                    </svg>
                                </div>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg leading-6 font-bold text-base-dark">Unified Search</h3>
                                <p class="mt-2 text-base text-base-subtle">
                                    One search bar, thousands of results. We aggregate inventory from trusted dealers across
                                    the UK.
                                </p>
                            </div>
                        </div>

                        <div class="flex">
                            <div class="flex-shrink-0">
                                <div
                                    class="flex items-center justify-center h-12 w-12 rounded-xl bg-brand text-white shadow-md">
                                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <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" />
                                    </svg>
                                </div>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg leading-6 font-bold text-base-dark">Verified Dealers</h3>
                                <p class="mt-2 text-base text-base-subtle">
                                    We only list plates from reputable sources, ensuring your purchase via our partners is
                                    secure and legitimate.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-12 lg:mt-0">
                    <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-8 sm:p-10">
                        <h3 class="text-2xl font-bold text-base-dark mb-6">Why Use RegCompare?</h3>
                        <ul class="space-y-4 text-base-subtle mb-8">
                            <li class="flex items-start">
                                <svg class="h-6 w-6 text-green-500 mr-3 flex-shrink-0" 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>Save time by searching one central database.</span>
                            </li>
                            <li class="flex items-start">
                                <svg class="h-6 w-6 text-green-500 mr-3 flex-shrink-0" 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>Compare prices directly from different sellers.</span>
                            </li>
                            <li class="flex items-start">
                                <svg class="h-6 w-6 text-green-500 mr-3 flex-shrink-0" 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>Access to exclusive inventory from small boutique dealers.</span>
                            </li>
                        </ul>
                        <div>
                            <a href="{{ route('home') }}"
                                class="block w-full text-center bg-accent hover:bg-accent-hover border border-transparent rounded-xl py-4 px-6 text-base font-bold text-white transition-all transform hover:scale-[1.02] shadow-lg shadow-amber-500/20">
                                Start Searching
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection