@extends('layouts.public')

@section('title', 'Contact')

@section('content')
    <x-inner-hero kicker="Contact" title="We would love to hear from you." subtitle="Questions about registration, sponsorship or accessibility? Send us a message." />

    <section class="mesh-light py-14 sm:py-20">
        <div class="mx-auto grid max-w-6xl gap-10 px-4 sm:px-6 lg:grid-cols-[1fr_1.4fr] lg:px-8">
            <div class="space-y-6">
                <div>
                    <p class="section-kicker">E-mail</p>
                    <a class="mt-1 block font-display text-xl font-semibold text-navy-900 hover:text-emerald-600" href="mailto:{{ $event['contact_email'] }}">{{ $event['contact_email'] }}</a>
                </div>
                <div>
                    <p class="section-kicker">Phone</p>
                    <p class="mt-1 font-display text-xl font-semibold text-navy-900">{{ $event['contact_phone'] }}</p>
                </div>
                <div>
                    <p class="section-kicker">Venue</p>
                    <p class="mt-1 font-display text-xl font-semibold text-navy-900">{{ $event['venue'] }}</p>
                    <p class="text-sm text-navy-500"><x-event-dates :event="$event" /></p>
                </div>
            </div>

            <form method="POST" action="{{ route('contact.store') }}" class="surface space-y-5 p-6 sm:p-8" novalidate>
                @csrf
                {{-- Honeypot --}}
                <div class="hidden" aria-hidden="true">
                    <label for="website_url">Leave this empty</label>
                    <input type="text" id="website_url" name="website_url" tabindex="-1" autocomplete="off">
                </div>

                <div class="grid gap-5 sm:grid-cols-2">
                    <div>
                        <label for="name" class="label">Your name</label>
                        <input id="name" name="name" type="text" class="field" value="{{ old('name') }}" required autocomplete="name">
                        <x-input-error :messages="$errors->get('name')" class="mt-1" />
                    </div>
                    <div>
                        <label for="email" class="label">E-mail address</label>
                        <input id="email" name="email" type="email" class="field" value="{{ old('email') }}" required autocomplete="email">
                        <x-input-error :messages="$errors->get('email')" class="mt-1" />
                    </div>
                </div>
                <div>
                    <label for="subject" class="label">Subject</label>
                    <input id="subject" name="subject" type="text" class="field" value="{{ old('subject') }}" required>
                    <x-input-error :messages="$errors->get('subject')" class="mt-1" />
                </div>
                <div>
                    <label for="message" class="label">Message</label>
                    <textarea id="message" name="message" rows="6" class="field" required>{{ old('message') }}</textarea>
                    <x-input-error :messages="$errors->get('message')" class="mt-1" />
                </div>
                <x-input-error :messages="$errors->get('website_url')" />
                <button type="submit" class="btn-primary w-full sm:w-auto">Send message</button>
            </form>
        </div>
    </section>
@endsection