@extends('layouts.app')

@section('title', 'For Dealers - RegCompare')

@section('content')
    <div class="bg-base min-h-screen">
        <!-- Hero Section -->
        <div class="relative bg-brand-dark overflow-hidden">
            <div class="absolute inset-0">
                <div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-indigo-900 mix-blend-multiply"></div>
                <!-- Abstract decorative shapes -->
                <div class="absolute -top-24 -right-24 w-96 h-96 rounded-full bg-blue-500 opacity-20 blur-3xl"></div>
                <div class="absolute bottom-0 left-0 w-80 h-80 rounded-full bg-accent opacity-10 blur-3xl"></div>
            </div>

            <div
                class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 sm:py-32 flex flex-col items-center text-center">
                <span
                    class="inline-block py-1 px-3 rounded-full bg-blue-800/50 border border-blue-400/30 text-blue-200 text-sm font-semibold tracking-wide uppercase mb-6 backdrop-blur-sm">
                    Join the UK's Leading Plate Network
                </span>
                <h1 class="text-4xl sm:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
                    Sell More Plates. <br class="hidden sm:block">
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-200 to-white">Reach More
                        Buyers.</span>
                </h1>
                <p class="text-xl text-blue-100 max-w-2xl mb-10 leading-relaxed">
                    RegCompare connects thousands of active buyers with trusted dealers every day.
                    Centralize your stock, automate your pricing, and grow your business with our powerful tools.
                </p>
                <div class="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
                    <a href="{{ route('register') }}"
                        class="px-8 py-4 bg-accent hover:bg-accent-hover text-white font-bold rounded-xl shadow-lg shadow-amber-500/25 transition-all transform hover:-translate-y-1">
                        Apply to Join
                    </a>
                    <a href="#benefits"
                        class="px-8 py-4 bg-white/10 hover:bg-white/20 text-white font-bold rounded-xl backdrop-blur-sm border border-white/10 transition-colors">
                        Learn More
                    </a>
                </div>
            </div>
        </div>

        <!-- Trust Stats -->
        <div class="bg-brand-dark border-t border-white/10">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
                <div
                    class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center divide-y md:divide-y-0 md:divide-x divide-white/10">
                    <div class="p-4">
                        <div class="text-4xl font-bold text-white mb-1">150+</div>
                        <div class="text-blue-200 text-sm font-medium uppercase tracking-wide">Verified Dealers</div>
                    </div>
                    <div class="p-4">
                        <div class="text-4xl font-bold text-white mb-1">50M+</div>
                        <div class="text-blue-200 text-sm font-medium uppercase tracking-wide">Plates Listed</div>
                    </div>
                    <div class="p-4">
                        <div class="text-4xl font-bold text-white mb-1">10k+</div>
                        <div class="text-blue-200 text-sm font-medium uppercase tracking-wide">Daily Searches</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Benefits Section -->
        <div id="benefits" class="py-24 bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center max-w-3xl mx-auto mb-16">
                    <h2 class="text-base font-bold text-brand uppercase tracking-wide mb-2">Why RegCompare?</h2>
                    <h3 class="text-3xl sm:text-4xl font-extrabold text-base-dark">Powerful tools built for modern dealers
                    </h3>
                </div>

                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <!-- Feature 1 -->
                    <div
                        class="bg-gray-50 rounded-2xl p-8 transition-all hover:bg-white hover:shadow-xl hover:-translate-y-1 border border-gray-100">
                        <div class="w-14 h-14 bg-blue-100 rounded-xl flex items-center justify-center mb-6 text-brand">
                            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4">
                                </path>
                            </svg>
                        </div>
                        <h4 class="text-xl font-bold text-base-dark mb-3">Centralized Management</h4>
                        <p class="text-base-subtle">Manage all your stock from one intuitive dashboard. Sync inventory
                            across multiple platforms automatically.</p>
                    </div>

                    <!-- Feature 2 -->
                    <div
                        class="bg-gray-50 rounded-2xl p-8 transition-all hover:bg-white hover:shadow-xl hover:-translate-y-1 border border-gray-100">
                        <div
                            class="w-14 h-14 bg-indigo-100 rounded-xl flex items-center justify-center mb-6 text-indigo-600">
                            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z">
                                </path>
                            </svg>
                        </div>
                        <h4 class="text-xl font-bold text-base-dark mb-3">Market Analytics</h4>
                        <p class="text-base-subtle">Get real-time insights into pricing trends, search volume, and
                            competitor activity to maximize your margins.</p>
                    </div>

                    <!-- Feature 3 -->
                    <div
                        class="bg-gray-50 rounded-2xl p-8 transition-all hover:bg-white hover:shadow-xl hover:-translate-y-1 border border-gray-100">
                        <div class="w-14 h-14 bg-amber-100 rounded-xl flex items-center justify-center mb-6 text-amber-600">
                            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                        </div>
                        <h4 class="text-xl font-bold text-base-dark mb-3">Instant Exposure</h4>
                        <p class="text-base-subtle">Your plates appear instantly in searches performed by thousands of
                            highly intent buyers.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- CTA Section -->
        <div class="relative py-24 bg-base-dark overflow-hidden">
            <!-- Decorative circles -->
            <div class="absolute top-0 right-0 -mr-20 -mt-20 w-80 h-80 rounded-full bg-brand opacity-10 blur-3xl"></div>
            <div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 rounded-full bg-accent opacity-10 blur-3xl"></div>

            <div class="relative max-w-4xl mx-auto px-4 text-center">
                <h2 class="text-3xl sm:text-4xl font-extrabold text-white mb-6">Ready to grow your business?</h2>
                <p class="text-xl text-gray-400 mb-10 max-w-2xl mx-auto">
                    Join the fastest growing registration plate marketplace in the UK today. Application takes less than 2
                    minutes.
                </p>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <a href="{{ route('register') }}"
                        class="px-8 py-4 bg-accent hover:bg-accent-hover text-white font-bold rounded-xl shadow-lg shadow-amber-500/25 transition-all transform hover:-translate-y-1 text-lg">
                        Apply to Join
                    </a>
                </div>
                <p class="mt-6 text-sm text-gray-500">
                    Already a partner? <a href="/admin" class="text-brand hover:text-white transition-colors">Log in to
                        your dashboard</a>
                </p>
            </div>
        </div>
    </div>
@endsection