@extends($site->themeView('layout'))

{{-- Contact page (every site): optional introduction from the "contact" page, then the form. No ads on this page. --}}
@section('content')
    @php($value = fn ($field) => $old[$field] ?? '')
    <div class="container-site max-w-5xl py-10 md:py-14">
        @include($site->themeView('partials.breadcrumbs'))
        <div class="mt-6 grid gap-10 lg:grid-cols-[minmax(0,1fr)_300px]">
            <div class="min-w-0">
                <h1 class="text-3xl font-black tracking-tight text-ink md:text-5xl">{{ __('contact.title') }}</h1>
                <p class="mt-3 max-w-2xl text-lg text-slate-600">{{ __('contact.intro', ['site' => $site->name]) }}</p>

                @if ($sent)
                    <div class="card mt-8 flex items-start gap-4 p-6" role="status">
                        <span class="grid size-11 shrink-0 place-items-center rounded-full bg-emerald-100 text-emerald-700"><x-site.icon name="check" class="size-6" /></span>
                        <div>
                            <p class="text-lg font-bold text-ink">{{ __('contact.sent_title') }}</p>
                            <p class="mt-1 text-slate-600">{{ __('contact.sent_text') }}</p>
                            <a href="{{ lpath('/') }}" class="btn mt-4 bg-brand text-white hover:brightness-110">{{ __('contact.back_home') }}</a>
                        </div>
                    </div>
                @else
                    <form method="post" action="{{ $action }}" class="card mt-8 space-y-5 p-5 sm:p-7" novalidate data-contact-form>
                        @if ($errors->has('form'))<p class="rounded-xl bg-rose-50 p-3 text-sm font-medium text-rose-800" role="alert">{{ $errors->first('form') }}</p>@endif
                        @if ($errors->any() && ! $errors->has('form'))<p class="rounded-xl bg-rose-50 p-3 text-sm font-medium text-rose-800" role="alert">{{ __('contact.fix_errors') }}</p>@endif
                        <input type="hidden" name="t" value="{{ $token }}">
                        {{-- Honeypot: invisible to people, filled in by bots. --}}
                        <div class="absolute -start-[9999px] h-px w-px overflow-hidden" aria-hidden="true">
                            <label>Website <input type="text" name="website" tabindex="-1" autocomplete="off"></label>
                        </div>

                        <div class="grid gap-5 sm:grid-cols-2">
                            <div>
                                <label for="c-name" class="label">{{ __('contact.name') }} <span class="text-rose-600" aria-hidden="true">*</span></label>
                                <input id="c-name" name="name" type="text" required maxlength="100" autocomplete="name" value="{{ $value('name') }}" class="field" @error('name') aria-invalid="true" aria-describedby="c-name-error" @enderror>
                                @error('name')<p id="c-name-error" class="mt-1 text-sm text-rose-600">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label for="c-email" class="label">{{ __('contact.email') }} <span class="text-rose-600" aria-hidden="true">*</span></label>
                                <input id="c-email" name="email" type="email" required maxlength="190" autocomplete="email" inputmode="email" value="{{ $value('email') }}" class="field" @error('email') aria-invalid="true" aria-describedby="c-email-error" @enderror>
                                @error('email')<p id="c-email-error" class="mt-1 text-sm text-rose-600">{{ $message }}</p>@enderror
                            </div>
                        </div>
                        <div>
                            <label for="c-subject" class="label">{{ __('contact.subject') }} <span class="text-sm font-normal text-slate-500">({{ __('contact.optional') }})</span></label>
                            <input id="c-subject" name="subject" type="text" maxlength="150" value="{{ $value('subject') }}" class="field" @error('subject') aria-invalid="true" @enderror>
                            @error('subject')<p class="mt-1 text-sm text-rose-600">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label for="c-message" class="label">{{ __('contact.message') }} <span class="text-rose-600" aria-hidden="true">*</span></label>
                            <textarea id="c-message" name="message" rows="7" required minlength="10" maxlength="5000" class="field" data-contact-count @error('message') aria-invalid="true" aria-describedby="c-message-error" @enderror>{{ $value('message') }}</textarea>
                            <p class="mt-1 flex justify-between gap-3 text-xs text-slate-500"><span>{{ __('contact.message_help') }}</span><span data-contact-counter class="tabular-nums"></span></p>
                            @error('message')<p id="c-message-error" class="mt-1 text-sm text-rose-600">{{ $message }}</p>@enderror
                        </div>
                        <label class="flex items-start gap-3 text-sm text-slate-600">
                            <input type="checkbox" name="consent" value="1" required class="mt-0.5 size-4 shrink-0 rounded accent-[var(--brand)]" @checked($value('consent'))>
                            <span>{{ __('contact.consent', ['site' => $site->name]) }}</span>
                        </label>
                        @error('consent')<p class="-mt-3 text-sm text-rose-600">{{ $message }}</p>@enderror
                        <div class="flex flex-wrap items-center gap-4">
                            <button class="btn bg-brand px-6 py-3 text-base text-white hover:brightness-110" data-contact-submit><x-site.icon name="arrow" class="size-4" /> {{ __('contact.send') }}</button>
                            <p class="text-xs text-slate-500">{{ __('contact.required_note') }}</p>
                        </div>
                    </form>
                @endif

                @if ($intro)
                    <div class="prose-site mt-10">{!! $intro !!}</div>
                @endif
            </div>

            <aside class="space-y-4">
                <div class="card p-5">
                    <p class="flex items-center gap-2 font-bold text-ink"><x-site.icon name="clock" class="size-5 text-brand" /> {{ __('contact.reply_title') }}</p>
                    <p class="mt-2 text-sm text-slate-600">{{ __('contact.reply_text') }}</p>
                </div>
                <div class="card p-5">
                    <p class="flex items-center gap-2 font-bold text-ink"><x-site.icon name="shield" class="size-5 text-brand" /> {{ __('contact.privacy_title') }}</p>
                    <p class="mt-2 text-sm text-slate-600">{{ __('contact.privacy_text') }}</p>
                </div>
            </aside>
        </div>
    </div>

    <script>
        // Character counter and double-submit guard (the form works without JavaScript).
        (() => {
            const form = document.querySelector('[data-contact-form]');
            if (!form) return;
            const area = form.querySelector('[data-contact-count]');
            const counter = form.querySelector('[data-contact-counter]');
            const update = () => (counter.textContent = `${area.value.length} / 5000`);
            area.addEventListener('input', update);
            update();
            form.addEventListener('submit', () => {
                const button = form.querySelector('[data-contact-submit]');
                setTimeout(() => (button.disabled = true), 0);
            });
        })();
    </script>
@endsection