<x-layout title="Request a Quote"
          description="Request a quotation from Brokam International. Tell us your requirements and we'll route your RFQ to the right service team for a detailed proposal.">

    <x-page-hero kicker="Request a Quote"
                 title="Get a detailed proposal from the right team."
                 subtitle="Share your requirements and we'll route your request to the appropriate Brokam specialists for a scoped, competitive quotation."
                 :crumbs="['Home' => route('home'), 'Request a Quote' => null]">
    </x-page-hero>

    <section class="section">
        <div class="shell grid lg:grid-cols-[1.3fr_0.7fr] gap-12">
            <div class="card p-8 lg:p-10">
                @if (session('status'))
                    <div class="mb-6 rounded-xl bg-brand-50 border border-brand-200 p-5 flex items-start gap-3">
                        <x-icon name="check" class="w-6 h-6 text-brand-600 shrink-0"/>
                        <p class="text-brand-800">{{ session('status') }}</p>
                    </div>
                @endif

                @if ($errors->any())
                    <div class="mb-6 rounded-xl bg-red-50 border border-red-200 p-5 text-sm text-red-700">Please correct the highlighted fields below.</div>
                @endif

                <form method="POST" action="{{ route('quote.store') }}" class="grid sm:grid-cols-2 gap-5" novalidate>
                    @csrf
                    <div class="hidden" aria-hidden="true">
                        <label>Leave empty <input type="text" name="website" tabindex="-1" autocomplete="off"></label>
                    </div>

                    <x-field name="name" label="Full name" required />
                    <x-field name="email" type="email" label="Email address" required />
                    <x-field name="company" label="Company / organisation" required />
                    <x-field name="phone" type="tel" label="Phone (optional)" />
                    <x-field name="country" label="Country (optional)" />

                    <div>
                        <label for="service" class="block text-sm font-medium text-slate-ink mb-1.5">Service required <span class="text-brand-600">*</span></label>
                        <select id="service" name="service" required class="w-full rounded-xl border @error('service') border-red-400 @else border-slate-200 @enderror bg-paper px-4 py-3 text-slate-ink focus:border-brand-500 focus:ring-0">
                            <option value="">Select a service…</option>
                            @foreach ($services as $s)
                                <option value="{{ $s['slug'] }}" @selected(old('service', request('service')) === $s['slug'])>{{ $s['title'] }}</option>
                            @endforeach
                        </select>
                        @error('service') <p class="text-sm text-red-600 mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label for="budget" class="block text-sm font-medium text-slate-ink mb-1.5">Indicative budget (optional)</label>
                        <select id="budget" name="budget" class="w-full rounded-xl border border-slate-200 bg-paper px-4 py-3 text-slate-ink focus:border-brand-500 focus:ring-0">
                            <option value="">Prefer not to say</option>
                            @foreach (['Under $10k', '$10k – $50k', '$50k – $250k', '$250k+'] as $b)
                                <option value="{{ $b }}" @selected(old('budget') === $b)>{{ $b }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label for="timeline" class="block text-sm font-medium text-slate-ink mb-1.5">Timeline (optional)</label>
                        <select id="timeline" name="timeline" class="w-full rounded-xl border border-slate-200 bg-paper px-4 py-3 text-slate-ink focus:border-brand-500 focus:ring-0">
                            <option value="">Flexible</option>
                            @foreach (['Immediate', '1–3 months', '3–6 months', '6+ months'] as $t)
                                <option value="{{ $t }}" @selected(old('timeline') === $t)>{{ $t }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="sm:col-span-2">
                        <label for="message" class="block text-sm font-medium text-slate-ink mb-1.5">Requirements <span class="text-brand-600">*</span></label>
                        <textarea id="message" name="message" rows="5" required placeholder="Describe the systems, quantities, sites, and any constraints…"
                                  class="w-full rounded-xl border @error('message') border-red-400 @else border-slate-200 @enderror bg-paper px-4 py-3 text-slate-ink focus:border-brand-500 focus:ring-0">{{ old('message') }}</textarea>
                        @error('message') <p class="text-sm text-red-600 mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div class="sm:col-span-2 flex items-start gap-3">
                        <input type="checkbox" id="consent" name="consent" value="1" @checked(old('consent')) class="mt-1 rounded border-slate-300 text-brand-500 focus:ring-brand-500">
                        <label for="consent" class="text-sm text-slate-600">I agree to Brokam processing my details to prepare this quotation, as described in the <a href="{{ route('privacy') }}" class="text-brand-600 underline">privacy policy</a>. <span class="text-brand-600">*</span></label>
                    </div>
                    @error('consent') <p class="sm:col-span-2 -mt-3 text-sm text-red-600">{{ $message }}</p> @enderror

                    <div class="sm:col-span-2">
                        <button type="submit" class="btn btn-primary">Submit quote request <x-icon name="arrow" class="w-4 h-4"/></button>
                    </div>
                </form>
            </div>

            <aside class="space-y-6">
                <div class="card p-7">
                    <h2 class="font-semibold text-slate-ink mb-4">What happens next</h2>
                    <ol class="space-y-4 text-sm">
                        @foreach (['We route your request to the right service team.', 'A specialist reviews your requirements and may follow up for detail.', 'You receive a scoped, competitive quotation.'] as $i => $stepText)
                            <li class="flex gap-3"><span class="grid place-items-center w-7 h-7 rounded-full bg-brand-500 text-white text-xs font-semibold shrink-0">{{ $i + 1 }}</span><span class="text-slate-600 leading-relaxed">{{ $stepText }}</span></li>
                        @endforeach
                    </ol>
                </div>
                <div class="theme-dark card p-7 bg-night text-white">
                    <p class="kicker mb-3">Single point of accountability</p>
                    <p class="text-white/70 text-sm leading-relaxed">From sourcing to commissioning, one partner owns delivery — so the final system simply works.</p>
                </div>
            </aside>
        </div>
    </section>
</x-layout>
