@props(['settings'])

@php
$defaultFields = [
['label' => 'Full Name', 'name' => 'full_name', 'type' => 'text', 'required' => true],
['label' => 'Email Address', 'name' => 'email', 'type' => 'email', 'required' => true],
['label' => 'Phone Number', 'name' => 'phone', 'type' => 'tel', 'required' => false],
['label' => 'Country', 'name' => 'country', 'type' => 'text', 'required' => true],
['label' => 'Website / Portfolio', 'name' => 'website', 'type' => 'url', 'required' => false],
];
$fields = !empty($settings['signup_fields']) ? $settings['signup_fields'] : $defaultFields;

$user = auth()->user();
@endphp

<div
    class="bg-neutral-900/30 border border-white/5 rounded-[4rem] p-10 lg:p-20 backdrop-blur-3xl shadow-[0_50px_100px_-20px_rgba(0,0,0,0.5)] relative overflow-hidden group">
    {{-- Internal Glow --}}
    <div
        class="absolute -top-24 -right-24 w-96 h-96 bg-indigo-500/5 blur-[100px] rounded-full group-hover:bg-indigo-500/10 transition-colors">
    </div>

    <div class="mb-16 space-y-4 relative z-10">
        <h2 class="text-5xl lg:text-6xl font-black text-white font-bricolage tracking-tight leading-[1.05]">Apply to the
            program</h2>
        <p class="text-text-dim font-medium text-xl leading-relaxed max-w-xl">Join an elite circle of creators and
            developers. Our team reviews all applications within 48 hours.</p>
    </div>

    @if(session('error'))
    <div
        class="mb-12 p-6 bg-red-500/10 border border-red-500/30 rounded-3xl text-red-500 text-[13px] font-black uppercase tracking-widest flex items-center gap-5 animate-slide-in-up">
        <div class="w-12 h-12 rounded-2xl bg-red-500/20 flex items-center justify-center flex-shrink-0">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-alert-circle w-6 h-6">
                <circle cx="12" cy="12" r="10" />
                <line x1="12" x2="12" y1="8" y2="12" />
                <line x1="12" x2="12.01" y1="16" y2="16" />
            </svg>
        </div>
        {{ session('error') }}
    </div>
    @endif

    <form action="{{ route('affiliate.apply') }}" method="POST" class="space-y-12 relative z-10">
        @csrf
        <div class="grid md:grid-cols-2 gap-10">
            @foreach ($fields as $field)
            <div class="{{ $field['type'] === 'textarea' ? 'md:col-span-2' : '' }} space-y-4 group/field">
                <label for="field_{{ $field['name'] }}"
                    class="block text-[11px] font-black uppercase tracking-[0.25em] text-neutral-600 transition-colors group-focus-within/field:text-indigo-400 px-2">
                    {{ $field['label'] }}
                    @if($field['required']) <span class="text-indigo-500/50">*</span> @endif
                </label>

                @php
                $prefill = null;
                if ($user) {
                if ($field['name'] === 'full_name') {
                $prefill = $user->name;
                } elseif ($field['name'] === 'email') {
                $prefill = $user->email;
                } elseif ($field['name'] === 'phone') {
                $prefill = $user->phone;
                } else {
                $prefill = $user->{$field['name']} ?? null;
                }
                }
                @endphp

                <div class="relative">
                    @if($field['type'] === 'textarea')
                    <textarea id="field_{{ $field['name'] }}" name="{{ $field['name'] }}"
                        placeholder="{{ $field['placeholder'] ?? 'Tell us about your audience and how you plan to promote us...' }}"
                        {{ $field['required'] ? 'required' : '' }}
                        class="w-full bg-surface-primary/5 border border-border-subtle rounded-[2rem] py-8 px-8 text-text-base dark:text-white font-bold outline-none focus:border-indigo-500/40 focus:bg-surface-secondary transition-all h-52 resize-none text-lg placeholder:text-text-dim"></textarea>
                    @elseif($field['type'] === 'select')
                    <select id="field_{{ $field['name'] }}" name="{{ $field['name'] }}" {{ $field['required'] ? 'required' : '' }}
                        class="w-full bg-surface-primary/5 border border-border-subtle rounded-[2rem] py-8 px-8 text-text-base dark:text-white font-bold outline-none focus:border-indigo-500/40 focus:bg-surface-secondary transition-all appearance-none cursor-pointer text-lg">
                        @foreach ($field['options'] ?? [] as $option)
                        <option value="{{ $option['value'] }}">{{ $option['label'] }}</option>
                        @endforeach
                    </select>
                    <div class="absolute right-8 top-1/2 -translate-y-1/2 pointer-events-none text-neutral-600">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                                d="M19 9l-7 7-7-7" />
                        </svg>
                    </div>
                    @else
                    <input id="field_{{ $field['name'] }}" type="{{ $field['type'] }}" name="{{ $field['name'] }}"
                        placeholder="{{ $field['placeholder'] ?? '' }}" {{ $field['required'] ? 'required' : '' }}
                        value="{{ old($field['name'], $prefill) }}"
                        class="w-full bg-surface-primary/5 border border-border-subtle rounded-[2rem] py-8 px-8 text-text-base dark:text-white font-bold outline-none focus:border-indigo-500/40 focus:bg-surface-secondary transition-all text-lg placeholder:text-text-dim">
                    @endif
                </div>

                @error($field['name'])
                <p class="mt-3 text-[11px] font-black text-red-500 uppercase tracking-widest px-2 animate-bounce">{{
                    $message }}</p>
                @enderror
            </div>
            @endforeach
        </div>

        <div class="pt-12">
            <button type="submit"
                class="w-full py-8 bg-white text-black rounded-[2.5rem] font-black uppercase tracking-[0.3em] text-[15px] shadow-[0_20px_50px_-10px_rgba(255,255,255,0.2)] transition-all hover:bg-neutral-100 hover:scale-[1.02] hover:-translate-y-2 active:scale-95">
                Submit Application
            </button>
                <p
                class="mt-10 text-center text-[11px] text-text-dim font-black uppercase tracking-[0.2em] leading-relaxed max-w-lg mx-auto">
                By submitting, you agree to our <a href="{{ $settings['terms_url'] ?? '#' }}"
                    class="text-text-dim hover:text-text-base dark:hover:text-white transition-colors underline underline-offset-8 decoration-indigo-500/30">Terms
                    of
                    Service</a> and <a href="#"
                    class="text-text-dim hover:text-text-base dark:hover:text-white transition-colors underline underline-offset-8 decoration-indigo-500/30">Privacy
                    Policy</a>
            </p>
        </div>
    </form>
</div>