<x-site-layout title="Become a Contributor">

    {{-- ===================================================================
         HERO
    =================================================================== --}}
    <section class="relative bg-gradient-to-r from-violet-600 to-purple-700 py-16 overflow-hidden">
        <div class="absolute inset-0 bg-black opacity-10"></div>
        {{-- Decorative circles --}}
        <div class="absolute -top-10 -right-10 w-64 h-64 bg-white opacity-5 rounded-full"></div>
        <div class="absolute -bottom-16 -left-10 w-80 h-80 bg-white opacity-5 rounded-full"></div>

        <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <span class="inline-block px-4 py-1 bg-white bg-opacity-20 rounded-full text-white text-sm font-medium mb-4">
                <i class="fas fa-pen-nib mr-1"></i> Contributor Registration
            </span>
            <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">Become a Contributor</h1>
            <p class="text-purple-100 text-lg max-w-5xl mx-auto">
                Share your knowledge, spark meaningful discussions, and connect with health professionals across the SSHIA community.
            </p>

            {{-- Benefit bullets --}}
            <div class="flex flex-wrap justify-center gap-x-8 gap-y-2 mt-8 text-sm text-purple-100">
                <span><i class="fas fa-check-circle mr-1 text-purple-300"></i> Start Discussions</span>
                <span><i class="fas fa-check-circle mr-1 text-purple-300"></i> Share Expertise</span>
                <span><i class="fas fa-check-circle mr-1 text-purple-300"></i> Build Connections</span>
                <span><i class="fas fa-check-circle mr-1 text-purple-300"></i> Track Your Impact</span>
            </div>
        </div>
    </section>

    {{-- Breadcrumb --}}
    <div class="bg-gray-50 border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
            <nav class="flex items-center space-x-2 text-sm text-gray-600" aria-label="Breadcrumb">
                <a href="{{ url('/') }}" class="hover:text-violet-600 transition flex items-center">
                    <i class="fas fa-home mr-1"></i>Home
                </a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <span class="text-gray-500">Register</span>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <span class="text-gray-900 font-medium">Become a Contributor</span>
            </nav>
        </div>
    </div>

    {{-- ===================================================================
         INSTANT-ACCESS NOTICE BANNER
    =================================================================== --}}
    <div class="bg-emerald-50 border-b border-emerald-200">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center gap-2 text-sm text-emerald-800">
            <i class="fas fa-bolt text-emerald-500"></i>
            <strong>Instant Access</strong> — Your contributor account is activated immediately after registration. No approval required.
        </div>
    </div>

    {{-- ===================================================================
         FORM
    =================================================================== --}}
    <section class="py-12 bg-gray-50">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">

            {{-- Flash errors --}}
            @if(session('error'))
                <div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl flex items-center gap-2">
                    <i class="fas fa-exclamation-circle flex-shrink-0"></i>
                    <span>{{ session('error') }}</span>
                </div>
            @endif

            @if($errors->any())
                <div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl">
                    <p class="font-medium flex items-center gap-2">
                        <i class="fas fa-exclamation-triangle"></i> Please fix the errors below before continuing.
                    </p>
                </div>
            @endif

            <form action="{{ route('register.role.contributor.store') }}" method="POST" class="space-y-6">
                @csrf

                {{-- -------------------------------------------------------
                     SECTION 1 — Personal Information
                ------------------------------------------------------- --}}
                <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
                    <div class="bg-gray-50 px-6 py-4 border-b border-gray-100">
                        <h2 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-user text-violet-600"></i> Personal Information
                        </h2>
                    </div>
                    <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-5">

                        {{-- First Name --}}
                        <div>
                            <label for="first_name" class="block text-sm font-medium text-gray-700 mb-1">
                                First Name <span class="text-red-500">*</span>
                            </label>
                            <input type="text" id="first_name" name="first_name"
                                   value="{{ old('first_name') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition"
                                   placeholder="First name" required>
                            @error('first_name')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Last Name --}}
                        <div>
                            <label for="last_name" class="block text-sm font-medium text-gray-700 mb-1">
                                Last Name <span class="text-red-500">*</span>
                            </label>
                            <input type="text" id="last_name" name="last_name"
                                   value="{{ old('last_name') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition"
                                   placeholder="Last name" required>
                            @error('last_name')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Email --}}
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">
                                Email Address <span class="text-red-500">*</span>
                            </label>
                            <input type="email" id="email" name="email"
                                   value="{{ old('email') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition"
                                   placeholder="your@email.com" required>
                            @error('email')
                                <p class="mt-1 text-sm text-red-600">{!! $message !!}</p>
                            @enderror
                        </div>

                        {{-- Phone --}}
                        <div>
                            <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">
                                Phone Number
                            </label>
                            <input type="tel" id="phone" name="phone"
                                   value="{{ old('phone') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition"
                                   placeholder="+256 7XX XXX XXX">
                            @error('phone')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                    </div>
                </div>

                {{-- -------------------------------------------------------
                     SECTION 2 — Contributor Profile
                ------------------------------------------------------- --}}
                <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
                    <div class="bg-gray-50 px-6 py-4 border-b border-gray-100">
                        <h2 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-briefcase text-violet-600"></i> Contributor Profile
                            <span class="ml-auto text-xs font-normal text-gray-400">Optional — helps us personalise your experience</span>
                        </h2>
                    </div>
                    <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-5">

                        {{-- Occupation --}}
                        <div>
                            <label for="occupation" class="block text-sm font-medium text-gray-700 mb-1">Occupation</label>
                            <input type="text" id="occupation" name="occupation"
                                   value="{{ old('occupation') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition"
                                   placeholder="e.g. Public Health Officer">
                            @error('occupation')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Organization --}}
                        <div>
                            <label for="organization" class="block text-sm font-medium text-gray-700 mb-1">Organization / Institution</label>
                            <input type="text" id="organization" name="organization"
                                   value="{{ old('organization') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition"
                                   placeholder="Where you work or study">
                            @error('organization')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Contribution Type --}}
                        <div>
                            <label for="contribution_type" class="block text-sm font-medium text-gray-700 mb-1">
                                Primary Contribution Type
                            </label>
                            <select id="contribution_type" name="contribution_type"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition bg-white">
                                <option value="">-- Select type --</option>
                                <option value="discussions" {{ old('contribution_type') === 'discussions' ? 'selected' : '' }}>Discussions &amp; Debates</option>
                                <option value="research" {{ old('contribution_type') === 'research' ? 'selected' : '' }}>Research &amp; Analysis</option>
                                <option value="case_studies" {{ old('contribution_type') === 'case_studies' ? 'selected' : '' }}>Case Studies</option>
                                <option value="news" {{ old('contribution_type') === 'news' ? 'selected' : '' }}>Health News &amp; Updates</option>
                                <option value="education" {{ old('contribution_type') === 'education' ? 'selected' : '' }}>Health Education</option>
                                <option value="other" {{ old('contribution_type') === 'other' ? 'selected' : '' }}>Other</option>
                            </select>
                            @error('contribution_type')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Portfolio / Website --}}
                        <div>
                            <label for="portfolio_url" class="block text-sm font-medium text-gray-700 mb-1">Portfolio / Website</label>
                            <input type="url" id="portfolio_url" name="portfolio_url"
                                   value="{{ old('portfolio_url') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition"
                                   placeholder="https://yourwebsite.com">
                            @error('portfolio_url')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Bio --}}
                        <div class="md:col-span-2">
                            <label for="bio" class="block text-sm font-medium text-gray-700 mb-1">
                                Short Bio
                                <span class="text-gray-400 font-normal">(max 500 characters)</span>
                            </label>
                            <textarea id="bio" name="bio" rows="3"
                                      maxlength="500"
                                      class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition resize-none"
                                      placeholder="Tell the community a little about yourself and your areas of expertise...">{{ old('bio') }}</textarea>
                            @error('bio')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                    </div>
                </div>

                {{-- -------------------------------------------------------
                     SECTION 3 — Location
                ------------------------------------------------------- --}}
                <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
                    <div class="bg-gray-50 px-6 py-4 border-b border-gray-100">
                        <h2 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-map-marker-alt text-violet-600"></i> Location
                            <span class="ml-auto text-xs font-normal text-gray-400">Optional</span>
                        </h2>
                    </div>
                    <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-5">

                        <div>
                            <label for="city" class="block text-sm font-medium text-gray-700 mb-1">City</label>
                            <input type="text" id="city" name="city"
                                   value="{{ old('city') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition"
                                   placeholder="City">
                            @error('city')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="country" class="block text-sm font-medium text-gray-700 mb-1">Country</label>
                            <input type="text" id="country" name="country"
                                   value="{{ old('country') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition"
                                   placeholder="Country">
                            @error('country')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                    </div>
                </div>

                {{-- -------------------------------------------------------
                     SECTION 4 — Account Security
                ------------------------------------------------------- --}}
                <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
                    <div class="bg-gray-50 px-6 py-4 border-b border-gray-100">
                        <h2 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-lock text-violet-600"></i> Account Security
                        </h2>
                    </div>
                    <div class="p-6">
                        @include('registration._partials.password-fields', ['color' => 'violet'])
                    </div>
                </div>

                {{-- -------------------------------------------------------
                     SECTION 5 — Terms & Conditions
                ------------------------------------------------------- --}}
                <div class="bg-white rounded-2xl shadow-sm p-6">
                    <label class="flex items-start gap-3 cursor-pointer">
                        <input type="checkbox" name="terms_accepted" value="1"
                               class="mt-1 h-4 w-4 text-violet-600 border-gray-300 rounded focus:ring-violet-500"
                               {{ old('terms_accepted') ? 'checked' : '' }} required>
                        <span class="text-sm text-gray-600">
                            I agree to the
                            <a href="{{ route('pages.terms') }}" class="text-violet-600 hover:underline" target="_blank">Terms and Conditions</a>
                            and
                            <a href="{{ route('pages.privacy') }}" class="text-violet-600 hover:underline" target="_blank">Privacy Policy</a>.
                            I understand that as a contributor I am responsible for the content I publish on the platform.
                            <span class="text-red-500">*</span>
                        </span>
                    </label>
                    @error('terms_accepted')
                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- -------------------------------------------------------
                     BOTTOM NAV
                ------------------------------------------------------- --}}
                @include('registration._partials.bottom-nav', [
                    'color'       => 'violet',
                    'submitLabel' => 'Create Contributor Account',
                ])

            </form>
        </div>
    </section>

</x-site-layout>
