@extends('layouts.nova.content-layout')

@php
    $page_title = 'Apply to Join the Team';
    $hero_description = "We're always grateful for volunteers who want to help.";
    $center_content = true;
    $center_max = '3xl';
@endphp

@section('page-content')
<div class="max-w-3xl">
    @if(session('success'))
        <div class="mb-4 rounded-lg bg-emerald-800/20 border border-emerald-700 p-4 text-emerald-200">
            {{ session('success') }}
        </div>
    @endif

    <form x-data='{ topic: @json(old('topic','apply')) }' method="POST" action="{{ route('contact.submit') }}" class="space-y-4">
        @csrf

        <div>
            <label class="block text-sm font-medium text-neutral-200">Reason for contact</label>
            <select name="topic" x-model="topic" class="mt-1 block w-full rounded bg-white/2 border border-white/10 p-2 text-white">
                <option value="apply" {{ old('topic') === 'apply' ? 'selected' : '' }}>Apply to join the team</option>
                <option value="bug" {{ old('topic') === 'bug' ? 'selected' : '' }}>Report a bug / site issue</option>
                <option value="contact" {{ old('topic') === 'contact' ? 'selected' : '' }}>General contact / question</option>
                <option value="other" {{ old('topic') === 'other' ? 'selected' : '' }}>Other</option>
            </select>
            @error('topic') <p class="text-rose-400 text-sm mt-1">{{ $message }}</p> @enderror
        </div>

        <div>
            <label class="block text-sm font-medium text-neutral-200">Full name</label>
            <input name="name" value="{{ old('name') }}" class="mt-1 block w-full rounded bg-white/2 border border-white/10 p-2 text-white" required />
            @error('name') <p class="text-rose-400 text-sm mt-1">{{ $message }}</p> @enderror
        </div>

        <div>
            <label class="block text-sm font-medium text-neutral-200">Email</label>
            <input name="email" value="{{ old('email') }}" type="email" class="mt-1 block w-full rounded bg-white/2 border border-white/10 p-2 text-white" required />
            @error('email') <p class="text-rose-400 text-sm mt-1">{{ $message }}</p> @enderror
        </div>

        <div x-show="topic === 'apply'" x-cloak>
            <label class="block text-sm font-medium text-neutral-200">Role you're applying for</label>
            <input name="role" value="{{ old('role') }}" placeholder="e.g. Moderator, Community Manager" class="mt-1 block w-full rounded bg-white/2 border border-white/10 p-2 text-white" />
            @error('role') <p class="text-rose-400 text-sm mt-1">{{ $message }}</p> @enderror
        </div>

        <div x-show="topic === 'apply'" x-cloak>
            <label class="block text-sm font-medium text-neutral-200">Portfolio / profile (optional)</label>
            <input name="portfolio" value="{{ old('portfolio') }}" placeholder="https://" class="mt-1 block w-full rounded bg-white/2 border border-white/10 p-2 text-white" />
            @error('portfolio') <p class="text-rose-400 text-sm mt-1">{{ $message }}</p> @enderror
        </div>

        <div>
            <label class="block text-sm font-medium text-neutral-200">Tell us about yourself</label>
            <textarea name="message" rows="6" class="mt-1 block w-full rounded bg-white/2 border border-white/10 p-2 text-white">{{ old('message') }}</textarea>
            @error('message') <p class="text-rose-400 text-sm mt-1">{{ $message }}</p> @enderror
        </div>

        {{-- Bug-specific fields --}}
        <div x-show="topic === 'bug'" x-cloak>
            <label class="block text-sm font-medium text-neutral-200">Affected URL (optional)</label>
            <input name="affected_url" value="{{ old('affected_url') }}" placeholder="https://" class="mt-1 block w-full rounded bg-white/2 border border-white/10 p-2 text-white" />
            @error('affected_url') <p class="text-rose-400 text-sm mt-1">{{ $message }}</p> @enderror

            <label class="block text-sm font-medium text-neutral-200 mt-3">Steps to reproduce (optional)</label>
            <textarea name="steps" rows="4" class="mt-1 block w-full rounded bg-white/2 border border-white/10 p-2 text-white">{{ old('steps') }}</textarea>
            @error('steps') <p class="text-rose-400 text-sm mt-1">{{ $message }}</p> @enderror
        </div>

        {{-- Honeypot field (hidden from real users) --}}
        <div style="display:none;" aria-hidden="true">
            <label>Website</label>
            <input type="text" name="website" value="" autocomplete="off" />
        </div>

        <div class="flex items-center justify-end">
            <button type="submit" class="inline-flex items-center gap-2 rounded bg-sky-500 px-4 py-2 text-sm font-medium text-white hover:bg-sky-600">Submit</button>
        </div>
    </form>

    <p class="mt-6 text-sm text-neutral-400">By submitting this form you consent to Skinbase storing your application details for review.</p>
</div>
@endsection