<?php
/**
 * Homepage
 * Patel E-Mitra & Aadhaar Seva Kendra CMS
 */

require_once __DIR__ . '/config/config.php';

$db = getDB();

// Get featured services
$stmt = $db->query("SELECT * FROM services WHERE status = 'active' AND is_featured = 1 ORDER BY sort_order ASC LIMIT 6");
$featured_services = $stmt->fetchAll();

// Get active notices
$stmt = $db->query("SELECT * FROM notices WHERE status = 'active' ORDER BY priority DESC, created_at DESC LIMIT 3");
$notices = $stmt->fetchAll();

// Get gallery images
$stmt = $db->query("SELECT * FROM gallery WHERE status = 'active' ORDER BY created_at DESC LIMIT 6");
$gallery_images = $stmt->fetchAll();

// Get downloads
$stmt = $db->query("SELECT * FROM downloads WHERE status = 'active' ORDER BY sort_order ASC, created_at DESC LIMIT 5");
$downloads = $stmt->fetchAll();
?>
<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo getSetting('site_name', SITE_NAME); ?> | <?php echo getSetting('site_tagline', 'आपका विश्वसनीय डिजिटल सेवा केंद्र'); ?></title>
    <meta name="description" content="<?php echo getSetting('meta_description', 'Patel E-Mitra & Aadhaar Seva Kendra - All digital services under one roof'); ?>">
    <meta name="keywords" content="<?php echo getSetting('meta_keywords', 'e-mitra, aadhaar card, pan card, PVC card, CSC center, Bhuwana, Udaipur'); ?>">
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        body {
            font-family: 'Noto Sans Devanagari', sans-serif;
        }
        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Navigation -->
    <nav class="bg-white shadow-md sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-20">
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center gap-3">
                        <i class="fa-solid fa-building-columns text-blue-800 text-3xl"></i>
                        <div>
                            <h1 class="text-xl font-bold text-blue-900 leading-tight">Patel E-Mitra</h1>
                            <p class="text-sm text-orange-600 font-semibold">& Aadhaar Seva Kendra</p>
                        </div>
                    </div>
                </div>
                <div class="hidden md:flex items-center space-x-8">
                    <a href="#home" class="text-gray-700 hover:text-blue-800 font-medium transition">Home</a>
                    <a href="#services" class="text-gray-700 hover:text-blue-800 font-medium transition">Services</a>
                    <a href="#gallery" class="text-gray-700 hover:text-blue-800 font-medium transition">Gallery</a>
                    <a href="#downloads" class="text-gray-700 hover:text-blue-800 font-medium transition">Downloads</a>
                    <a href="#contact" class="bg-blue-800 text-white px-5 py-2 rounded-lg hover:bg-blue-900 transition font-medium">Contact</a>
                </div>
                <div class="md:hidden flex items-center">
                    <button id="mobile-menu-btn" class="text-gray-700 hover:text-blue-800">
                        <i class="fa-solid fa-bars text-2xl"></i>
                    </button>
                </div>
            </div>
        </div>
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
            <a href="#home" class="block px-4 py-3 text-gray-700 hover:bg-blue-50">Home</a>
            <a href="#services" class="block px-4 py-3 text-gray-700 hover:bg-blue-50">Services</a>
            <a href="#gallery" class="block px-4 py-3 text-gray-700 hover:bg-blue-50">Gallery</a>
            <a href="#downloads" class="block px-4 py-3 text-gray-700 hover:bg-blue-50">Downloads</a>
            <a href="#contact" class="block px-4 py-3 text-blue-800 font-semibold hover:bg-blue-50">Contact</a>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="home" class="bg-gradient-to-r from-blue-800 to-purple-800 text-white py-20">
        <div class="max-w-7xl mx-auto px-4 text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6"><?php echo getSetting('site_name', SITE_NAME); ?></h1>
            <p class="text-xl mb-8 text-blue-100"><?php echo getSetting('site_tagline', 'आपका विश्वसनीय डिजिटल सेवा केंद्र'); ?></p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="#services" class="bg-orange-500 text-white px-8 py-3 rounded-lg font-semibold text-lg hover:bg-orange-600 transition shadow-lg">
                    View Services
                </a>
                <a href="#contact" class="bg-white text-blue-900 px-8 py-3 rounded-lg font-semibold text-lg hover:bg-gray-100 transition shadow-lg">
                    Contact Us
                </a>
            </div>
        </div>
    </section>

    <!-- Notices -->
    <?php if (!empty($notices)): ?>
    <section class="bg-yellow-50 border-b border-yellow-200 py-4">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex items-center gap-4">
                <i class="fa-solid fa-bullhorn text-yellow-600 text-2xl"></i>
                <div class="flex-1 overflow-hidden">
                    <marquee behavior="scroll" direction="left" scrollamount="5">
                        <?php foreach ($notices as $notice): ?>
                            <span class="mx-8"><?php echo sanitize($notice['title']); ?> - <?php echo sanitize($notice['content']); ?></span>
                        <?php endforeach; ?>
                    </marquee>
                </div>
            </div>
        </div>
    </section>
    <?php endif; ?>

    <!-- Services Section -->
    <section id="services" class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Our Services</h2>
                <div class="w-24 h-1 bg-orange-500 mx-auto rounded"></div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <?php foreach ($featured_services as $service): ?>
                <div class="service-card bg-gray-50 p-8 rounded-xl border border-gray-100 transition duration-300">
                    <div class="w-14 h-14 bg-<?php echo $service['color']; ?>-100 rounded-full flex items-center justify-center mb-6">
                        <i class="<?php echo $service['icon']; ?> text-<?php echo $service['color']; ?>-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3"><?php echo sanitize($service['title']); ?></h3>
                    <p class="text-gray-600 mb-4"><?php echo sanitize($service['description']); ?></p>
                    <?php if ($service['price']): ?>
                        <p class="text-2xl font-bold text-<?php echo $service['color']; ?>-600">₹<?php echo number_format($service['price'], 2); ?></p>
                    <?php endif; ?>
                </div>
                <?php endforeach; ?>
            </div>
            
            <div class="text-center mt-8">
                <a href="pages/services.php" class="inline-block bg-blue-800 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-900 transition">
                    View All Services <i class="fa-solid fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- Gallery Section -->
    <?php if (!empty($gallery_images)): ?>
    <section id="gallery" class="py-16 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Gallery</h2>
                <div class="w-24 h-1 bg-orange-500 mx-auto rounded"></div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <?php foreach ($gallery_images as $image): ?>
                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                    <img src="<?php echo UPLOAD_URL . '/' . sanitize($image['image_path']); ?>" 
                         alt="<?php echo sanitize($image['alt_text'] ?? $image['title']); ?>" 
                         class="w-full h-64 object-cover">
                    <div class="p-4">
                        <h3 class="font-bold text-gray-900"><?php echo sanitize($image['title']); ?></h3>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>
    <?php endif; ?>

    <!-- Downloads Section -->
    <?php if (!empty($downloads)): ?>
    <section id="downloads" class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Downloads</h2>
                <div class="w-24 h-1 bg-orange-500 mx-auto rounded"></div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <?php foreach ($downloads as $download): ?>
                <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 hover:shadow-lg transition">
                    <div class="flex items-start gap-4">
                        <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                            <i class="fa-solid fa-file-pdf text-blue-600 text-xl"></i>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-bold text-gray-900 mb-2"><?php echo sanitize($download['title']); ?></h3>
                            <p class="text-sm text-gray-600 mb-3"><?php echo sanitize($download['description']); ?></p>
                            <a href="<?php echo UPLOAD_URL . '/' . sanitize($download['file_path']); ?>" 
                               download 
                               class="inline-flex items-center gap-2 text-blue-600 hover:text-blue-800 font-semibold">
                                <i class="fa-solid fa-download"></i>
                                Download
                            </a>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>
    <?php endif; ?>

    <!-- Contact Section -->
    <section id="contact" class="py-16 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Contact Us</h2>
                <div class="w-24 h-1 bg-orange-500 mx-auto rounded"></div>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- Contact Info -->
                <div class="space-y-6">
                    <div class="bg-white p-6 rounded-xl shadow-lg">
                        <div class="flex items-start gap-4">
                            <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fa-solid fa-location-dot text-blue-600 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-gray-900 mb-2">Address</h3>
                                <p class="text-gray-600"><?php echo nl2br(sanitize(getSetting('site_address', ''))); ?></p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white p-6 rounded-xl shadow-lg">
                        <div class="flex items-start gap-4">
                            <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fa-solid fa-phone text-green-600 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-gray-900 mb-2">Phone</h3>
                                <p class="text-gray-600"><?php echo sanitize(getSetting('site_phone', '')); ?></p>
                                <?php if (getSetting('site_phone_alt')): ?>
                                    <p class="text-gray-600"><?php echo sanitize(getSetting('site_phone_alt')); ?></p>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white p-6 rounded-xl shadow-lg">
                        <div class="flex items-start gap-4">
                            <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fa-solid fa-clock text-purple-600 text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-gray-900 mb-2">Working Hours</h3>
                                <p class="text-gray-600"><?php echo sanitize(getSetting('working_hours', '')); ?></p>
                                <p class="text-gray-600"><?php echo sanitize(getSetting('closed_days', '')); ?></p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Contact Form -->
                <div class="bg-white p-8 rounded-xl shadow-lg">
                    <h3 class="text-2xl font-bold text-gray-900 mb-6">Send us a message</h3>
                    <form action="pages/contact.php" method="POST" class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Name *</label>
                            <input type="text" name="name" required 
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Phone *</label>
                            <input type="tel" name="phone" required 
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
                            <input type="email" name="email" 
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Message *</label>
                            <textarea name="message" rows="4" required 
                                      class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"></textarea>
                        </div>
                        <button type="submit" class="w-full bg-blue-800 text-white font-semibold py-3 rounded-lg hover:bg-blue-900 transition">
                            Send Message
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-blue-900 text-white py-12">
        <div class="max-w-7xl mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
                <div>
                    <h3 class="text-xl font-bold mb-4">Patel E-Mitra & Aadhaar Seva Kendra</h3>
                    <p class="text-blue-200 text-sm"><?php echo getSetting('site_tagline', 'आपका विश्वसनीय डिजिटल सेवा केंद्र'); ?></p>
                </div>
                <div>
                    <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
                    <ul class="space-y-2 text-blue-200">
                        <li><a href="#home" class="hover:text-white transition">Home</a></li>
                        <li><a href="#services" class="hover:text-white transition">Services</a></li>
                        <li><a href="#gallery" class="hover:text-white transition">Gallery</a></li>
                        <li><a href="#contact" class="hover:text-white transition">Contact</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-semibold mb-4">Follow Us</h4>
                    <div class="flex gap-4">
                        <?php if (getSetting('site_facebook')): ?>
                        <a href="<?php echo sanitize(getSetting('site_facebook')); ?>" target="_blank" class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center hover:bg-blue-700 transition">
                            <i class="fa-brands fa-facebook-f text-white"></i>
                        </a>
                        <?php endif; ?>
                        <?php if (getSetting('site_instagram')): ?>
                        <a href="<?php echo sanitize(getSetting('site_instagram')); ?>" target="_blank" class="w-10 h-10 bg-pink-600 rounded-full flex items-center justify-center hover:bg-pink-700 transition">
                            <i class="fa-brands fa-instagram text-white"></i>
                        </a>
                        <?php endif; ?>
                        <?php if (getSetting('site_youtube')): ?>
                        <a href="<?php echo sanitize(getSetting('site_youtube')); ?>" target="_blank" class="w-10 h-10 bg-red-600 rounded-full flex items-center justify-center hover:bg-red-700 transition">
                            <i class="fa-brands fa-youtube text-white"></i>
                        </a>
                        <?php endif; ?>
                        <?php if (getSetting('site_whatsapp')): ?>
                        <a href="https://wa.me/<?php echo sanitize(getSetting('site_whatsapp')); ?>" target="_blank" class="w-10 h-10 bg-green-600 rounded-full flex items-center justify-center hover:bg-green-700 transition">
                            <i class="fa-brands fa-whatsapp text-white"></i>
                        </a>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
            <div class="border-t border-blue-800 pt-8 text-center text-blue-300 text-sm">
                <p>&copy; <?php echo date('Y'); ?> <?php echo SITE_NAME; ?>. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        const btn = document.getElementById('mobile-menu-btn');
        const menu = document.getElementById('mobile-menu');
        btn.addEventListener('click', () => menu.classList.toggle('hidden'));
        
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                menu.classList.add('hidden');
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>
