{% extends 'base.html.twig' %}

{% block title %}Antiquités en France - Marketplace d'Antiquités Françaises{% endblock %}

{% block head %}
<!-- AOS Animation Library -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
{% endblock %}

{% set body_class = 'page-with-hero' %}

{% block hero %}
<!-- Hero Section - En pleine largeur -->
    <section class="hero-section">
        <div class="hero-decoration">
            <i class="fas fa-chess-rook"></i>
        </div>
        
        <div class="container">
            <div class="hero-content" data-aos="fade-up" data-aos-duration="1000">
                <h1 class="hero-title">
                    Découvrez l'Art<br>
                <span style="color: var(--aef-accent-gold);">Français</span> d'Exception
            </h1>
                
                <p class="hero-subtitle">
                    Plongez dans l'univers fascinant des antiquités françaises. Notre marketplace exclusive 
                    vous connecte aux plus prestigieuses galeries d'antiquaires de France.
            </p>
                
                <div class="hero-buttons">
                    <a href="{{ path('catalog_index') }}" class="btn-hero-primary">
                        <i class="fas fa-search"></i>
                        Explorer le Catalogue
                </a>
                    <a href="{{ path('directory_index') }}" class="btn-hero-secondary">
                        <i class="fas fa-users"></i>
                        Nos Antiquaires
                    </a>
</div>

                <div class="hero-stats">
                    <div class="stat-item">
                        <span class="stat-number">{{ memberStats.active_members|default(150) }}</span>
                        <span class="stat-label">Antiquaires</span>
            </div>
                    <div class="stat-item">
                        <span class="stat-number">
                    {% set totalItems = 0 %}
                    {% for stat in categoryStats %}
                        {% set totalItems = totalItems + stat.item_count %}
                    {% endfor %}
                            {{ totalItems > 0 ? totalItems : 12500 }}
                        </span>
                        <span class="stat-label">Objets d'Art</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">{{ categoryStats|length > 0 ? categoryStats|length : 25 }}</span>
                        <span class="stat-label">Catégories</span>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block body %}
<div class="home-page">

    <!-- Section Objets Récents -->
    <section class="recent-items-section">
        <div class="container">
            <div class="section-header" data-aos="fade-up">
                <h2 class="section-title">Dernières Découvertes</h2>
                <p class="section-subtitle">
                    Explorez les derniers trésors ajoutés par nos antiquaires partenaires
                </p>
    </div>

    {% if latestItems|length > 0 %}
                <div class="items-grid">
            {% for item in latestItems %}
                        <article class="item-card" data-aos="fade-up" data-aos-delay="{{ loop.index * 100 }}">
                            <div class="item-image">
                            {% set firstImage = item.images|first %}
                            {% if firstImage %}
                                    <img src="/uploads/items/{{ firstImage.filename }}" alt="{{ item.title }}">
                            {% else %}
                                    <div class="placeholder-image">
                                        <i class="fas fa-image"></i>
                                    </div>
                                {% endif %}
                                <div class="item-overlay">
                                    <a href="{{ path('catalog_item_show', {id: item.id}) }}" class="view-btn">
                                        <i class="fas fa-eye me-2"></i>Découvrir
                                    </a>
                                </div>
                            </div>

                            <div class="item-info">
                                <h3 class="item-title">{{ item.title }}</h3>
                                <p class="item-description">{{ item.description|striptags }}</p>
                                <div class="item-price">{{ item.price|number_format(0, ',', ' ') }}</div>
                                <div class="item-member">
                                    <i class="fas fa-store"></i>
                                    {{ item.member.companyName }}
                                </div>
                                {% if item.category %}
                                    <span class="item-badge">{{ item.category.name }}</span>
                                {% endif %}
                            </div>
                        </article>
                    {% endfor %}
                </div>
            {% else %}
                <!-- Placeholders pour démonstration -->
                <div class="items-grid">
                    {% for i in 1..8 %}
                        <article class="item-card" data-aos="fade-up" data-aos-delay="{{ i * 100 }}">
                            <div class="item-image">
                                <div class="placeholder-image">
                                    <i class="fas fa-image"></i>
                                </div>
                                <div class="item-overlay">
                                    <a href="#" class="view-btn">
                                        <i class="fas fa-eye me-2"></i>Découvrir
                                    </a>
                                </div>
                            </div>

                            <div class="item-info">
                                {% set titles = [
                                    'Commode Louis XV Marquetée',
                                    'Pendule Empire Bronze Doré',
                                    'Bergère Louis XVI Tapissée',
                                    'Secrétaire Napoléon III',
                                    'Lustre Cristal de Baccarat',
                                    'Service Porcelaine de Sèvres',
                                    'Sculpture Bronze de Barye',
                                    'Table Salon Art Déco'
                                ] %}
                                
                                {% set descriptions = [
                                    'Magnifique commode d\'époque en marqueterie de bois précieux avec bronzes dorés.',
                                    'Pendule d\'époque Empire en bronze ciselé et doré au mercure, mouvement d\'origine.',
                                    'Bergère d\'époque Louis XVI en hêtre mouluré, tapisserie d\'Aubusson.',
                                    'Secrétaire à abattant en acajou flammé avec incrustations de nacre.',
                                    'Lustre à pampilles en cristal taillé, manufacture de Baccarat XIXe siècle.',
                                    'Service complet en porcelaine tendre de Sèvres à décor polychrome.',
                                    'Sculpture animalière en bronze patiné, signée Antoine-Louis Barye.',
                                    'Table basse Art Déco en palissandre et marqueterie géométrique.'
                                ] %}
                                
                                {% set prices = [15500, 4800, 6500, 8900, 12000, 3200, 7800, 3500] %}
                                
                                {% set dealers = [
                                    'Antiquités Dubois',
                                    'Galerie Saint-Honoré',
                                    'Maison Verneuil',
                                    'Antiquités du Faubourg',
                                    'Collection Prestige',
                                    'Galerie des Arts',
                                    'Antiquités Royales',
                                    'Galerie Napoléon'
                                ] %}
                                
                                {% set categories = [
                                    'Mobilier',
                                    'Horlogerie',
                                    'Sièges',
                                    'Secrétaires',
                                    'Luminaires',
                                    'Porcelaines',
                                    'Sculptures',
                                    'Tables'
                                ] %}
                                
                                <h3 class="item-title">{{ titles[i-1] }}</h3>
                                <p class="item-description">{{ descriptions[i-1] }}</p>
                                <div class="item-price">{{ prices[i-1]|number_format(0, ',', ' ') }}</div>
                                <div class="item-member">
                                    <i class="fas fa-store"></i>
                                    {{ dealers[i-1] }}
                                </div>
                                <span class="item-badge">{{ categories[i-1] }}</span>
                        </div>
                        </article>
                    {% endfor %}
                </div>
            {% endif %}
            
            <div class="text-center mt-5" data-aos="fade-up">
                <a href="{{ path('catalog_index') }}" class="btn-hero-primary">
                    <i class="fas fa-arrow-right"></i>
                    Voir Tout le Catalogue
                </a>
        </div>
        </div>
    </section>

    <!-- Section Catégories -->
    <section class="categories-section">
        <div class="container">
            <div class="section-header" data-aos="fade-up">
                <h2 class="section-title">Explorez nos Catégories</h2>
                <p class="section-subtitle">
                    Découvrez notre sélection organisée par spécialités d'antiquités françaises
                </p>
</div>

    {% if mainCategories|length > 0 %}
                <div class="categories-grid">
            {% for category in mainCategories %}
                        <div class="category-card" data-aos="fade-up" data-aos-delay="{{ loop.index * 100 }}">
                            <div class="category-icon">
                                <i class="fas fa-{{ category.icon ?? 'cube' }}"></i>
                            </div>
                            <h3 class="category-title">{{ category|translate_category }}</h3>
                            {% set categoryDescription = category|translate_category_desc %}
                            {% if categoryDescription %}
                                <p class="category-description">{{ categoryDescription }}</p>
                            {% endif %}
                            
                            {% set categoryItemCount = 0 %}
                            {% for stat in categoryStats %}
                                {% if stat.category_name == category.name %}
                                    {% set categoryItemCount = stat.item_count %}
                                {% endif %}
                            {% endfor %}
                            
                            <div class="category-count">{{ categoryItemCount }} objets</div>
                            
                            <a href="{{ path('catalog_category', {id: category.id}) }}" class="category-btn">
                                Découvrir
                            </a>
                </div>
            {% endfor %}
                </div>
            {% else %}
                <!-- Placeholders catégories -->
                <div class="categories-grid">
                    {% for i in 1..6 %}
                        <div class="category-card" data-aos="fade-up" data-aos-delay="{{ i * 100 }}">
                            {% set icons = ['chair', 'gem', 'clock', 'palette', 'chess-rook', 'vase'] %}
                            {% set titles = ['Mobilier', 'Bijoux & Objets Précieux', 'Horlogerie', 'Art & Peintures', 'Sculptures', 'Céramiques'] %}
                            {% set descriptions = [
                                'Meubles d\'époque et de style français',
                                'Bijoux anciens et objets d\'art précieux',
                                'Pendules, montres et horlogerie fine',
                                'Tableaux et œuvres d\'art diverses',
                                'Sculptures en bronze, marbre et bois',
                                'Porcelaines, faïences et céramiques'
                            ] %}
                            {% set counts = [450, 320, 180, 290, 160, 220] %}
                            
                            <div class="category-icon">
                                <i class="fas fa-{{ icons[i-1] }}"></i>
            </div>
                            <h3 class="category-title">{{ titles[i-1] }}</h3>
                            <p class="category-description">{{ descriptions[i-1] }}</p>
                            <div class="category-count">{{ counts[i-1] }} objets</div>
                            <a href="#" class="category-btn">Découvrir</a>
            </div>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </section>
</div>

<!-- AOS Animation Script -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init({
        duration: 800,
        easing: 'ease-out-cubic',
        once: true,
        offset: 100
    });
</script>
{% endblock %}