require_once 'includes/db.php';

// Fetch site settings
$settings_raw = $pdo->query("SELECT * FROM site_content")->fetchAll();
$site_settings = [];
foreach($settings_raw as $s) {
    $site_settings[$s['section_key']] = $s['section_value'];
}

$msg = '';
$err = '';

if($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name = trim($_POST['name'] ?? '');
    $email = trim($_POST['email'] ?? '');
    $phone = trim($_POST['phone'] ?? '');
    $subject = trim($_POST['subject'] ?? '');
    $message = trim($_POST['message'] ?? '');

    if(!empty($name) && !empty($email) && !empty($message)) {
        $msg = "Thank you! Your message has been sent. We'll get back to you shortly.";
    } else {
        $err = "Please fill in all required fields.";
    }
}

require_once 'includes/header.php';
?>

<div class="container mx-auto px-6 lg:px-12 py-16 pt-32 max-w-6xl">
    <div class="text-center mb-16">
        <div class="inline-block px-4 py-1 rounded-full border border-neon-blue/30 bg-neon-blue/10 text-neon-blue text-xs font-bold tracking-wider mb-4 uppercase">
            <i class="fa-solid fa-circle-dot text-[10px] mr-2"></i> Get In Touch
        </div>
        <h1 class="text-4xl lg:text-6xl font-heading font-extrabold text-white mb-6">How Can We Help <span class="text-transparent bg-clip-text bg-gradient-to-r from-neon-blue to-neon-purple">You?</span></h1>
        <p class="text-gray-400 max-w-2xl mx-auto text-lg">Reach out for floor plan support, Vastu queries, or any<br>questions. We respond within 24 hours.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        
        <!-- Contact Details -->
        <div class="glass-card rounded-3xl border-t-4 border-neon-blue relative overflow-hidden flex flex-col">
            <div class="absolute inset-0 bg-gradient-to-b from-neon-blue/5 to-transparent pointer-events-none"></div>
            <div class="p-10 relative z-10 flex-1">
                <h3 class="text-2xl font-bold text-white mb-2">Contact <span class="text-neon-blue">Details</span></h3>
                <p class="text-gray-400 mb-10 text-sm">Choose the most convenient way to reach us. We're available Mon-Sat,<br>9AM to 7PM IST.</p>

                <div class="space-y-6">
                    <div class="flex items-center gap-5 p-4 rounded-2xl border border-white/5 bg-white/5 hover:bg-white/10 transition">
                        <div class="w-12 h-12 rounded-xl border border-white/10 bg-navy-900 flex items-center justify-center shrink-0">
                            <i class="fa-solid fa-envelope text-neon-blue"></i>
                        </div>
                        <div>
                            <h4 class="text-white font-bold mb-1">Email</h4>
                            <p class="text-gray-400 text-sm">info@AdityaLoot.com</p>
                        </div>
                    </div>
 
                    <div class="flex items-center gap-5 p-4 rounded-2xl border border-white/5 bg-white/5 hover:bg-white/10 transition">
                        <div class="w-12 h-12 rounded-xl border border-white/10 bg-navy-900 flex items-center justify-center shrink-0">
                            <i class="fa-solid fa-phone text-neon-blue"></i>
                        </div>
                        <div>
                            <h4 class="text-white font-bold mb-1">Phone</h4>
                            <p class="text-gray-400 text-sm">9219565158</p>
                        </div>
                    </div>

                    <div class="flex items-center gap-5 p-4 rounded-2xl border border-white/5 bg-white/5 hover:bg-white/10 transition">
                        <div class="w-12 h-12 rounded-xl border border-white/10 bg-navy-900 flex items-center justify-center shrink-0">
                            <i class="fa-solid fa-location-dot text-neon-blue"></i>
                        </div>
                        <div>
                            <h4 class="text-white font-bold mb-1">Location</h4>
                            <p class="text-gray-400 text-sm">Uttar Pradesh, India</p>
                        </div>
                    </div>

                    <div class="flex items-center gap-5 p-4 rounded-2xl border border-white/5 bg-white/5 hover:bg-white/10 transition">
                        <div class="w-12 h-12 rounded-xl border border-white/10 bg-navy-900 flex items-center justify-center shrink-0">
                            <i class="fa-solid fa-clock text-neon-blue"></i>
                        </div>
                        <div>
                            <h4 class="text-white font-bold mb-1">Hours</h4>
                            <p class="text-gray-400 text-sm">Mon-Sat: 9AM – 7PM IST</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Contact Form -->
        <div class="glass-card rounded-3xl border-t-4 border-neon-purple relative overflow-hidden flex flex-col">
            <div class="absolute inset-0 bg-gradient-to-b from-neon-purple/5 to-transparent pointer-events-none"></div>
            <div class="p-10 relative z-10 flex-1">
                <h3 class="text-2xl font-bold text-white mb-2">Send a <span class="text-neon-purple">Message</span></h3>
                <p class="text-gray-400 mb-8 text-sm">We'll reply to your message within 24 hours.</p>
                
                                
                <form method="POST" class="space-y-5">
                    <div>
                        <label class="block text-[10px] font-bold text-gray-400 mb-2 uppercase tracking-wider">Full Name <span class="text-red-500">*</span></label>
                        <input type="text" name="name" required class="w-full bg-navy-950/40 border border-white/5 rounded-xl px-4 py-3 text-white focus:border-neon-purple focus:bg-navy-950/80 outline-none transition text-sm" placeholder="Your full name">
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-[10px] font-bold text-gray-400 mb-2 uppercase tracking-wider">Email <span class="text-red-500">*</span></label>
                            <input type="email" name="email" required class="w-full bg-navy-950/40 border border-white/5 rounded-xl px-4 py-3 text-white focus:border-neon-purple focus:bg-navy-950/80 outline-none transition text-sm" placeholder="you@example.com">
                        </div>
                        <div>
                            <label class="block text-[10px] font-bold text-gray-400 mb-2 uppercase tracking-wider">Phone / WhatsApp <span class="text-red-500">*</span></label>
                            <input type="text" name="phone" required class="w-full bg-navy-950/40 border border-white/5 rounded-xl px-4 py-3 text-white focus:border-neon-purple focus:bg-navy-950/80 outline-none transition text-sm" placeholder="Phone / WhatsApp">
                        </div>
                    </div>

                    <div>
                        <label class="block text-[10px] font-bold text-gray-400 mb-2 uppercase tracking-wider">Subject <span class="text-red-500">*</span></label>
                        <input type="text" name="subject" required class="w-full bg-navy-950/40 border border-white/5 rounded-xl px-4 py-3 text-white focus:border-neon-purple focus:bg-navy-950/80 outline-none transition text-sm" placeholder="Subject">
                    </div>

                    <div>
                        <label class="block text-[10px] font-bold text-gray-400 mb-2 uppercase tracking-wider">Message <span class="text-red-500">*</span></label>
                        <textarea name="message" required rows="4" class="w-full bg-navy-950/40 border border-white/5 rounded-xl px-4 py-3 text-white focus:border-neon-purple focus:bg-navy-950/80 outline-none transition resize-none text-sm" placeholder="Describe your query in detail..."></textarea>
                        <div class="text-right text-[10px] text-gray-500 mt-1">0 / 800</div>
                    </div>

                    <button type="submit" class="w-full bg-gradient-to-r from-cyan-400 to-blue-500 hover:from-cyan-300 hover:to-blue-400 py-3.5 rounded-xl text-navy-950 font-bold mt-2 shadow-[0_0_20px_rgba(34,211,238,0.4)] transition flex items-center justify-center gap-2">
                        Send Message <i class="fa-solid fa-arrow-right"></i>
                    </button>
                </form>
            </div>
        </div>

    </div>
</div>

</div> <!-- End pt-24 wrapper -->

<!-- Footer -->
<footer class="mt-20 border-t border-white/10 bg-navy-950 pt-16 pb-8">
    <div class="container mx-auto px-6 lg:px-12">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
            <div class="col-span-1 md:col-span-2">
                <a href="index.php" class="text-3xl font-heading font-bold text-white flex items-center gap-2 mb-6">
                    <i class="fa-solid fa-layer-group neon-text-blue"></i> Naksha<span class="neon-text-purple">AI</span>
                </a>
                <p class="text-gray-400 leading-relaxed max-w-md mb-6">
                    Generate professional 2D & 3D architectural floor plans instantly using cutting-edge AI technology. Premium designs for everyone.
                </p>
                <div class="flex space-x-4">
                    <a href="#" class="w-10 h-10 rounded-full glass-card flex items-center justify-center text-gray-300 hover:text-neon-blue transition"><i class="fa-brands fa-twitter"></i></a>
                    <a href="#" class="w-10 h-10 rounded-full glass-card flex items-center justify-center text-gray-300 hover:text-neon-purple transition"><i class="fa-brands fa-instagram"></i></a>
                    <a href="#" class="w-10 h-10 rounded-full glass-card flex items-center justify-center text-gray-300 hover:text-neon-blue transition"><i class="fa-brands fa-linkedin-in"></i></a>
                </div>
            </div>
            
            <div>
                <h4 class="text-white font-semibold text-lg mb-6">Quick Links</h4>
                <ul class="space-y-3">
                    <li><a href="index.php" class="text-gray-400 hover:text-white transition">Home</a></li>
                    <li><a href="#features" class="text-gray-400 hover:text-white transition">Features</a></li>
                    <li><a href="#pricing" class="text-gray-400 hover:text-white transition">Pricing</a></li>
                    <li><a href="templates.php" class="text-gray-400 hover:text-white transition">Templates</a></li>
                </ul>
            </div>
            
            <div>
                <h4 class="text-white font-semibold text-lg mb-6">Support</h4>
                <ul class="space-y-3">
                    <li><a href="contact.php" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
                    <li><a href="faq.php" class="text-gray-400 hover:text-white transition">FAQ</a></li>
                    <li><a href="terms.php" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
                    <li><a href="privacy.php" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
                </ul>
            </div>
        </div>
        
        <div class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center">
            <p class="text-gray-500 text-sm">© 2026 NakshaAI. All rights reserved.</p>
            <p class="text-gray-500 text-sm mt-4 md:mt-0 flex items-center gap-2">
                Built with <i class="fa-solid fa-heart text-red-500"></i> by AdityaLoot
            </p>
        </div>
    </div>
</footer>

</body>
</html>