<?php include 'assets/header.php'; ?>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ContactPage",
  "name": "Contact iGrroww Studio",
  "description": "Connect with iGrroww.in to build high-performance digital infrastructure and performance ads.",
  "url": "https://igrroww.in/contact.php"
}
</script>

<main class="bg-[#f8fafc] min-h-screen relative overflow-hidden">
    <div class="absolute inset-0 bg-[radial-gradient(#e2e8f0_1px,transparent_1px)] [background-size:32px_32px] opacity-50 z-0"></div>

    <section class="pt-36 pb-24 px-6 lg:px-12 max-w-7xl mx-auto animate-on-scroll relative z-10">
        <div class="grid lg:grid-cols-12 gap-16 lg:gap-24 items-start">
            
            <div class="lg:col-span-5 space-y-12 sticky top-32">
                <div>
                    <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white border border-gray-200 text-igheading text-[10px] font-bold uppercase tracking-widest mb-6 shadow-sm">
                        <span class="w-2 h-2 rounded-full bg-iggreen animate-pulse"></span> Available for new projects
                    </div>
                    <h1 class="text-5xl md:text-[5rem] font-extrabold text-igheading leading-[1.05] tracking-tight mb-6">
                        Let's talk <br><span class="text-transparent bg-clip-text bg-gradient-to-r from-iggreen to-emerald-500">growth.</span>
                    </h1>
                    <p class="text-lg text-gray-500 leading-relaxed font-medium">
                        Ready to scale? Drop your requirements here and our core team will analyze your business to provide the best digital blueprint.
                    </p>
                </div>

                <div class="space-y-6 pt-8 border-t border-gray-200">
                    <div class="bg-white p-6 rounded-3xl border border-gray-100 shadow-sm flex items-start gap-5 hover:border-iggreen/30 transition-colors group">
                        <div class="w-12 h-12 bg-gray-50 rounded-2xl flex items-center justify-center text-igheading group-hover:bg-iggreen group-hover:text-white transition-colors">
                            <i class="fa-brands fa-whatsapp text-xl"></i>
                        </div>
                        <div>
                            <p class="text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-1">Direct WhatsApp / Call</p>
                            <a href="https://wa.me/917037897747" target="_blank" class="text-lg font-extrabold text-igheading hover:text-iggreen transition-colors">+91 703 789 7747</a>
                            <p class="text-xs text-gray-500 font-medium mt-1">Avg. response time: 15 mins</p>
                        </div>
                    </div>

                    <div class="bg-white p-6 rounded-3xl border border-gray-100 shadow-sm flex items-start gap-5 hover:border-iggreen/30 transition-colors group">
                        <div class="w-12 h-12 bg-gray-50 rounded-2xl flex items-center justify-center text-igheading group-hover:bg-iggreen group-hover:text-white transition-colors">
                            <i class="fa-regular fa-envelope text-xl"></i>
                        </div>
                        <div>
                            <p class="text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-1">Official Email</p>
                            <a href="mailto:info@igrroww.in" class="text-lg font-extrabold text-igheading hover:text-iggreen transition-colors">info@igrroww.in</a>
                        </div>
                    </div>

                    <div class="bg-white p-6 rounded-3xl border border-gray-100 shadow-sm flex items-start gap-5 hover:border-iggreen/30 transition-colors group">
                        <div class="w-12 h-12 bg-gray-50 rounded-2xl flex items-center justify-center text-igheading group-hover:bg-iggreen group-hover:text-white transition-colors">
                            <i class="fa-regular fa-clock text-xl"></i>
                        </div>
                        <div>
                            <p class="text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-1">Working Hours</p>
                            <p class="text-lg font-extrabold text-igheading">Mon - Sat</p>
                            <p class="text-xs text-gray-500 font-medium mt-1">10:00 AM - 07:00 PM (IST)</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="lg:col-span-7 relative">
                <div class="absolute inset-0 bg-gradient-to-tr from-iggreen/20 to-transparent blur-3xl rounded-full transform -translate-x-10 translate-y-10 z-0"></div>
                
                <div class="bg-white p-8 md:p-12 rounded-[2.5rem] shadow-[0_20px_50px_-10px_rgba(0,193,106,0.1)] relative z-10 border border-white">
                    <div class="mb-10">
                        <h3 class="text-2xl font-extrabold text-igheading mb-2">Project Request</h3>
                        <p class="text-sm text-gray-500 font-medium">Fill in the details below. Required fields are marked with <span class="text-red-500">*</span></p>
                    </div>
                    
                    <form id="contactForm" class="space-y-6" novalidate>
                        
                        <div>
                            <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2 ml-1">Full Name <span class="text-red-500">*</span></label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none text-gray-400">
                                    <i class="fa-regular fa-user"></i>
                                </div>
                                <input type="text" id="contactName" class="input-premium w-full pl-12 pr-5 py-4 rounded-2xl text-sm font-bold text-igheading outline-none placeholder-gray-300" placeholder="Rahul Verma">
                            </div>
                        </div>

                        <div class="grid md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2 ml-1">WhatsApp No. <span class="text-red-500">*</span></label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none text-gray-400">
                                        <i class="fa-brands fa-whatsapp"></i>
                                    </div>
                                    <input type="tel" id="contactPhone" class="input-premium w-full pl-12 pr-5 py-4 rounded-2xl text-sm font-bold text-igheading outline-none placeholder-gray-300" placeholder="+91 98765...">
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2 ml-1">Business Scale</label>
                                <select id="businessScale" class="input-premium w-full px-5 py-4 rounded-2xl text-sm font-bold text-gray-600 outline-none cursor-pointer appearance-none bg-[url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%239CA3AF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E')] bg-no-repeat bg-[length:12px_12px] bg-[right_1.25rem_center]">
                                    <option value="Startup / New">Startup / New Business</option>
                                    <option value="Growing Business">Growing / Existing Business</option>
                                    <option value="Enterprise">Enterprise / Agency</option>
                                </select>
                            </div>
                        </div>

                        <div>
                            <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2 ml-1">Service Interest</label>
                            <select id="serviceType" class="input-premium w-full px-5 py-4 rounded-2xl text-sm font-bold text-gray-600 outline-none cursor-pointer appearance-none bg-[url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%239CA3AF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E')] bg-no-repeat bg-[length:12px_12px] bg-[right_1.25rem_center]">
                                <option value="Web Infrastructure Design">Website / E-Commerce Development</option>
                                <option value="Performance Ads">Performance Ads (Meta/Google)</option>
                                <option value="Local SEO & GBP">Local SEO & Map Ranking</option>
                                <option value="Complete Growth Package">Complete Business Package</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2 ml-1">Project Details <span class="text-red-500">*</span></label>
                            <div class="relative">
                                <textarea id="projectBrief" rows="4" maxlength="500" class="input-premium w-full px-5 py-4 rounded-2xl text-sm font-bold text-igheading outline-none placeholder-gray-300 resize-none" placeholder="Tell us a little bit about your project..."></textarea>
                                <span id="charCount" class="absolute bottom-3 right-4 text-[10px] font-bold text-gray-400 bg-white px-2 py-0.5 rounded-md">0/500</span>
                            </div>
                        </div>

                        <button type="submit" id="submitBtn" class="w-full py-4 mt-2 bg-gradient-to-r from-igheading to-[#1e293b] text-white font-extrabold rounded-2xl shadow-[0_15px_30px_-10px_rgba(15,23,42,0.4)] hover:shadow-[0_15px_30px_-10px_rgba(0,193,106,0.3)] hover:from-iggreen hover:to-emerald-500 transition-all duration-300 transform hover:-translate-y-1 flex items-center justify-center gap-3">
                            Submit Request <i class="fa-solid fa-arrow-right text-sm"></i>
                        </button>
                        
                        <p class="text-center text-[10px] text-gray-400 font-bold uppercase tracking-widest mt-4">
                            <i class="fa-solid fa-lock text-iggreen"></i> Your data is 100% secure
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <section class="py-20 px-6 lg:px-12 max-w-7xl mx-auto border-t border-gray-200/50 animate-on-scroll">
        <div class="text-center mb-16">
            <h2 class="text-2xl md:text-3xl font-extrabold text-igheading mb-2">What happens next?</h2>
            <p class="text-sm text-gray-500 font-medium">Our process after you submit the form.</p>
        </div>
        <div class="grid md:grid-cols-3 gap-8">
            <div class="text-center px-4">
                <div class="w-16 h-16 bg-blue-50 text-blue-500 rounded-full flex items-center justify-center text-2xl mx-auto mb-4 border border-blue-100 shadow-sm"><i class="fa-solid fa-clipboard-check"></i></div>
                <h4 class="font-bold text-igheading mb-2">1. Quick Review</h4>
                <p class="text-sm text-gray-500">Our team analyzes your requirements and prepares a tailored strategy.</p>
            </div>
            <div class="text-center px-4 relative">
                <div class="hidden md:block absolute top-8 left-[-50%] w-full h-px bg-dashed border-t-2 border-dashed border-gray-200 z-[-1]"></div>
                <div class="w-16 h-16 bg-orange-50 text-orange-500 rounded-full flex items-center justify-center text-2xl mx-auto mb-4 border border-orange-100 shadow-sm"><i class="fa-solid fa-phone-volume"></i></div>
                <h4 class="font-bold text-igheading mb-2">2. Consultation Call</h4>
                <p class="text-sm text-gray-500">Saurabh will call you within 2-4 hours to discuss the plan and pricing.</p>
            </div>
            <div class="text-center px-4 relative">
                <div class="hidden md:block absolute top-8 left-[-50%] w-full h-px bg-dashed border-t-2 border-dashed border-gray-200 z-[-1]"></div>
                <div class="w-16 h-16 bg-green-50 text-iggreen rounded-full flex items-center justify-center text-2xl mx-auto mb-4 border border-green-100 shadow-sm"><i class="fa-solid fa-rocket"></i></div>
                <h4 class="font-bold text-igheading mb-2">3. Project Initiation</h4>
                <p class="text-sm text-gray-500">Once confirmed, Anshul and the dev team start building your project immediately.</p>
            </div>
        </div>
    </section>

</main>

<link rel="stylesheet" href="assets/css/contact.css">
<script src="assets/js/contact.js"></script>

<?php include 'assets/footer.php'; ?>