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

$stmt = $pdo->prepare("SELECT * FROM pages WHERE slug = :slug");
$stmt->execute(['slug' => 'associations']);
$page = $stmt->fetch();
$content = $page ? $page['content'] : 'Contenu non trouvé.';
$title = $page ? $page['title'] : 'Titre non trouvé';

// Fetch associations from database
$stmt = $pdo->query("SELECT * FROM associations ORDER BY name ASC");
$assos = $stmt->fetchAll();

include 'includes/header.php';
?>

<main class="min-h-screen py-16 bg-alsace-cream">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div class="flex justify-between items-end mb-12 border-b-2 border-alsace-red pb-6">
            <div>
                <h2 class="font-serif text-3xl md:text-4xl font-bold text-alsace-red mb-2">
                    Annuaire des Associations
                </h2>
                <p class="text-gray-600">Découvrez le dynamisme de la vie locale à Kutzenhausen.</p>
            </div>
            <a href="asso-login.php" class="bg-white border border-alsace-red text-alsace-red hover:bg-alsace-red hover:text-white px-6 py-2 rounded-full text-sm font-bold transition flex items-center shadow-sm">
                <i data-lucide="lock" class="w-4 h-4 mr-2"></i> Espace Association
            </a>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <?php foreach($assos as $asso): ?>
            <div class="bg-white rounded-2xl shadow-md overflow-hidden border border-gray-100 hover:shadow-xl transition flex flex-col">
                <div class="p-8 flex-grow">
                    <h3 class="font-serif text-2xl font-bold text-gray-900 mb-4 border-b pb-2 border-gray-100"><?php echo htmlspecialchars($asso['name']); ?></h3>
                    
                    <div class="space-y-4 mb-6">
                        <?php if($asso['president']): ?>
                        <div class="flex items-start text-gray-700">
                            <i data-lucide="user" class="w-5 h-5 mr-3 text-alsace-red shrink-0"></i>
                            <span class="text-sm font-medium">Président : <?php echo htmlspecialchars($asso['president']); ?></span>
                        </div>
                        <?php endif; ?>

                        <?php if($asso['address']): ?>
                        <div class="flex items-start text-gray-600">
                            <i data-lucide="map-pin" class="w-5 h-5 mr-3 text-alsace-red shrink-0"></i>
                            <span class="text-sm"><?php echo nl2br(htmlspecialchars($asso['address'])); ?></span>
                        </div>
                        <?php endif; ?>

                        <?php if($asso['email']): ?>
                        <div class="flex items-center text-gray-600">
                            <i data-lucide="mail" class="w-5 h-5 mr-3 text-alsace-red shrink-0"></i>
                            <a href="mailto:<?php echo htmlspecialchars($asso['email']); ?>" class="text-sm hover:text-alsace-red transition"><?php echo htmlspecialchars($asso['email']); ?></a>
                        </div>
                        <?php endif; ?>
                    </div>

                    <?php if($asso['description']): ?>
                    <p class="text-gray-600 text-sm leading-relaxed italic mb-6">
                        « <?php echo htmlspecialchars($asso['description']); ?> »
                    </p>
                    <?php endif; ?>
                </div>

                <div class="p-6 bg-gray-50 border-t border-gray-100 flex justify-center space-x-4">
                    <?php if($asso['website']): ?>
                    <a href="<?php echo htmlspecialchars($asso['website']); ?>" target="_blank" class="p-3 bg-white border border-gray-200 rounded-full text-gray-600 hover:text-alsace-red hover:border-alsace-red transition shadow-sm" title="Site Web">
                        <i data-lucide="globe" class="w-5 h-5"></i>
                    </a>
                    <?php endif; ?>

                    <?php if($asso['facebook']): ?>
                    <a href="<?php echo htmlspecialchars($asso['facebook']); ?>" target="_blank" class="p-3 bg-white border border-gray-200 rounded-full text-gray-600 hover:text-alsace-red hover:border-alsace-red transition shadow-sm" title="Facebook">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
                    </a>
                    <?php endif; ?>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</main>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        if(typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    });
</script>

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