@extends('layouts.public')
@section('title', 'Contact Us | Anywhere Phone Repair')
@section('content')
<div class="bg-zinc-50 py-16 flex-1">
    <div class="container mx-auto px-4 max-w-2xl">
        <h1 class="text-3xl md:text-5xl font-black text-zinc-900 mb-4 tracking-tight text-center">Contact Us</h1>
        <p class="text-zinc-500 font-medium mb-12 text-center text-lg">Have a question? We'd love to hear from you.</p>

        @if(session('success'))
            <div class="bg-green-50 text-green-700 p-4 rounded-xl mb-6 text-sm font-bold border border-green-200 text-center">
                {{ session('success') }}
            </div>
        @endif

        <div class="bg-white rounded-3xl border border-zinc-200 p-8 shadow-sm">
            <form action="{{ route('public.contact.submit') }}" method="POST" class="space-y-6">
                @csrf
                <div>
                    <label class="block text-sm font-bold text-zinc-900 mb-2">Name</label>
                    <input type="text" name="name" class="w-full bg-zinc-50 border border-zinc-200 rounded-xl px-4 py-3 focus:outline-none focus:border-primary font-medium" required>
                </div>
                <div>
                    <label class="block text-sm font-bold text-zinc-900 mb-2">Email</label>
                    <input type="email" name="email" class="w-full bg-zinc-50 border border-zinc-200 rounded-xl px-4 py-3 focus:outline-none focus:border-primary font-medium" required>
                </div>
                <div>
                    <label class="block text-sm font-bold text-zinc-900 mb-2">Message</label>
                    <textarea name="message" rows="5" class="w-full bg-zinc-50 border border-zinc-200 rounded-xl px-4 py-3 focus:outline-none focus:border-primary font-medium" required></textarea>
                </div>
                <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-black py-4 px-6 rounded-xl transition-colors shadow-lg shadow-primary/20 text-lg">
                    Send Message
                </button>
            </form>
        </div>
    </div>
</div>
@endsection