<x-layout title="Contact Us"
          description="Get in touch with Brokam International. Tell us about your technology infrastructure, procurement, or logistics needs and our team will respond promptly.">

    <x-page-hero kicker="Contact"
                 title="Let's discuss what you need to build."
                 subtitle="Tell us about your project and we'll route your message to the right Brokam team."
                 :crumbs="['Home' => route('home'), 'Contact' => null]">
    </x-page-hero>

    <section class="section">
        <div class="shell grid lg:grid-cols-[1.3fr_0.7fr] gap-12">
            {{-- Form --}}
            <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('contact.store') }}" class="grid sm:grid-cols-2 gap-5" novalidate>
                    @csrf

                    {{-- Honeypot --}}
                    <div class="hidden" aria-hidden="true">
                        <label>Leave this field 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="phone" type="tel" label="Phone (optional)" />
                    <x-field name="company" label="Company / organisation" />

                    <div class="sm:col-span-2">
                        <label for="service" class="block text-sm font-medium text-slate-ink mb-1.5">Service of interest</label>
                        <select id="service" name="service" 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="">General enquiry</option>
                            @foreach ($services as $s)
                                <option value="{{ $s['slug'] }}" @selected(old('service', request('service')) === $s['slug'])>{{ $s['title'] }}</option>
                            @endforeach
                        </select>
                    </div>

                    <x-field name="subject" label="Subject (optional)" class="sm:col-span-2" />

                    <div class="sm:col-span-2">
                        <label for="message" class="block text-sm font-medium text-slate-ink mb-1.5">How can we help? <span class="text-brand-600">*</span></label>
                        <textarea id="message" name="message" rows="5" required
                                  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 respond to this enquiry, 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">Send message <x-icon name="arrow" class="w-4 h-4"/></button>
                    </div>
                </form>
            </div>

            {{-- Contact details --}}
            <aside class="space-y-6">
                <div class="card p-7">
                    <h2 class="font-semibold text-slate-ink mb-5">Get in touch directly</h2>
                    <ul class="space-y-4 text-sm">
                        <li class="flex items-start gap-3"><span class="grid place-items-center w-9 h-9 rounded-lg bg-brand-50 text-brand-600 shrink-0"><x-icon name="mail" class="w-5 h-5"/></span><div><span class="block text-slate-400 text-xs uppercase tracking-wider">Email</span><a href="mailto:{{ config('brokam.company.email') }}" class="text-slate-ink hover:text-brand-600">{{ config('brokam.company.email') }}</a></div></li>
                        <li class="flex items-start gap-3"><span class="grid place-items-center w-9 h-9 rounded-lg bg-brand-50 text-brand-600 shrink-0"><x-icon name="phone" class="w-5 h-5"/></span><div><span class="block text-slate-400 text-xs uppercase tracking-wider">Phone</span><a href="tel:{{ preg_replace('/\s+/', '', config('brokam.company.phone')) }}" class="text-slate-ink hover:text-brand-600">{{ config('brokam.company.phone') }}</a></div></li>
                        <li class="flex items-start gap-3"><span class="grid place-items-center w-9 h-9 rounded-lg bg-brand-50 text-brand-600 shrink-0"><x-icon name="pin" class="w-5 h-5"/></span><div><span class="block text-slate-400 text-xs uppercase tracking-wider">Location</span><span class="text-slate-ink">{{ config('brokam.company.address') }}</span></div></li>
                    </ul>
                </div>
                <div class="theme-dark card p-7 bg-night text-white">
                    <p class="kicker mb-3">Need pricing?</p>
                    <p class="text-white/70 text-sm leading-relaxed">For a detailed proposal, use our structured quote request — it routes straight to the right service team.</p>
                    <a href="{{ route('quote') }}" class="btn btn-primary w-full mt-5 text-sm">Request a Quote</a>
                </div>
            </aside>
        </div>
    </section>
</x-layout>
