@extends('storefront.layout')

@section('title', 'Retail Partner Sign Up')
@section('description', 'Apply to become a Vida Mansa retail partner in the United States.')

@push('head')
    <style>
        .vm-application-grid {
            background-image:
                linear-gradient(rgba(28, 25, 23, 0.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(28, 25, 23, 0.035) 1px, transparent 1px);
            background-size: 32px 32px;
        }

        .vm-application-number {
            font-variant-numeric: tabular-nums;
        }

        .vm-application-section {
            animation: vm-application-enter 420ms ease-out both;
        }

        .vm-application-section:nth-of-type(2) { animation-delay: 50ms; }
        .vm-application-section:nth-of-type(3) { animation-delay: 100ms; }
        .vm-application-section:nth-of-type(4) { animation-delay: 150ms; }
        .vm-application-section:nth-of-type(5) { animation-delay: 200ms; }

        @keyframes vm-application-enter {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (prefers-reduced-motion: reduce) {
            .vm-application-section { animation: none; }
        }
    </style>
@endpush

@section('content')
<section class="vm-application-grid relative overflow-hidden bg-[#f4f2eb]">
    <div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-emerald-700/50 to-transparent"></div>
    <div class="pointer-events-none absolute -left-24 top-48 h-72 w-72 rounded-full bg-[#ffd400]/15 blur-3xl"></div>
    <div class="pointer-events-none absolute -right-28 top-24 h-80 w-80 rounded-full bg-emerald-700/10 blur-3xl"></div>

    <div class="relative mx-auto max-w-7xl px-4 py-10 sm:px-6 sm:py-14 lg:px-8 lg:py-20">
        <div class="mb-8 flex flex-wrap items-center justify-between gap-4 lg:mb-10">
            <div class="flex items-center gap-3 text-xs font-semibold uppercase tracking-[0.18em] text-stone-500">
                <span class="h-px w-8 bg-emerald-700"></span>
                Wholesale partner application
            </div>
            <a href="{{ route('login') }}"
               class="inline-flex min-h-11 items-center gap-2 rounded-full border border-stone-300 bg-white/80 px-4 py-2 text-sm font-semibold text-stone-700 shadow-sm backdrop-blur transition hover:border-emerald-700 hover:text-emerald-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-600 focus-visible:ring-offset-2">
                Already registered? Sign in
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/>
                </svg>
            </a>
        </div>

        <div class="grid items-start gap-6 lg:grid-cols-[minmax(0,0.72fr)_minmax(0,1.28fr)] lg:gap-8">
            <aside class="relative overflow-hidden rounded-[2rem] bg-[#073d2e] p-7 text-white shadow-[0_30px_90px_rgba(6,78,59,0.25)] sm:p-9 lg:sticky lg:top-28 lg:p-10">
                <div class="absolute inset-0 opacity-20" style="background-image:radial-gradient(circle at 85% 12%,#ffd400 0,transparent 26%),linear-gradient(135deg,transparent 55%,rgba(255,255,255,.14) 55%,transparent 56%)"></div>
                <div class="relative">
                    <div class="flex items-center justify-between gap-4">
                        <span class="rounded-full border border-white/20 bg-white/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.2em] text-emerald-50">Become a Retail Partner</span>
                        <span class="vm-application-number font-mono text-xs text-white/45">VM / USA</span>
                    </div>

                    <h1 class="mt-8 max-w-md text-4xl font-semibold leading-[1.05] tracking-[-0.035em] sm:text-5xl lg:text-[3.55rem]">
                        Bring better pet hydration to your shelves.
                    </h1>
                    <p class="mt-6 max-w-lg text-base leading-7 text-emerald-50/75">
                        Tell us about your business so our team can understand your store, review the partnership, and prepare the right wholesale relationship.
                    </p>

                    <div class="mt-10 border-t border-white/15 pt-7">
                        <p class="text-xs font-semibold uppercase tracking-[0.18em] text-[#ffd400]">What happens next</p>
                        <ol class="mt-5 space-y-5">
                            <li class="flex gap-4">
                                <span class="vm-application-number flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-white/20 bg-white/10 text-xs font-bold">01</span>
                                <div>
                                    <p class="font-semibold text-white">Email verification</p>
                                    <p class="mt-1 text-sm leading-6 text-emerald-50/65">Use the secure link we send to confirm that this business email belongs to you.</p>
                                </div>
                            </li>
                            <li class="flex gap-4">
                                <span class="vm-application-number flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-white/20 bg-white/10 text-xs font-bold">02</span>
                                <div>
                                    <p class="font-semibold text-white">Application review</p>
                                    <p class="mt-1 text-sm leading-6 text-emerald-50/65">After verification, our team reviews your business profile and any optional document or storefront photo.</p>
                                </div>
                            </li>
                            <li class="flex gap-4">
                                <span class="vm-application-number flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-white/20 bg-white/10 text-xs font-bold">03</span>
                                <div>
                                    <p class="font-semibold text-white">Decision and access</p>
                                    <p class="mt-1 text-sm leading-6 text-emerald-50/65">We email the decision. Once approved, sign in with the email and password you create here.</p>
                                </div>
                            </li>
                        </ol>
                    </div>

                    <div class="mt-9 rounded-2xl border border-[#ffd400]/30 bg-[#ffd400]/10 p-4 text-sm leading-6 text-yellow-50/85">
                        <div class="flex items-start gap-3">
                            <svg class="mt-0.5 h-5 w-5 shrink-0 text-[#ffd400]" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"/>
                            </svg>
                            <p>Submitting this form does not activate purchasing access automatically. Every new partnership is reviewed by our administration.</p>
                        </div>
                    </div>
                </div>
            </aside>

            <div class="overflow-hidden rounded-[2rem] border border-stone-200/90 bg-white shadow-[0_28px_90px_rgba(28,25,23,0.12)]">
                @if (session('verification_error'))
                    <div class="flex min-h-[36rem] flex-col items-center justify-center px-6 py-16 text-center sm:px-12" role="alert">
                        <div class="relative flex h-24 w-24 items-center justify-center rounded-full bg-rose-50">
                            <span class="absolute inset-2 rounded-full border border-dashed border-rose-300"></span>
                            <svg class="relative h-11 w-11 text-rose-700" fill="none" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/>
                            </svg>
                        </div>
                        <p class="mt-8 text-xs font-semibold uppercase tracking-[0.22em] text-rose-700">Verification link unavailable</p>
                        <h2 class="mt-3 max-w-xl text-3xl font-semibold tracking-tight text-stone-950 sm:text-4xl">We could not verify this email link.</h2>
                        <p class="mt-5 max-w-xl text-base leading-7 text-stone-600">{{ session('verification_error') }}</p>
                        <div class="mt-9 flex flex-wrap justify-center gap-3">
                            <a href="{{ route('storefront.contact') }}" class="inline-flex min-h-11 items-center justify-center rounded-xl bg-emerald-700 px-5 py-3 text-sm font-semibold text-white transition hover:bg-emerald-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-600 focus-visible:ring-offset-2">Contact our team</a>
                            <a href="{{ route('storefront.home') }}" class="inline-flex min-h-11 items-center justify-center rounded-xl border border-stone-300 bg-white px-5 py-3 text-sm font-semibold text-stone-700 transition hover:border-stone-400 hover:bg-stone-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-600 focus-visible:ring-offset-2">Return home</a>
                        </div>
                    </div>
                @elseif (session('status'))
                    <div class="flex min-h-[36rem] flex-col items-center justify-center px-6 py-16 text-center sm:px-12" role="status">
                        <div class="relative flex h-24 w-24 items-center justify-center rounded-full bg-emerald-50">
                            <span class="absolute inset-2 rounded-full border border-dashed border-emerald-300"></span>
                            <svg class="relative h-11 w-11 text-emerald-700" fill="none" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <p class="mt-8 text-xs font-semibold uppercase tracking-[0.22em] text-emerald-700">{{ session('application_verified') ? 'Email verified' : 'Application received' }}</p>
                        <h2 class="mt-3 max-w-xl text-3xl font-semibold tracking-tight text-stone-950 sm:text-4xl">{{ session('application_verified') ? 'Your application is now with our team.' : 'Check your inbox to finish your application.' }}</h2>
                        <p class="mt-5 max-w-xl text-base leading-7 text-stone-600">{{ session('status') }}</p>
                        <div class="mt-8 h-1 w-20 rounded-full bg-[#ffd400]"></div>
                        <div class="mt-9 flex flex-wrap justify-center gap-3">
                            <a href="{{ route('storefront.home') }}" class="inline-flex min-h-11 items-center justify-center rounded-xl bg-emerald-700 px-5 py-3 text-sm font-semibold text-white transition hover:bg-emerald-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-600 focus-visible:ring-offset-2">Return home</a>
                            <a href="{{ route('storefront.catalog') }}" class="inline-flex min-h-11 items-center justify-center rounded-xl border border-stone-300 bg-white px-5 py-3 text-sm font-semibold text-stone-700 transition hover:border-stone-400 hover:bg-stone-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-600 focus-visible:ring-offset-2">Browse products</a>
                        </div>
                    </div>
                @else
                    <div class="border-b border-stone-200 bg-stone-50/70 px-6 py-7 sm:px-9 sm:py-8">
                        <p class="text-xs font-semibold uppercase tracking-[0.2em] text-emerald-700">Partner dossier</p>
                        <div class="mt-2 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
                            <div>
                                <h2 class="text-2xl font-semibold tracking-tight text-stone-950 sm:text-3xl">Tell us about your business</h2>
                                <p class="mt-2 text-sm leading-6 text-stone-600"><span class="font-semibold text-rose-600">*</span> Required information</p>
                            </div>
                            <span class="vm-application-number self-start rounded-full bg-stone-200/70 px-3 py-1 font-mono text-[11px] uppercase tracking-wider text-stone-500 sm:self-auto">Review required</span>
                        </div>
                    </div>

                    @if ($errors->any())
                        <div class="mx-6 mt-7 rounded-2xl border border-rose-200 bg-rose-50 px-5 py-4 text-sm text-rose-900 sm:mx-9" role="alert" aria-live="polite">
                            <div class="flex items-start gap-3">
                                <svg class="mt-0.5 h-5 w-5 shrink-0 text-rose-600" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/>
                                </svg>
                                <div>
                                    <p class="font-semibold">Please review the highlighted fields.</p>
                                    <ul class="mt-2 list-disc space-y-1 pl-5">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                    @endif

                    <form method="POST"
                          action="{{ route('storefront.partner-application.store') }}"
                          enctype="multipart/form-data"
                          class="px-6 py-8 sm:px-9 sm:py-10"
                          x-data="{ submitting: false }"
                          @submit="submitting = true">
                        @csrf

                        <div class="space-y-10">
                            <fieldset class="vm-application-section">
                                <legend class="flex w-full items-center gap-4">
                                    <span class="vm-application-number flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-emerald-700 font-mono text-xs font-bold text-white">01</span>
                                    <span>
                                        <span class="block text-lg font-semibold text-stone-950">Business profile</span>
                                        <span class="mt-0.5 block text-sm font-normal text-stone-500">The company applying for a wholesale relationship.</span>
                                    </span>
                                </legend>

                                <div class="mt-6 grid gap-5 sm:grid-cols-2">
                                    <div class="sm:col-span-2">
                                        <label for="company_name" class="block text-sm font-semibold text-stone-700">Company name <span class="text-rose-600">*</span></label>
                                        <input id="company_name" name="company_name" value="{{ old('company_name') }}" required autofocus autocomplete="organization" aria-invalid="{{ $errors->has('company_name') ? 'true' : 'false' }}" class="mt-2 w-full @error('company_name') border-rose-400 @enderror">
                                        @error('company_name') <p class="mt-1.5 text-xs font-medium text-rose-600">{{ $message }}</p> @enderror
                                    </div>

                                    <div>
                                        <label for="legal_name" class="block text-sm font-semibold text-stone-700">Legal name <span class="font-normal text-stone-400">(optional)</span></label>
                                        <input id="legal_name" name="legal_name" value="{{ old('legal_name') }}" autocomplete="organization" aria-invalid="{{ $errors->has('legal_name') ? 'true' : 'false' }}" class="mt-2 w-full @error('legal_name') border-rose-400 @enderror">
                                        @error('legal_name') <p class="mt-1.5 text-xs font-medium text-rose-600">{{ $message }}</p> @enderror
                                    </div>

                                    <div>
                                        <label for="tax_id" class="block text-sm font-semibold text-stone-700">EIN / Tax ID <span class="text-rose-600">*</span></label>
                                        <input id="tax_id" name="tax_id" value="{{ old('tax_id') }}" required inputmode="text" aria-invalid="{{ $errors->has('tax_id') ? 'true' : 'false' }}" class="mt-2 w-full @error('tax_id') border-rose-400 @enderror">
                                        @error('tax_id') <p class="mt-1.5 text-xs font-medium text-rose-600">{{ $message }}</p> @enderror
                                    </div>

                                    <div class="sm:col-span-2">
                                        <label for="website" class="block text-sm font-semibold text-stone-700">Website <span class="font-normal text-stone-400">(optional)</span></label>
                                        <input type="url" id="website" name="website" value="{{ old('website') }}" placeholder="https://yourstore.com" autocomplete="url" aria-invalid="{{ $errors->has('website') ? 'true' : 'false' }}" class="mt-2 w-full @error('website') border-rose-400 @enderror">
                                        @error('website') <p class="mt-1.5 text-xs font-medium text-rose-600">{{ $message }}</p> @enderror
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset class="vm-application-section border-t border-stone-200 pt-9">
                                <legend class="flex w-full items-center gap-4">
                                    <span class="vm-application-number flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-emerald-700 font-mono text-xs font-bold text-white">02</span>
                                    <span>
                                        <span class="block text-lg font-semibold text-stone-950">Business type</span>
                                        <span class="mt-0.5 block text-sm font-normal text-stone-500">Choose the description that best matches your operation.</span>
                                    </span>
                                </legend>

                                <div class="mt-6 grid gap-4 sm:grid-cols-2">
                                    <label class="group relative cursor-pointer rounded-2xl border border-stone-200 bg-stone-50 p-5 transition hover:border-emerald-500 hover:bg-emerald-50/40 has-[:checked]:border-emerald-700 has-[:checked]:bg-emerald-50 has-[:checked]:shadow-[0_0_0_1px_rgba(4,120,87,1)]">
                                        <input type="radio" name="business_type" value="retailer" required class="peer absolute right-4 top-4" {{ old('business_type') === 'retailer' ? 'checked' : '' }}>
                                        <span class="block pr-7 text-sm font-semibold text-stone-950">Retailer / Reseller</span>
                                        <span class="mt-2 block text-xs leading-5 text-stone-500">You resell products to pet parents and hold, or plan to provide, applicable resale documentation.</span>
                                    </label>
                                    <label class="group relative cursor-pointer rounded-2xl border border-stone-200 bg-stone-50 p-5 transition hover:border-emerald-500 hover:bg-emerald-50/40 has-[:checked]:border-emerald-700 has-[:checked]:bg-emerald-50 has-[:checked]:shadow-[0_0_0_1px_rgba(4,120,87,1)]">
                                        <input type="radio" name="business_type" value="end_user" required class="peer absolute right-4 top-4" {{ old('business_type') === 'end_user' ? 'checked' : '' }}>
                                        <span class="block pr-7 text-sm font-semibold text-stone-950">Business End User</span>
                                        <span class="mt-2 block text-xs leading-5 text-stone-500">You purchase products for use within your own business rather than for resale.</span>
                                    </label>
                                </div>
                                @error('business_type') <p class="mt-2 text-xs font-medium text-rose-600">{{ $message }}</p> @enderror
                            </fieldset>

                            <fieldset class="vm-application-section border-t border-stone-200 pt-9">
                                <legend class="flex w-full items-center gap-4">
                                    <span class="vm-application-number flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-emerald-700 font-mono text-xs font-bold text-white">03</span>
                                    <span>
                                        <span class="block text-lg font-semibold text-stone-950">Primary contact</span>
                                        <span class="mt-0.5 block text-sm font-normal text-stone-500">Who should we contact about this application?</span>
                                    </span>
                                </legend>

                                <div class="mt-6 grid gap-5 sm:grid-cols-2">
                                    <div>
                                        <label for="first_name" class="block text-sm font-semibold text-stone-700">First name <span class="text-rose-600">*</span></label>
                                        <input id="first_name" name="first_name" value="{{ old('first_name') }}" required autocomplete="given-name" aria-invalid="{{ $errors->has('first_name') ? 'true' : 'false' }}" class="mt-2 w-full @error('first_name') border-rose-400 @enderror">
                                        @error('first_name') <p class="mt-1.5 text-xs font-medium text-rose-600">{{ $message }}</p> @enderror
                                    </div>
                                    <div>
                                        <label for="last_name" class="block text-sm font-semibold text-stone-700">Last name <span class="text-rose-600">*</span></label>
                                        <input id="last_name" name="last_name" value="{{ old('last_name') }}" required autocomplete="family-name" aria-invalid="{{ $errors->has('last_name') ? 'true' : 'false' }}" class="mt-2 w-full @error('last_name') border-rose-400 @enderror">
                                        @error('last_name') <p class="mt-1.5 text-xs font-medium text-rose-600">{{ $message }}</p> @enderror
                                    </div>
                                    <div>
                                        <label for="email" class="block text-sm font-semibold text-stone-700">Business email <span class="text-rose-600">*</span></label>
                                        <input type="email" id="email" name="email" value="{{ old('email') }}" required autocomplete="email" aria-invalid="{{ $errors->has('email') ? 'true' : 'false' }}" class="mt-2 w-full @error('email') border-rose-400 @enderror">
                                        @error('email') <p class="mt-1.5 text-xs font-medium text-rose-600">{{ $message }}</p> @enderror
                                    </div>
                                    <div>
                                        <label for="phone" class="block text-sm font-semibold text-stone-700">Phone <span class="font-normal text-stone-400">(optional)</span></label>
                                        <input type="tel" id="phone" name="phone" value="{{ old('phone') }}" autocomplete="tel" aria-invalid="{{ $errors->has('phone') ? 'true' : 'false' }}" class="mt-2 w-full @error('phone') border-rose-400 @enderror">
                                        @error('phone') <p class="mt-1.5 text-xs font-medium text-rose-600">{{ $message }}</p> @enderror
                                    </div>
                                    <div class="sm:col-span-2">
                                        <label for="job_title" class="block text-sm font-semibold text-stone-700">Job title <span class="font-normal text-stone-400">(optional)</span></label>
                                        <input id="job_title" name="job_title" value="{{ old('job_title') }}" autocomplete="organization-title" aria-invalid="{{ $errors->has('job_title') ? 'true' : 'false' }}" class="mt-2 w-full @error('job_title') border-rose-400 @enderror">
                                        @error('job_title') <p class="mt-1.5 text-xs font-medium text-rose-600">{{ $message }}</p> @enderror
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset class="vm-application-section border-t border-stone-200 pt-9" x-data="{ showPassword: false }">
                                <legend class="flex w-full items-center gap-4">
                                    <span class="vm-application-number flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-emerald-700 font-mono text-xs font-bold text-white">04</span>
                                    <span>
                                        <span class="block text-lg font-semibold text-stone-950">Account access</span>
                                        <span class="mt-0.5 block text-sm font-normal text-stone-500">Create the credentials you will use after approval.</span>
                                    </span>
                                </legend>

                                <div class="mt-6 grid gap-5 sm:grid-cols-2">
                                    <div>
                                        <label for="password" class="block text-sm font-semibold text-stone-700">Password <span class="text-rose-600">*</span></label>
                                        <div class="relative mt-2">
                                            <input x-bind:type="showPassword ? 'text' : 'password'" id="password" name="password" required minlength="6" autocomplete="new-password" aria-describedby="password-policy" aria-invalid="{{ $errors->has('password') ? 'true' : 'false' }}" class="w-full pr-12 @error('password') border-rose-400 @enderror">
                                            <button type="button" @click="showPassword = ! showPassword" class="absolute inset-y-0 right-0 inline-flex w-12 items-center justify-center rounded-r-xl text-stone-400 transition hover:text-emerald-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-600" x-bind:aria-label="showPassword ? 'Hide passwords' : 'Show passwords'">
                                                <svg x-show="! showPassword" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                                                <svg x-show="showPassword" class="h-5 w-5" style="display:none" fill="none" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 01-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"/></svg>
                                            </button>
                                        </div>
                                        @error('password') <p class="mt-1.5 text-xs font-medium text-rose-600">{{ $message }}</p> @enderror
                                    </div>
                                    <div>
                                        <label for="password_confirmation" class="block text-sm font-semibold text-stone-700">Confirm password <span class="text-rose-600">*</span></label>
                                        <input x-bind:type="showPassword ? 'text' : 'password'" id="password_confirmation" name="password_confirmation" required minlength="6" autocomplete="new-password" aria-describedby="password-policy" class="mt-2 w-full">
                                    </div>
                                </div>
                                <p id="password-policy" class="mt-3 flex items-start gap-2 text-xs leading-5 text-stone-500">
                                    <svg class="mt-0.5 h-4 w-4 shrink-0 text-emerald-700" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                    At least 6 characters, including uppercase and lowercase letters, a number, and a symbol.
                                </p>
                            </fieldset>

                            <fieldset class="vm-application-section border-t border-stone-200 pt-9">
                                <legend class="flex w-full items-center gap-4">
                                    <span class="vm-application-number flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-emerald-700 font-mono text-xs font-bold text-white">05</span>
                                    <span>
                                        <span class="block text-lg font-semibold text-stone-950">Tell us about your store</span>
                                        <span class="mt-0.5 block text-sm font-normal text-stone-500">Help us get to know your operation before review.</span>
                                    </span>
                                </legend>

                                <div class="mt-6 space-y-5">
                                    <div>
                                        <label for="notes" class="block text-sm font-semibold text-stone-700">Store details <span class="font-normal text-stone-400">(optional)</span></label>
                                        <textarea id="notes" name="notes" rows="5" maxlength="2000" placeholder="Tell us about your store, locations, sales channels, customers, or anything else our team should know." aria-invalid="{{ $errors->has('notes') ? 'true' : 'false' }}" class="mt-2 w-full @error('notes') border-rose-400 @enderror">{{ old('notes') }}</textarea>
                                        @error('notes') <p class="mt-1.5 text-xs font-medium text-rose-600">{{ $message }}</p> @enderror
                                    </div>

                                    <div x-data="{ fileName: '' }">
                                        <label for="business_proof" class="block text-sm font-semibold text-stone-700">Business document or storefront photo <span class="font-normal text-stone-400">(optional)</span></label>
                                        <p id="business-proof-help" class="mt-1 text-xs leading-5 text-stone-500">Share a document or a photo of your storefront so our team can better understand your business. PDF, JPG, PNG, or WEBP, up to 10 MB.</p>
                                        <label for="business_proof" class="mt-3 flex min-h-28 cursor-pointer items-center gap-4 rounded-2xl border border-dashed border-stone-300 bg-stone-50 px-5 py-5 transition hover:border-emerald-600 hover:bg-emerald-50/40 focus-within:border-emerald-600 focus-within:ring-2 focus-within:ring-emerald-600/20">
                                            <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-white text-emerald-700 shadow-sm ring-1 ring-stone-200">
                                                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"/></svg>
                                            </span>
                                            <span class="min-w-0">
                                                <span class="block text-sm font-semibold text-stone-800" x-text="fileName || 'Choose a file'">Choose a file</span>
                                                <span class="mt-1 block text-xs text-stone-500" x-show="! fileName">Your file will be stored privately for administrative review.</span>
                                            </span>
                                            <input type="file" id="business_proof" name="business_proof" accept=".pdf,.jpg,.jpeg,.png,.webp,application/pdf,image/jpeg,image/png,image/webp" aria-describedby="business-proof-help" @change="fileName = $event.target.files[0]?.name || ''" class="sr-only">
                                        </label>
                                        @error('business_proof') <p class="mt-1.5 text-xs font-medium text-rose-600">{{ $message }}</p> @enderror
                                    </div>
                                </div>
                            </fieldset>
                        </div>

                        <div class="mt-10 rounded-2xl border border-emerald-900/10 bg-[#f5f7f2] p-5 sm:flex sm:items-center sm:justify-between sm:gap-6">
                            <div class="max-w-md">
                                <p class="text-sm font-semibold text-stone-900">Ready to submit?</p>
                                <p class="mt-1 text-xs leading-5 text-stone-500">By submitting, you confirm that the information is accurate. Verify your email next; the account remains pending until approved.</p>
                            </div>
                            <button type="submit"
                                    x-bind:disabled="submitting"
                                    class="mt-4 inline-flex min-h-12 w-full shrink-0 items-center justify-center gap-2 rounded-xl bg-emerald-700 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-emerald-900/15 transition hover:-translate-y-0.5 hover:bg-emerald-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-600 focus-visible:ring-offset-2 disabled:cursor-wait disabled:translate-y-0 disabled:opacity-70 sm:mt-0 sm:w-auto">
                                <svg x-show="submitting" class="h-4 w-4 animate-spin" style="display:none" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-90" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path></svg>
                                <span x-text="submitting ? 'Submitting application...' : 'Submit for review'">Submit for review</span>
                                <svg x-show="! submitting" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>
                            </button>
                        </div>
                    </form>
                @endif
            </div>
        </div>
    </div>
</section>
@endsection