@extends('layouts.app')

@section('title', 'Contact Us - RegCompare')

@section('content')
    <div class="bg-base min-h-screen py-12 px-4 sm:px-6 lg:px-8 flex items-center justify-center">
        <div class="max-w-6xl w-full bg-white rounded-3xl shadow-2xl overflow-hidden grid grid-cols-1 md:grid-cols-2">

            <!-- Left Column: Form -->
            <div class="p-8 sm:p-12 lg:p-16">
                <div class="uppercase tracking-wide text-sm text-brand font-bold mb-2">Get in Touch</div>
                <h1 class="text-3xl font-extrabold text-base-dark mb-4">Send us a Message</h1>
                <p class="text-base-subtle mb-8">Have a question about a plate or need help with your search? Fill out the
                    form below and our team will get back to you.</p>

                @if (session('success'))
                    <div class="mb-8 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-xl relative flex items-center shadow-sm"
                        role="alert">
                        <svg class="h-5 w-5 text-green-500 mr-3" 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>
                        <span class="block sm:inline font-bold">{{ session('success') }}</span>
                    </div>
                @endif

                <form method="POST" action="{{ route('contact.store') }}" class="space-y-6">
                    @csrf

                    <!-- Honeypot Field (Hidden) -->
                    <div class="hidden">
                        <label for="username_honey">Username</label>
                        <input type="text" name="username_honey" id="username_honey" tabindex="-1" autocomplete="off">
                    </div>

                    <div>
                        <label for="name" class="block text-sm font-bold text-base-dark mb-2">Full Name</label>
                        <input type="text" name="name" id="name" required
                            class="block w-full rounded-xl border-gray-200 shadow-sm focus:border-brand focus:ring-brand sm:text-sm px-4 py-3 bg-gray-50 transition-all hover:bg-white"
                            value="{{ old('name') }}" placeholder="e.g. Alex Smith">
                        @error('name')
                            <p class="mt-1 text-sm text-red-600 font-medium">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="email" class="block text-sm font-bold text-base-dark mb-2">Email Address</label>
                        <input type="email" name="email" id="email" required
                            class="block w-full rounded-xl border-gray-200 shadow-sm focus:border-brand focus:ring-brand sm:text-sm px-4 py-3 bg-gray-50 transition-all hover:bg-white"
                            value="{{ old('email') }}" placeholder="e.g. alex@example.com">
                        @error('email')
                            <p class="mt-1 text-sm text-red-600 font-medium">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="message" class="block text-sm font-bold text-base-dark mb-2">How can we help?</label>
                        <textarea name="message" id="message" rows="4" required
                            class="block w-full rounded-xl border-gray-200 shadow-sm focus:border-brand focus:ring-brand sm:text-sm px-4 py-3 bg-gray-50 transition-all hover:bg-white resize-none"
                            placeholder="Tell us about the registration you're looking for...">{{ old('message') }}</textarea>
                        @error('message')
                            <p class="mt-1 text-sm text-red-600 font-medium">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="pt-4">
                        <button type="submit"
                            class="w-full flex justify-center py-4 px-6 border border-transparent rounded-xl shadow-lg text-base font-bold text-white bg-accent hover:bg-accent-hover focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all transform hover:-translate-y-0.5">
                            Send Message
                        </button>
                    </div>
                </form>
            </div>

            <!-- Right Column: Info -->
            <div
                class="bg-brand-dark p-8 sm:p-12 lg:p-16 text-white relative overflow-hidden flex flex-col justify-between">
                <!-- Decorative Shapes -->
                <div class="absolute top-0 right-0 -mr-20 -mt-20 w-80 h-80 rounded-full bg-blue-600 opacity-20 blur-3xl">
                </div>
                <div
                    class="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 rounded-full bg-indigo-600 opacity-20 blur-3xl">
                </div>

                <div class="relative z-10">
                    <h2 class="text-3xl font-extrabold mb-8">Contact Information</h2>

                    <div class="space-y-8">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 bg-white/10 p-3 rounded-lg">
                                <svg class="h-6 w-6 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-bold text-white">Visit Us</h3>
                                <p class="mt-1 text-blue-100">
                                    RegCompare HQ<br>
                                    123 Number Plate Lane<br>
                                    Automotive District, London<br>
                                    SW1A 1AA
                                </p>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <div class="flex-shrink-0 bg-white/10 p-3 rounded-lg">
                                <svg class="h-6 w-6 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                </svg>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-bold text-white">Email Us</h3>
                                <p class="mt-1 text-blue-100">
                                    General: hello@regcompare.com<br>
                                    Support: support@regcompare.com
                                </p>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <div class="flex-shrink-0 bg-white/10 p-3 rounded-lg">
                                <svg class="h-6 w-6 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                                </svg>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-bold text-white">Call Us</h3>
                                <p class="mt-1 text-blue-100">
                                    +44 (0) 20 1234 5678<br>
                                    <span class="text-sm opacity-75">Mon-Fri: 9am - 6pm</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="relative z-10 mt-12 pt-8 border-t border-blue-800">
                    <h3 class="text-lg font-bold text-white mb-4">Connect With Us</h3>
                    <div class="flex space-x-4">
                        <a href="#"
                            class="bg-white/10 p-2 rounded-lg hover:bg-accent hover:text-white transition-colors">
                            <span class="sr-only">Twitter</span>
                            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                                <path
                                    d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
                            </svg>
                        </a>
                        <a href="#"
                            class="bg-white/10 p-2 rounded-lg hover:bg-accent hover:text-white transition-colors">
                            <span class="sr-only">LinkedIn</span>
                            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                                <path fill-rule="evenodd"
                                    d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"
                                    clip-rule="evenodd" />
                            </svg>
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection