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

<section class="relative min-h-[70svh] lg:min-h-[76svh] bg-[#041A0E] text-white pt-28 sm:pt-36 pb-14 sm:pb-16 px-4 sm:px-6 overflow-hidden">
    <div class="absolute inset-0">
        <img src="{{ asset('images/ginger5.jpg') }}" alt="Organic ginger packed for supply" class="w-full h-full object-cover object-center">
        <div class="absolute inset-0 bg-[#032012]/70"></div>
        <div class="absolute inset-0 bg-gradient-to-b from-[#03140A]/78 via-[#063019]/78 to-[#041A0E]"></div>
    </div>

    <div class="relative z-10 max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-end min-h-[46svh] lg:min-h-[52svh]">
        <div class="lg:col-span-6">
            <div class="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-md px-4 py-1.5 rounded-full border border-white/15 text-xs text-amber-400 mb-8">
                <span class="uppercase tracking-wider font-semibold">CONTACT BAOPCL</span>
            </div>

            <h1 class="serif-title text-4xl sm:text-6xl md:text-7xl font-normal leading-tight mb-6 max-w-3xl">
                Let's Talk About Your <span class="italic accent-color">Dehydrated Ginger Requirement</span>
            </h1>

            <p class="text-gray-300 text-sm sm:text-base max-w-2xl font-light leading-relaxed">
                Share your required quantity, packaging preference, delivery location, and timeline for certified organic dehydrated ginger slices. Our team will help you with availability, pricing, and next steps.
            </p>

            <div class="flex flex-col sm:flex-row gap-3 mt-8 lg:hidden">
                <a href="tel:+919707691169" class="bg-accent text-white px-6 py-3 rounded-full text-sm font-medium text-center hover:brightness-110 transition">
                    Call Now
                </a>
                <a href="mailto:info@baopcl.com?subject=Dehydrated%20Ginger%20Slices%20Enquiry" class="border border-white/30 text-white px-6 py-3 rounded-full text-sm font-medium text-center hover:bg-white/10 transition">
                    Email Us
                </a>
            </div>
        </div>

        <div class="hidden lg:block lg:col-span-6">
            <div class="glass-card rounded-3xl p-5 sm:p-7">
                <span class="text-[10px] uppercase tracking-wider text-amber-400 font-bold">Quick Response</span>
                <h2 class="serif-title text-3xl sm:text-5xl leading-tight mt-2 mb-5">Bulk, domestic, and export enquiries.</h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3">
                    <div class="flex items-center gap-3 bg-white/[0.04] border border-white/10 rounded-2xl p-4">
                        <div class="w-10 h-10 rounded-xl bg-amber-500/10 text-amber-400 flex items-center justify-center shrink-0">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                        </div>
                        <div class="min-w-0">
                            <strong class="block text-sm text-white">Call Us</strong>
                            <span class="block text-xs text-gray-300 mt-1 break-words">+91 9707691169</span>
                        </div>
                    </div>

                    <div class="flex items-center gap-3 bg-white/[0.04] border border-white/10 rounded-2xl p-4">
                        <div class="w-10 h-10 rounded-xl bg-amber-500/10 text-amber-400 flex items-center justify-center shrink-0">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                        </div>
                        <div class="min-w-0">
                            <strong class="block text-sm text-white">Email</strong>
                            <a href="mailto:info@baopcl.com?subject=Dehydrated%20Ginger%20Slices%20Enquiry" class="block text-xs text-gray-300 mt-1 break-all hover:text-white transition">info@baopcl.com</a>
                        </div>
                    </div>

                    <div class="flex items-center gap-3 bg-white/[0.04] border border-white/10 rounded-2xl p-4 sm:col-span-2 xl:col-span-1">
                        <div class="w-10 h-10 rounded-xl bg-amber-500/10 text-amber-400 flex items-center justify-center shrink-0">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                        </div>
                        <div class="min-w-0">
                            <strong class="block text-sm text-white">Office</strong>
                            <span class="block text-xs text-gray-300 mt-1 leading-relaxed">Bachagaon, Kaziranga National Park, Assam</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-16 sm:py-20 lg:py-24 px-4 sm:px-6 max-w-7xl mx-auto">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start">
        <div class="lg:col-span-5">
            <div class="inline-flex items-center space-x-2 bg-[#E2EBE2] text-[#2C5234] px-3.5 py-1 rounded-full text-xs font-semibold mb-4">
                <span class="uppercase tracking-wider">SEND AN ENQUIRY</span>
            </div>
            <h2 class="serif-title text-3xl sm:text-5xl text-[#0d1f14] font-normal leading-tight mb-5">
                Tell Us What You Need, We'll Help You <span class="italic accent-color">Plan It</span>
            </h2>
            <p class="text-sm text-gray-600 leading-relaxed mb-8">
                The more detail you share, the faster we can respond with practical guidance on quantity, grade, packaging, lead time, and delivery.
            </p>

            <div class="hidden md:block space-y-4">
                @foreach ([
                    ['title' => 'Domestic bulk supply', 'text' => 'Wholesale orders, distributor requirements, and recurring dehydrated ginger slice procurement.'],
                    ['title' => 'Export enquiries', 'text' => 'Packing preferences, destination details, certificates, and documentation support.'],
                    ['title' => 'Custom requirements', 'text' => 'Specific slice grades, sorting preferences, buyer labels, and shipment planning.'],
                ] as $item)
                    <div class="bg-[#F4F1E8]/80 border border-[#EBE5D8] rounded-2xl p-5">
                        <h3 class="serif-title text-xl text-[#0d1f14] mb-2">{{ $item['title'] }}</h3>
                        <p class="text-xs text-gray-600 leading-relaxed">{{ $item['text'] }}</p>
                    </div>
                @endforeach
            </div>

            <div class="hidden lg:block mt-6 rounded-3xl overflow-hidden h-72 bg-[#E2EBE2] shadow-sm">
                <img src="{{ asset('images/ginger10.jpg') }}" alt="Organic ginger from BAOPCL" class="w-full h-full object-cover">
            </div>
        </div>

        <div class="lg:col-span-7">
            <form action="mailto:info@baopcl.com?subject=Organic%20Ginger%20Enquiry" method="post" enctype="text/plain" class="bg-white/70 border border-[#EBE5D8] rounded-3xl p-5 sm:p-8 shadow-sm">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                    <div>
                        <label for="name" class="block text-xs font-bold uppercase tracking-wider text-[#2C5234] mb-2">Name</label>
                        <input id="name" name="Name" type="text" class="w-full rounded-2xl border border-[#D8D0C0] bg-[#FBF9F1] px-4 py-3 text-sm text-[#0d1f14] focus:outline-none focus:border-[#D98E28]" placeholder="Your name">
                    </div>
                    <div>
                        <label for="company" class="block text-xs font-bold uppercase tracking-wider text-[#2C5234] mb-2">Company</label>
                        <input id="company" name="Company" type="text" class="w-full rounded-2xl border border-[#D8D0C0] bg-[#FBF9F1] px-4 py-3 text-sm text-[#0d1f14] focus:outline-none focus:border-[#D98E28]" placeholder="Company name">
                    </div>
                    <div>
                        <label for="email" class="block text-xs font-bold uppercase tracking-wider text-[#2C5234] mb-2">Email</label>
                        <input id="email" name="Email" type="email" class="w-full rounded-2xl border border-[#D8D0C0] bg-[#FBF9F1] px-4 py-3 text-sm text-[#0d1f14] focus:outline-none focus:border-[#D98E28]" placeholder="name@example.com">
                    </div>
                    <div>
                        <label for="phone" class="block text-xs font-bold uppercase tracking-wider text-[#2C5234] mb-2">Phone</label>
                        <input id="phone" name="Phone" type="tel" class="w-full rounded-2xl border border-[#D8D0C0] bg-[#FBF9F1] px-4 py-3 text-sm text-[#0d1f14] focus:outline-none focus:border-[#D98E28]" placeholder="+91">
                    </div>
                    <div>
                        <label for="quantity" class="block text-xs font-bold uppercase tracking-wider text-[#2C5234] mb-2">Quantity</label>
                        <input id="quantity" name="Quantity" type="text" class="w-full rounded-2xl border border-[#D8D0C0] bg-[#FBF9F1] px-4 py-3 text-sm text-[#0d1f14] focus:outline-none focus:border-[#D98E28]" placeholder="Example: 2 MT">
                    </div>
                    <div>
                        <label for="market" class="block text-xs font-bold uppercase tracking-wider text-[#2C5234] mb-2">Market</label>
                        <select id="market" name="Market" class="w-full rounded-2xl border border-[#D8D0C0] bg-[#FBF9F1] px-4 py-3 text-sm text-[#0d1f14] focus:outline-none focus:border-[#D98E28]">
                            <option>Domestic supply</option>
                            <option>Export enquiry</option>
                            <option>Wholesale distribution</option>
                            <option>Custom packaging</option>
                        </select>
                    </div>
                    <div class="sm:col-span-2">
                        <label for="message" class="block text-xs font-bold uppercase tracking-wider text-[#2C5234] mb-2">Message</label>
                        <textarea id="message" name="Message" rows="6" class="w-full rounded-2xl border border-[#D8D0C0] bg-[#FBF9F1] px-4 py-3 text-sm text-[#0d1f14] focus:outline-none focus:border-[#D98E28]" placeholder="Tell us about grade, packaging, destination, and expected timeline."></textarea>
                    </div>
                </div>

                <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mt-6">
                    <p class="text-xs text-gray-500 leading-relaxed max-w-md">
                        Share your preferred grade, packing type, and destination for a clearer quotation.
                    </p>
                    <button type="submit" class="bg-accent text-white px-7 py-3 rounded-full text-sm font-medium hover:brightness-110 transition w-full sm:w-auto">
                        Send Enquiry
                    </button>
                </div>
            </form>
        </div>
    </div>
</section>

<section class="bg-[#041A0E] text-white py-16 sm:py-20 px-4 sm:px-6">
    <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-1">
            <div class="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-md px-4 py-1.5 rounded-full border border-white/15 text-xs text-amber-400 mb-6">
                <span class="uppercase tracking-wider font-semibold">VISIT & CONNECT</span>
            </div>
            <h2 class="serif-title text-3xl sm:text-5xl font-normal leading-tight mb-4">
                We're Rooted in <span class="italic accent-color">Bokakhat</span>
            </h2>
            <p class="hidden sm:block text-sm text-gray-300 leading-relaxed">
                BAOPCL works close to growers and buyers, keeping the supply conversation clear from enquiry to dispatch.
            </p>
        </div>

        <div class="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="bg-white/[0.03] border border-white/10 rounded-3xl p-6 sm:p-8 flex flex-col justify-between">
                <div class="space-y-5 text-sm">
                    <div>
                        <span class="text-[10px] uppercase tracking-wider text-amber-400 font-bold block mb-2">Address</span>
                        <p class="text-gray-300 leading-relaxed">Village - Bachagaon, P.O. - Kaziranga National Park, Dist - Golaghat, State - Assam, India, Pin - 785609</p>
                    </div>
                    <div>
                        <span class="text-[10px] uppercase tracking-wider text-amber-400 font-bold block mb-2">Business Hours</span>
                        <p class="text-gray-300 leading-relaxed">Monday to Saturday, 9:30 AM to 6:00 PM</p>
                    </div>
                    <div>
                        <span class="text-[10px] uppercase tracking-wider text-amber-400 font-bold block mb-2">Best For</span>
                    <p class="text-gray-300 leading-relaxed">Bulk dehydrated ginger slice orders, wholesale procurement, and export supply discussions.</p>
                    </div>
                </div>
                <a href="mailto:info@baopcl.com?subject=Organic%20Ginger%20Enquiry" class="inline-flex items-center justify-center bg-accent text-white px-7 py-3 rounded-full text-sm font-medium hover:brightness-110 transition mt-8">
                    Email Our Team
                </a>
            </div>

            <div class="relative min-h-[280px] sm:min-h-[340px] overflow-hidden rounded-3xl border border-white/10 bg-white/[0.03]">
                <img src="{{ asset('images/ginger11.jpg') }}" alt="Certified organic ginger from BAOPCL in Assam" class="absolute inset-0 w-full h-full object-cover">
                <div class="absolute inset-0 bg-gradient-to-t from-[#041A0E]/78 via-[#041A0E]/10 to-transparent"></div>
                <div class="absolute left-0 right-0 bottom-0 p-6 sm:p-8">
                    <span class="text-[10px] uppercase tracking-wider text-amber-400 font-bold block mb-2">Local Supply</span>
                    <p class="serif-title text-2xl text-white leading-tight">Certified organic ginger grown close to Kaziranga.</p>
                </div>
            </div>
        </div>
    </div>
</section>

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