<div class="bg-white shadow-sm rounded-lg overflow-hidden">
    <div class="p-6 sm:p-8">

        {{-- Success Message --}}
        @if($showSuccessMessage)
            <div class="mb-6 rounded-md bg-green-50 border border-green-200 p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <div class="text-sm text-green-800">
                            <p class="font-medium">{{ __('Message sent') }}</p>
                            <p class="mt-1">{{ __('We received your message successfully and will get back to you shortly!') }}</p>
                        </div>
                    </div>
                    <div class="ml-auto pl-3">
                        <button
                            type="button"
                            wire:click="$set('showSuccessMessage', false)"
                            class="inline-flex rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none transition">
                            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        @endif

        {{-- Contact Form --}}
        <form wire:submit.prevent="submitForm">
            <div class="grid grid-cols-6 gap-6">
                <div class="col-span-6 sm:col-span-4 space-y-6">

                    {{-- Name Field (only shown when not authenticated) --}}
                    @guest
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                {{ __('Name') }}
                            </label>
                            <x-input
                                wire:model="name"
                                type="text"
                                placeholder="{{ __('Your full name') }}"
                                class="w-full"
                            />
                        </div>

                        {{-- Email Field (only shown when not authenticated) --}}
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                {{ __('Email') }}
                            </label>
                            <x-input
                                wire:model="email"
                                type="email"
                                placeholder="{{ __('your.email@example.com') }}"
                                class="w-full"
                            />
                        </div>
                    @endguest

                    {{-- Subject Field (optional, shown for certain contexts) --}}
                    @if(in_array($context, ['contact', 'report-issue']))
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                {{ __('Subject') }}
                            </label>
                            <x-input
                                wire:model="subject"
                                type="text"
                                placeholder="{{ __('Brief description of your message') }}"
                                class="w-full"
                            />
                        </div>
                    @endif

                    {{-- URL Field (for error reporting only) --}}
                    @if($context === 'report-error')
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                {{ __('Page URL') }}
                            </label>
                            <x-input
                                wire:model="url"
                                type="url"
                                placeholder="{{ __('URL where the error occurred') }}"
                                class="w-full"
                            />
                            <p class="mt-1 text-xs text-gray-500">
                                {{ __('Copy and paste the web address from your browser.') }}
                            </p>
                        </div>
                    @endif

                    {{-- Message Field --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            {{ __('Message') }}
                        </label>
                        <x-textarea
                            wire:model="message"
                            rows="6"
                            placeholder="{{ __('Please provide as much detail as possible...') }}"
                            class="w-full"
                        />
                        <p class="mt-1 text-xs text-gray-500">
                            {{ __('Minimum 10 characters') }}
                        </p>
                    </div>

                    {{-- Context-specific info boxes --}}
                    @if($context === 'delete-profile')
                        <div class="p-3 bg-yellow-50 rounded-md border border-yellow-200">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm text-yellow-800">
                                        <strong>{{ __('Important') }}:</strong> {{ __('Profile deletion is permanent and cannot be undone. All your data will be removed from our system.') }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if($context === 'report-error')
                        <div class="p-3 bg-gray-50 rounded-md border border-gray-300">
                            <p class="text-sm text-gray-700">
                                <strong>{{ __('Tip') }}:</strong> {{ __('Include details like what you were trying to do, what happened, and any error messages you saw.') }}
                            </p>
                        </div>
                    @endif

                </div>
            </div>

            {{-- Submit Button --}}
            <div class="text-right mt-6">
                <x-button
                    type="submit"
                    primary
                    class="bg-theme-brand hover:bg-opacity-80"
                    wire:loading.attr="disabled"
                    wire:target="submitForm"
                >
                    <span wire:loading.remove wire:target="submitForm">
                        {{ $this->submitButtonText }}
                    </span>
                    <span wire:loading wire:target="submitForm" class="flex items-center">
                        <svg class="animate-spin -ml-1 mr-2 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        {{ __('Sending...') }}
                    </span>
                </x-button>
            </div>

        </form>

    </div>
</div>
