<?php 
require_once 'config/database.php';

// Fetch published articles (general)
$stmt = $pdo->prepare("SELECT * FROM articles WHERE is_published = 1 AND association_id IS NULL AND (publish_start IS NULL OR publish_start <= CURDATE()) AND (publish_end IS NULL OR publish_end >= CURDATE()) ORDER BY created_at DESC LIMIT 3");
$stmt->execute();
$recent_articles = $stmt->fetchAll();

// Fetch published articles (associations)
$stmt = $pdo->prepare("SELECT ar.*, a.name as asso_name FROM articles ar JOIN associations a ON ar.association_id = a.id WHERE ar.is_published = 1 AND ar.association_id IS NOT NULL AND (ar.publish_start IS NULL OR ar.publish_start <= CURDATE()) AND (ar.publish_end IS NULL OR ar.publish_end >= CURDATE()) ORDER BY ar.created_at DESC LIMIT 3");
$stmt->execute();
$asso_articles = $stmt->fetchAll();

include 'includes/header.php'; 
?>
<main>
        <!-- HERO SECTION -->
        <section class="hero-section relative h-[500px] md:h-[600px] flex items-center">
            <!-- Overlay sombre pour la lisibilité du texte -->
            <div class="absolute inset-0 bg-black/40"></div>
            
            <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
                <div class="max-w-2xl">
                    <h2 class="font-serif text-4xl md:text-6xl font-bold text-white mb-4 leading-tight drop-shadow-lg">
                        Kutzenhausen:<br>L'Esprit Alsacien,<br>le Charme Rural.
                    </h2>
                    <p class="text-lg md:text-xl text-gray-100 mb-8 font-medium drop-shadow-md">
                        Bienvenue sur notre site officiel.
                    </p>
                    <a href="histoire-patrimoine.php" class="inline-block bg-alsace-cream text-alsace-red font-bold py-3 px-8 rounded hover:bg-white hover:shadow-lg transition duration-300">
                        Découvrir le village
                    </a>
                </div>
            </div>
        </section>

        <!-- CARTES ACCES RAPIDE (Chevauchement) -->
        <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-20 md:-mt-24 relative z-20">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                
                <!-- Carte 1: Actualités -->
                <div class="bg-alsace-cream rounded-xl shadow-xl p-6 border border-alsace-cream-dark hover:-translate-y-1 transition duration-300">
                    <h3 class="font-serif text-xl font-bold text-alsace-red mb-4 border-b pb-2 border-gray-200">Actualités & Événements</h3>
                    <div class="space-y-4">
                        <?php if (count($recent_articles) > 0): ?>
                            <?php foreach ($recent_articles as $article): ?>
                            <a href="article.php?slug=<?php echo htmlspecialchars($article['slug']); ?>" class="flex items-center space-x-3 cursor-pointer group">
                                <?php if ($article['image']): ?>
                                    <img src="uploads/<?php echo htmlspecialchars($article['image']); ?>" alt="<?php echo htmlspecialchars($article['title']); ?>" class="w-16 h-16 object-cover rounded-md group-hover:opacity-80 transition">
                                <?php else: ?>
                                    <img src="https://placehold.co/150x100/EAE0D5/7B2C2D?text=Actu" alt="Actu" class="w-16 h-16 object-cover rounded-md group-hover:opacity-80 transition">
                                <?php endif; ?>
                                <div>
                                    <p class="text-xs text-gray-500 font-medium"><?php echo date('d/m/Y', strtotime($article['created_at'])); ?></p>
                                    <h4 class="font-bold text-sm leading-tight group-hover:text-alsace-red transition"><?php echo htmlspecialchars($article['title']); ?></h4>
                                    <p class="text-xs text-gray-600 line-clamp-1"><?php echo htmlspecialchars($article['excerpt']); ?></p>
                                </div>
                            </a>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <p class="text-sm text-gray-600">Aucune actualité pour le moment.</p>
                        <?php endif; ?>
                        
                        <a href="actualites.php" class="block text-center text-sm font-bold text-alsace-red hover:underline mt-4">
                            Voir toutes les actualités <i data-lucide="chevron-right" class="inline w-4 h-4"></i>
                        </a>
                    </div>
                </div>

                <!-- Carte 2: Démarches -->
                <div class="bg-alsace-cream rounded-xl shadow-xl p-6 border border-alsace-cream-dark hover:-translate-y-1 transition duration-300">
                    <h3 class="font-serif text-xl font-bold text-alsace-red mb-4 border-b pb-2 border-gray-200">Démarches en Ligne</h3>
                    <div class="grid grid-cols-2 gap-4 text-center mt-6">
                        <a href="demarches.php" class="group flex flex-col items-center p-2 rounded hover:bg-alsace-cream-dark transition">
                            <i data-lucide="file-text" class="w-8 h-8 text-alsace-red mb-2 group-hover:scale-110 transition"></i>
                            <span class="text-xs font-bold">État Civil</span>
                        </a>
                        <a href="urbanisme.php" class="group flex flex-col items-center p-2 rounded hover:bg-alsace-cream-dark transition">
                            <i data-lucide="home" class="w-8 h-8 text-alsace-red mb-2 group-hover:scale-110 transition"></i>
                            <span class="text-xs font-bold">Urbanisme</span>
                        </a>
                        <a href="environnement.php" class="group flex flex-col items-center p-2 rounded hover:bg-alsace-cream-dark transition">
                            <i data-lucide="trash-2" class="w-8 h-8 text-alsace-red mb-2 group-hover:scale-110 transition"></i>
                            <span class="text-xs font-bold">Déchets</span>
                        </a>
                        <a href="salles.php" class="group flex flex-col items-center p-2 rounded hover:bg-alsace-cream-dark transition">
                            <i data-lucide="calendar-check" class="w-8 h-8 text-alsace-red mb-2 group-hover:scale-110 transition"></i>
                            <span class="text-xs font-bold">Salles</span>
                        </a>
                    </div>
                </div>

                <!-- Carte 3: Maison Rurale -->
                <div class="bg-alsace-cream rounded-xl shadow-xl p-6 border border-alsace-cream-dark hover:-translate-y-1 transition duration-300 flex flex-col">
                    <h3 class="font-serif text-xl font-bold text-alsace-red mb-4 border-b pb-2 border-gray-200">Maison Rurale</h3>
                    <div class="flex-grow">
                        <img src="https://www.alsace-verte.com/wp-content/uploads/2022/04/Kutzenhausen-Maison-Rurale-3-%C2%A9OTI-de-lAlsace-Verte-I-Cedric-Schell-1.jpg" alt="Maison Rurale" class="w-full h-32 object-cover rounded-md mb-4 shadow-sm">
                        <p class="text-sm text-gray-600 mb-2">Découvrez le patrimoine paysan de l'Outre-Forêt.</p>
                    </div>
                    <a href="https://www.maison-rurale.fr/" target="_blank" class="text-alsace-red font-bold text-sm flex items-center hover:underline mt-auto">
                        Plus d'informations <i data-lucide="chevron-right" class="w-4 h-4 ml-1"></i>
                    </a>
                </div>

                <!-- Carte 4: Carte Interactive -->
                <div class="bg-alsace-cream rounded-xl shadow-xl p-6 border border-alsace-cream-dark hover:-translate-y-1 transition duration-300 flex flex-col">
                    <h3 class="font-serif text-xl font-bold text-alsace-red mb-4 border-b pb-2 border-gray-200">Carte Interactive</h3>
                    <div class="flex-grow">
                        <div class="relative w-full h-32 rounded-md mb-2 shadow-sm overflow-hidden bg-gray-100">
                            <iframe 
                                src="https://maps.google.com/maps?q=Kutzenhausen,+67250,+France&hl=fr&z=14&output=embed" 
                                width="100%" 
                                height="100%" 
                                style="border:0;" 
                                allowfullscreen="" 
                                loading="lazy" 
                                referrerpolicy="no-referrer-when-downgrade">
                            </iframe>
                        </div>
                        <p class="text-sm text-gray-600 mt-2">Retrouvez-nous sur la carte et calculez votre itinéraire.</p>
                    </div>
                    <a href="plan.php" class="text-alsace-red font-bold text-sm flex items-center hover:underline mt-auto">
                        Découvrir la randonnée <i data-lucide="chevron-right" class="w-4 h-4 ml-1"></i>
                    </a>
                </div>

            </div>
        </section>

        <!-- SECTION VIE ASSOCIATIVE -->
        <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
            <div class="mb-10">
                <h2 class="font-serif text-3xl font-bold text-alsace-red mb-2">Vie Associative et Locale : Le Cœur du Village</h2>
                <p class="text-gray-600 text-lg">Nouvelles et actualités des associations et des écoles de Kutzenhausen.</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <?php if (count($asso_articles) > 0): ?>
                    <?php foreach ($asso_articles as $article): ?>
                    <div class="flex items-start space-x-4 bg-white p-4 rounded-lg shadow-sm border border-gray-100 group">
                        <a href="article.php?slug=<?php echo htmlspecialchars($article['slug']); ?>" class="flex-shrink-0">
                            <?php if ($article['image']): ?>
                                <img src="uploads/<?php echo htmlspecialchars($article['image']); ?>" alt="<?php echo htmlspecialchars($article['title']); ?>" class="w-24 h-24 object-cover rounded-md group-hover:opacity-80 transition">
                            <?php else: ?>
                                <img src="https://placehold.co/150x100/EAE0D5/7B2C2D?text=Asso" alt="Asso" class="w-24 h-24 object-cover rounded-md group-hover:opacity-80 transition">
                            <?php endif; ?>
                        </a>
                        <div>
                            <span class="text-[10px] font-bold text-alsace-red uppercase tracking-widest"><?php echo htmlspecialchars($article['asso_name']); ?></span>
                            <h4 class="font-bold text-gray-800 text-lg mb-1 group-hover:text-alsace-red transition">
                                <a href="article.php?slug=<?php echo htmlspecialchars($article['slug']); ?>"><?php echo htmlspecialchars($article['title']); ?></a>
                            </h4>
                            <p class="text-sm text-gray-600 line-clamp-2"><?php echo htmlspecialchars($article['excerpt']); ?></p>
                        </div>
                    </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <p class="col-span-3 text-center text-gray-500 italic">Aucune actualité associative pour le moment.</p>
                <?php endif; ?>
            </div>
            
            <div class="mt-8 text-center">
                <a href="associations.php" class="inline-block border-2 border-alsace-red text-alsace-red font-bold py-2 px-6 rounded hover:bg-alsace-red hover:text-white transition duration-300">
                    Voir l'annuaire des associations
                </a>
            </div>
        </section>
    </main>

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