<div>
    @if ($sent)
        <div class="ec-surface rounded-2xl p-8 text-center flex flex-col gap-3" role="status" aria-live="polite">
            <span class="ec-accent mx-auto inline-flex items-center justify-center w-14 h-14 rounded-full border">
                <x-website.icon name="check" class="w-7 h-7" />
            </span>
            <p class="font-semibold text-lg">{{ $successMessage ?: __('تم استلام رسالتك بنجاح') }}</p>
            <button type="button" wire:click="$set('sent', false)" class="ec-accent text-sm underline mx-auto">
                {{ __('إرسال رسالة أخرى') }}
            </button>
        </div>
    @else
        <form wire:submit="submit" class="flex flex-col gap-4">
            {{-- Honeypot: visually hidden, never announced to assistive tech. --}}
            <div class="hidden" aria-hidden="true">
                <label>{{ __('اترك هذا الحقل فارغًا') }}
                    <input type="text" wire:model="website" tabindex="-1" autocomplete="off">
                </label>
            </div>

            <div class="grid sm:grid-cols-2 gap-4">
                <div class="flex flex-col gap-1.5">
                    <label for="cf-name-{{ $blockId }}" class="text-sm font-medium">{{ __('الاسم') }} <span aria-hidden="true">*</span></label>
                    <input id="cf-name-{{ $blockId }}" type="text" wire:model="name" required
                           class="rounded-xl border px-4 py-3 focus:outline-none focus:ring-2"
                           @error('name') aria-invalid="true" aria-describedby="cf-name-err-{{ $blockId }}" @enderror>
                    @error('name') <p id="cf-name-err-{{ $blockId }}" class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="flex flex-col gap-1.5">
                    <label for="cf-email-{{ $blockId }}" class="text-sm font-medium">{{ __('البريد الإلكتروني') }} <span aria-hidden="true">*</span></label>
                    <input id="cf-email-{{ $blockId }}" type="email" wire:model="email" required dir="ltr"
                           class="rounded-xl border px-4 py-3 focus:outline-none focus:ring-2"
                           @error('email') aria-invalid="true" @enderror>
                    @error('email') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>

            @if ($showPhone)
                <div class="flex flex-col gap-1.5">
                    <label for="cf-phone-{{ $blockId }}" class="text-sm font-medium">
                        {{ __('رقم الهاتف') }} @if ($requirePhone) <span aria-hidden="true">*</span> @endif
                    </label>
                    <input id="cf-phone-{{ $blockId }}" type="tel" wire:model="phone" dir="ltr"
                           @if ($requirePhone) required @endif
                           class="rounded-xl border px-4 py-3 focus:outline-none focus:ring-2">
                    @error('phone') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
            @endif

            @if ($showSubject)
                <div class="flex flex-col gap-1.5">
                    <label for="cf-subject-{{ $blockId }}" class="text-sm font-medium">{{ __('الموضوع') }}</label>
                    <input id="cf-subject-{{ $blockId }}" type="text" wire:model="subject"
                           class="rounded-xl border px-4 py-3 focus:outline-none focus:ring-2">
                    @error('subject') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
            @endif

            <div class="flex flex-col gap-1.5">
                <label for="cf-message-{{ $blockId }}" class="text-sm font-medium">{{ __('رسالتك') }} <span aria-hidden="true">*</span></label>
                <textarea id="cf-message-{{ $blockId }}" wire:model="message" rows="5" required
                          class="rounded-xl border px-4 py-3 focus:outline-none focus:ring-2"></textarea>
                @error('message') <p class="text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <button type="submit" wire:loading.attr="disabled" wire:target="submit"
                    class="ec-btn ec-btn--primary rounded-full px-8 py-3.5 font-semibold transition self-start">
                <span wire:loading.remove wire:target="submit">{{ $submitLabel ?: __('إرسال') }}</span>
                <span wire:loading wire:target="submit">{{ __('جارٍ الإرسال...') }}</span>
            </button>
        </form>
    @endif
</div>
