<section class="contact-section relative overflow-hidden bg-gradient-to-b from-white via-[#FFF9F5] to-white py-24 lg:py-32">
    <div class="absolute top-20 right-10 w-[500px] h-[500px] bg-gradient-to-bl from-[#FF007A]/5 to-transparent rounded-full blur-3xl"></div>
    <div class="absolute bottom-20 left-10 w-[400px] h-[400px] bg-gradient-to-tr from-[#D87AA8]/5 to-transparent rounded-full blur-3xl"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="text-center max-w-3xl mx-auto mb-20">
            <span class="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-gradient-to-r from-[#FF007A] to-[#D87AA8] text-white text-xs font-bold uppercase tracking-[0.25em] mb-8 shadow-xl shadow-[#FF007A]/20">
                Contact Us
            </span>
            <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-slate-900 tracking-tight leading-[1.08] mb-6">
                Let's discuss your <span class="text-transparent bg-clip-text bg-gradient-to-r from-[#FF007A] to-[#D87AA8]">next project</span>
            </h1>
            <p class="text-base sm:text-lg text-slate-500 leading-relaxed max-w-2xl mx-auto">Reach out to Balorp Ventures for site visits, estimates, and partnership inquiries.</p>
        </div>

        <div class="grid gap-8 lg:grid-cols-2">
            <div class="space-y-6">
                <div class="group relative bg-white rounded-[1.75rem] border border-slate-100 p-7 shadow-sm hover:shadow-2xl hover:shadow-[#FF007A]/10 hover:-translate-y-1 transition-all duration-500">
                    <div class="absolute top-0 left-0 right-0 h-1.5 rounded-t-[1.75rem] bg-gradient-to-r from-[#FF007A] to-[#D87AA8]"></div>
                    <div class="flex items-start gap-5">
                        <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#FF007A] to-[#D87AA8] flex items-center justify-center text-white shadow-lg shadow-[#FF007A]/25 group-hover:scale-110 transition-transform duration-500">
                            <span class="material-symbols-outlined text-2xl">call</span>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold text-slate-900 mb-1">Phone</h3>
                            <p class="text-slate-600">+233 55 936 2818</p>
                            <a href="tel:+233559362818" class="inline-flex items-center gap-2 mt-3 text-sm font-semibold text-[#FF007A] group-hover:gap-3 transition-all">
                                Call Now
                                <span class="material-symbols-outlined text-base group-hover:translate-x-1 transition-transform">arrow_forward</span>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="group relative bg-white rounded-[1.75rem] border border-slate-100 p-7 shadow-sm hover:shadow-2xl hover:shadow-[#FF007A]/10 hover:-translate-y-1 transition-all duration-500">
                    <div class="absolute top-0 left-0 right-0 h-1.5 rounded-t-[1.75rem] bg-gradient-to-r from-[#FF007A] to-[#D87AA8]"></div>
                    <div class="flex items-start gap-5">
                        <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#FF007A] to-[#D87AA8] flex items-center justify-center text-white shadow-lg shadow-[#FF007A]/25 group-hover:scale-110 transition-transform duration-500">
                            <span class="material-symbols-outlined text-2xl">mail</span>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold text-slate-900 mb-1">Email</h3>
                            <p class="text-slate-600">balorpv@gmail.com</p>
                            <a href="mailto:balorpv@gmail.com" class="inline-flex items-center gap-2 mt-3 text-sm font-semibold text-[#FF007A] group-hover:gap-3 transition-all">
                                Send Email
                                <span class="material-symbols-outlined text-base group-hover:translate-x-1 transition-transform">arrow_forward</span>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="group relative bg-white rounded-[1.75rem] border border-slate-100 p-7 shadow-sm hover:shadow-2xl hover:shadow-[#FF007A]/10 hover:-translate-y-1 transition-all duration-500">
                    <div class="absolute top-0 left-0 right-0 h-1.5 rounded-t-[1.75rem] bg-gradient-to-r from-[#FF007A] to-[#D87AA8]"></div>
                    <div class="flex items-start gap-5">
                        <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#FF007A] to-[#D87AA8] flex items-center justify-center text-white shadow-lg shadow-[#FF007A]/25 group-hover:scale-110 transition-transform duration-500">
                            <span class="material-symbols-outlined text-2xl">location_on</span>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold text-slate-900 mb-1">Location</h3>
                            <p class="text-slate-600">Accra, Ghana</p>
                            <a href="https://maps.google.com" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 mt-3 text-sm font-semibold text-[#FF007A] group-hover:gap-3 transition-all">
                                View on Map
                                <span class="material-symbols-outlined text-base group-hover:translate-x-1 transition-transform">arrow_forward</span>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="group relative bg-white rounded-[1.75rem] border border-slate-100 p-7 shadow-sm hover:shadow-2xl hover:shadow-[#FF007A]/10 hover:-translate-y-1 transition-all duration-500">
                    <div class="absolute top-0 left-0 right-0 h-1.5 rounded-t-[1.75rem] bg-gradient-to-r from-[#FF007A] to-[#D87AA8]"></div>
                    <div class="flex items-start gap-5">
                        <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#FF007A] to-[#D87AA8] flex items-center justify-center text-white shadow-lg shadow-[#FF007A]/25 group-hover:scale-110 transition-transform duration-500">
                            <span class="material-symbols-outlined text-2xl">schedule</span>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold text-slate-900 mb-1">Operating Hours</h3>
                            <p class="text-slate-600">Mon - Sat: 8:00 AM - 6:00 PM</p>
                            <p class="text-slate-500 text-sm mt-1">Sunday: Closed</p>
                        </div>
                    </div>
                </div>

                <div class="group relative bg-white rounded-[1.75rem] border border-slate-100 p-7 shadow-sm hover:shadow-2xl hover:shadow-[#FF007A]/10 hover:-translate-y-1 transition-all duration-500">
                    <div class="absolute top-0 left-0 right-0 h-1.5 rounded-t-[1.75rem] bg-gradient-to-r from-[#FF007A] to-[#D87AA8]"></div>
                    <div class="flex items-start gap-5">
                        <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#FF007A] to-[#D87AA8] flex items-center justify-center text-white shadow-lg shadow-[#FF007A]/25 group-hover:scale-110 transition-transform duration-500">
                            <span class="material-symbols-outlined text-2xl">public</span>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold text-slate-900 mb-1">Social Media</h3>
                            <p class="text-slate-600 text-sm mb-3">@balorp_v</p>
                            <div class="flex gap-4">
                                <a href="https://www.instagram.com/balorp_v/" target="_blank" class="inline-flex items-center gap-1 text-sm font-semibold text-[#FF007A] hover:text-[#D87AA8] transition-all">
                                    Instagram
                                </a>
                                <a href="https://www.tiktok.com/@balorp_v" target="_blank" class="inline-flex items-center gap-1 text-sm font-semibold text-[#FF007A] hover:text-[#D87AA8] transition-all">
                                    TikTok
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="relative rounded-[2rem] overflow-hidden shadow-2xl border border-white/60 bg-white">
                <div class="absolute inset-0 bg-gradient-to-tr from-[#FF007A]/5 via-transparent to-[#D87AA8]/5 z-10"></div>
                <div class="p-8 sm:p-10 relative z-20">
                    <h2 class="text-2xl font-bold text-slate-900 mb-2">Send us a message</h2>
                    <p class="text-slate-600 mb-8">Fill out the form below and we'll get back to you within 24 hours.</p>
                    
                    <form class="space-y-5">
                        <div class="grid sm:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-sm font-semibold text-slate-900 mb-2">First Name</label>
                                <input type="text" class="w-full rounded-2xl border border-slate-200 bg-slate-50/50 px-4 py-3 text-slate-900 placeholder:text-slate-400 focus:border-[#FF007A] focus:ring-2 focus:ring-[#FF007A]/20 focus:bg-white transition-all" placeholder="John">
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-slate-900 mb-2">Last Name</label>
                                <input type="text" class="w-full rounded-2xl border border-slate-200 bg-slate-50/50 px-4 py-3 text-slate-900 placeholder:text-slate-400 focus:border-[#FF007A] focus:ring-2 focus:ring-[#FF007A]/20 focus:bg-white transition-all" placeholder="Doe">
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-slate-900 mb-2">Email</label>
                            <input type="email" class="w-full rounded-2xl border border-slate-200 bg-slate-50/50 px-4 py-3 text-slate-900 placeholder:text-slate-400 focus:border-[#FF007A] focus:ring-2 focus:ring-[#FF007A]/20 focus:bg-white transition-all" placeholder="you@example.com">
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-slate-900 mb-2">Phone</label>
                            <input type="tel" class="w-full rounded-2xl border border-slate-200 bg-slate-50/50 px-4 py-3 text-slate-900 placeholder:text-slate-400 focus:border-[#FF007A] focus:ring-2 focus:ring-[#FF007A]/20 focus:bg-white transition-all" placeholder="+233 00 000 0000">
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-slate-900 mb-2">Service Interest</label>
                            <select class="w-full rounded-2xl border border-slate-200 bg-slate-50/50 px-4 py-3 text-slate-900 focus:border-[#FF007A] focus:ring-2 focus:ring-[#FF007A]/20 focus:bg-white transition-all">
                                <option value="">Select a service</option>
                                <option>Painting Works</option>
                                <option>POP Ceiling Installation</option>
                                <option>Flooring & Tiling</option>
                                <option>Interior Décor</option>
                                <option>Renovations</option>
                                <option>Landscaping</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-slate-900 mb-2">Message</label>
                            <textarea rows="5" class="w-full rounded-2xl border border-slate-200 bg-slate-50/50 px-4 py-3 text-slate-900 placeholder:text-slate-400 focus:border-[#FF007A] focus:ring-2 focus:ring-[#FF007A]/20 focus:bg-white transition-all resize-none" placeholder="Tell us about your project..."></textarea>
                        </div>
                        <button type="button" class="inline-flex w-full items-center justify-center gap-2 px-8 py-4 rounded-full bg-gradient-to-r from-[#FF007A] to-[#D87AA8] text-white font-semibold text-base shadow-xl shadow-[#FF007A]/25 hover:shadow-2xl hover:shadow-[#FF007A]/40 hover:-translate-y-1 transition-all duration-300">
                            <span class="material-symbols-outlined text-xl">send</span>
                            Send Message
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
