@extends('layouts.app')
@section('title', 'Contact')

@section('content')
<section class="bg-ink py-16 text-white">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <x-section-heading eyebrow="Contact" title="Talk to the NCA team" :dark="true" />
    </div>
</section>

<section class="mx-auto grid max-w-7xl gap-10 px-4 py-16 sm:px-6 lg:grid-cols-3 lg:px-8">
    <div class="space-y-4">
        <div class="card p-6"><p class="eyebrow">Email</p><a href="mailto:{{ config('nca.email') }}" class="mt-1 block font-semibold text-navy">{{ config('nca.email') }}</a></div>
        <div class="card p-6"><p class="eyebrow">Phone</p><p class="mt-1 font-semibold text-navy">{{ config('nca.phone') }}</p></div>
        <div class="card p-6"><p class="eyebrow">Awards website</p><a href="{{ config('nca.awards_site') }}" rel="noopener" class="mt-1 block font-semibold text-navy">novaexcellenceawards.org</a></div>
    </div>

    <form method="POST" action="{{ route('contact.send') }}" class="card space-y-5 p-8 lg:col-span-2">
        @csrf
        {{-- honeypot --}}
        <input type="text" name="website" tabindex="-1" autocomplete="off" class="hidden" aria-hidden="true">

        <div class="grid gap-5 sm:grid-cols-2">
            <div>
                <label class="label" for="name">Full name</label>
                <input class="field" id="name" name="name" value="{{ old('name') }}" required>
                @error('name')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="label" for="email">Email</label>
                <input class="field" id="email" name="email" type="email" value="{{ old('email') }}" required>
                @error('email')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
            </div>
        </div>
        <div>
            <label class="label" for="topic">Topic</label>
            <select class="field" id="topic" name="topic" required>
                @foreach (['membership' => 'Membership', 'sponsorship' => 'Sponsorship', 'partnership' => 'Partnership', 'nominations' => 'Awards nominations', 'other' => 'Something else'] as $v => $l)
                    <option value="{{ $v }}" @selected(old('topic', request('topic')) === $v)>{{ $l }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="label" for="message">Message</label>
            <textarea class="field" id="message" name="message" rows="5" required>{{ old('message') }}</textarea>
            @error('message')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
        </div>
        <button class="btn btn-blue">Send message</button>
    </form>
</section>
@endsection