{{--
    Contact form (PRD §19). States: empty → validation (inline, on blur/submit) → loading (button disabled) →
    success (panel replaces the form) / error (with direct-email fallback). Status is announced via aria-live.
    Works as a normal POST without JS (old input preserved, flash messages shown).
--}}
@inject('settings', 'App\Domain\Site\Settings\ContactSettings')
@inject('captchaFactory', 'App\Domain\Engagement\Contact\Captcha\CaptchaFactory')
@php
    $captcha = $captchaFactory->make();
    $success = session('contact.success');
    $failure = session('contact.error');
@endphp
<div id="contact-form" data-module="contact-form" class="scroll-mt-24">
    <div data-contact-status role="status" aria-live="polite" tabindex="-1" class="focus:outline-none">
        @if ($success)
            <div class="rounded-[var(--radius-card)] border border-success bg-surface p-6">
                <p class="flex items-start gap-3 font-semibold text-success"><x-icon name="heroicon-o-check-circle" class="size-6 shrink-0" />{{ $success }}</p>
            </div>
        @endif
        @if ($failure)
            <div class="rounded-[var(--radius-card)] border border-error bg-surface p-6">
                <p class="flex items-start gap-3 font-semibold text-error"><x-icon name="heroicon-o-exclamation-triangle" class="size-6 shrink-0" />{{ $failure }}</p>
                @if ($settings->public_email)<p class="mt-2"><a href="mailto:{{ $settings->public_email }}">{{ $settings->public_email }}</a></p>@endif
            </div>
        @endif
    </div>

    <template data-contact-success>
        <div class="rounded-[var(--radius-card)] border border-success bg-surface p-6">
            <p class="flex items-start gap-3 font-semibold text-success"><x-icon name="heroicon-o-check-circle" class="size-6 shrink-0" /><span data-message></span></p>
        </div>
    </template>
    <template data-contact-error>
        <div class="rounded-[var(--radius-card)] border border-error bg-surface p-6">
            <p class="flex items-start gap-3 font-semibold text-error"><x-icon name="heroicon-o-exclamation-triangle" class="size-6 shrink-0" /><span data-message></span></p>
            @if ($settings->public_email)<p class="mt-2"><a href="mailto:{{ $settings->public_email }}">{{ $settings->public_email }}</a></p>@endif
        </div>
    </template>

    @unless ($success)
        <form method="POST" action="{{ route('contact.store') }}" novalidate class="mt-2 space-y-5" data-contact-form
              data-error-message="{{ $settings->error_message }}"
              data-msg-required="{{ __('portfolio.form.error_required') }}" data-msg-format="{{ __('portfolio.form.error_format') }}"
              data-msg-short="{{ __('portfolio.form.error_short') }}" data-msg-linkedin="{{ __('portfolio.form.error_linkedin') }}"
              @if ($captcha->siteKey()) data-captcha-key="{{ $captcha->siteKey() }}" data-captcha-script="{{ $captcha->scriptUrl() }}" @endif>
            @csrf
            <x-honeypot />

            <div class="grid gap-5 md:grid-cols-2">
                @include('partials.forms.field', ['name' => 'name', 'label' => __('portfolio.form.name'), 'required' => true, 'autocomplete' => 'name'])
                @include('partials.forms.field', ['name' => 'email', 'label' => __('portfolio.form.email'), 'type' => 'email', 'required' => true, 'autocomplete' => 'email'])
            </div>
            @include('partials.forms.field', ['name' => 'subject', 'label' => __('portfolio.form.subject'), 'required' => true])
            <div class="grid gap-5 md:grid-cols-2">
                @include('partials.forms.field', ['name' => 'company', 'label' => __('portfolio.form.company'), 'autocomplete' => 'organization'])
                @if ($settings->opportunity_types !== [])
                    @include('partials.forms.field', ['name' => 'opportunity_type', 'label' => __('portfolio.form.opportunity_type'), 'options' => $settings->opportunity_types])
                @endif
            </div>
            @include('partials.forms.field', ['name' => 'linkedin_url', 'label' => __('portfolio.form.linkedin_url'), 'type' => 'url', 'placeholder' => __('portfolio.form.linkedin_placeholder')])
            @include('partials.forms.field', ['name' => 'message', 'label' => __('portfolio.form.message'), 'required' => true, 'textarea' => true])

            <input type="hidden" name="captcha_token" value="" data-captcha-token>
            @if ($captcha->siteKey() && str_contains((string) $captcha->scriptUrl(), 'turnstile'))
                <div class="cf-turnstile" data-sitekey="{{ $captcha->siteKey() }}" data-response-field-name="captcha_token"></div>
            @endif

            <div class="flex flex-wrap items-center gap-4">
                <x-button type="submit" variant="primary" data-contact-submit>
                    <svg data-spinner class="hidden size-4 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-opacity="0.3" stroke-width="3"/><path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>
                    <span>{{ __('portfolio.form.send') }}</span>
                </x-button>
                <p class="text-sm text-muted"><span aria-hidden="true">*</span> {{ __('portfolio.form.required_note') }}</p>
            </div>
            @if ($settings->privacy_note)
                <p class="text-sm text-muted">{{ $settings->privacy_note }}</p>
            @endif
        </form>
    @endunless
</div>