@include('frontend.header')
@include('frontend.navbar')

<section class="client-enquiry-page soft-bg-section-light pt-32 pb-20 px-6 bg-[#FBF9F1] text-base" style="padding-top: 7.5rem; padding-bottom:50px;">
    <div class="max-w-6xl mx-auto grid lg:grid-cols-12 gap-10 items-start">
        <div class="lg:col-span-5">
            <span class="inline-flex items-center px-4 py-2 rounded-full text-xs font-semibold tracking-wider uppercase" style="color: #0d1f14; background-color: #EFE7D8;">BAOPCL Enquiry</span>
            <h1 class="serif-title text-4xl sm:text-5xl text-[#0d1f14] leading-tight mt-6 mb-5">Tell us your organic ginger requirement.</h1>
            <p class="text-gray-600 leading-relaxed mb-8">
                Share the product formats you are interested in and our team will get in touch with sourcing, quality, and supply details.
            </p>
            <div class="bg-white border border-[#E5DDCF] rounded-3xl p-6 shadow-sm">
                <div class="grid gap-4 text-sm">
                    <div class="flex gap-3"><span class="text-[#D98E28] font-bold">01</span><span>Certified organic ginger product support.</span></div>
                    <div class="flex gap-3"><span class="text-[#D98E28] font-bold">02</span><span>Bulk, wholesale, and export-oriented enquiries.</span></div>
                    <div class="flex gap-3"><span class="text-[#D98E28] font-bold">03</span><span>Quick follow-up from the BAOPCL team.</span></div>
                </div>
            </div>
        </div>

        <div class="lg:col-span-7">
            <form class="bg-white border border-[#E5DDCF] rounded-3xl p-5 sm:p-8 shadow-lg" method="POST" action="{{ route('client-enquiry.store') }}">
                @csrf
                <input type="hidden" name="submission_token" value="{{ $submissionToken ?? '' }}">

                <div class="grid sm:grid-cols-2 gap-5">
                    <div>
                        <label class="block text-sm font-bold text-[#0d1f14] mb-2" for="name">Name</label>
                        <input class="w-full rounded-2xl border border-[#E5DDCF] px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#D98E28]/30" id="name" name="name" type="text" value="{{ old('name') }}" required>
                        @error('name')<p class="text-red-600 text-xs mt-2">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-[#0d1f14] mb-2" for="email">Email</label>
                        <input class="w-full rounded-2xl border border-[#E5DDCF] px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#D98E28]/30" id="email" name="email" type="email" value="{{ old('email') }}" required>
                        @error('email')<p class="text-red-600 text-xs mt-2">{{ $message }}</p>@enderror
                    </div>
                    <div class="sm:col-span-2">
                        <label class="block text-sm font-bold text-[#0d1f14] mb-2" for="phone">Phone Number</label>
                        <input class="w-full rounded-2xl border border-[#E5DDCF] px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#D98E28]/30" id="phone" name="phone" type="text" value="{{ old('phone') }}" required>
                        @error('phone')<p class="text-red-600 text-xs mt-2">{{ $message }}</p>@enderror
                    </div>
                </div>

                <div class="mt-6">
                    <div class="text-sm font-bold text-[#0d1f14] mb-3">Products</div>
                    <div class="grid sm:grid-cols-2 gap-3">
                        @foreach ($productOptions as $value => $label)
                            <label class="cursor-pointer rounded-2xl border border-[#E5DDCF] p-4 flex items-center gap-3 hover:border-[#D98E28] transition">
                                <input class="w-4 h-4 accent-[#D98E28]" name="products[]" type="checkbox" value="{{ $value }}" @checked(in_array($value, old('products', []), true))>
                                <span class="font-semibold text-sm text-[#0d1f14]">{{ $label }}</span>
                            </label>
                        @endforeach
                    </div>
                    @error('products')<p class="text-red-600 text-xs mt-2">{{ $message }}</p>@enderror
                    @error('products.*')<p class="text-red-600 text-xs mt-2">{{ $message }}</p>@enderror
                </div>

                <div class="mt-6">
                    <label class="block text-sm font-bold text-[#0d1f14] mb-2" for="message">Message</label>
                    <textarea class="w-full rounded-2xl border border-[#E5DDCF] px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#D98E28]/30" id="message" name="message" rows="5">{{ old('message') }}</textarea>
                    @error('message')<p class="text-red-600 text-xs mt-2">{{ $message }}</p>@enderror
                </div>

                <button class="mt-6 w-full sm:w-auto bg-accent text-white px-8 py-3.5 rounded-full text-sm font-semibold hover:brightness-110 transition shadow-lg" type="submit">
                    Submit Enquiry
                </button>
            </form>
        </div>
    </div>
</section>

@include('frontend.footer')
@include('frontend.floating-whatsapp')
@include('frontend.scripts')