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

{% block title %}Fonctionnalités Site Web : Éditeur, Blog, E-commerce | Izibrick{% endblock %}

{% block meta_description %}Découvrez les fonctionnalités Izibrick : éditeur visuel drag & drop, blog intégré, boutique e-commerce, SEO automatique. 100% responsive et sécurisé.{% endblock %}

{% block meta_keywords %}fonctionnalités site web, éditeur visuel, blog intégré, e-commerce, SEO, responsive{% endblock %}

{% block body %}

{# Hero Section #}
<section class="position-relative text-white overflow-hidden" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 8rem 0 6rem;">
    <div class="container">
        <div class="row justify-content-center text-center">
            <div class="col-lg-8" data-aos="fade-up">
                <h1 class="display-3 fw-bold mb-4">Fonctionnalités Puissantes</h1>
                <p class="lead mb-5" style="font-size: 1.25rem; opacity: 0.95;">
                    Tous les outils dont vous avez besoin pour créer un site professionnel qui convertit
                </p>
            </div>
        </div>
    </div>

    {# Smooth Wave Divider #}
    <div class="position-absolute bottom-0 start-0 w-100" style="line-height: 0;">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" preserveAspectRatio="none" style="width: 100%; height: 120px;">
            <path d="M0,64L48,69.3C96,75,192,85,288,80C384,75,480,53,576,48C672,43,768,53,864,64C960,75,1056,85,1152,80C1248,75,1344,53,1392,42.7L1440,32L1440,120L1392,120C1344,120,1248,120,1152,120C1056,120,960,120,864,120C768,120,672,120,576,120C480,120,384,120,288,120C192,120,96,120,48,120L0,120Z"
                  fill="#f8f9fa" fill-opacity="1"></path>
        </svg>
    </div>
</section>

{# Main Features Grid #}
<section class="py-5" style="background: #f8f9fa;">
    <div class="container py-5">
        <div class="row g-4">
            {# Feature 1: Website Builder #}
            <div class="col-lg-6" data-aos="fade-up">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body p-5">
                        <div class="d-flex align-items-start mb-4">
                            <div class="flex-shrink-0">
                                <div class="d-inline-flex align-items-center justify-content-center bg-primary bg-opacity-10 rounded-3 p-3">
                                    <i class="fas fa-palette fa-2x text-primary"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-4">
                                <h3 class="h4 fw-bold mb-3">Éditeur Visuel Intuitif</h3>
                                <p class="text-muted mb-4">Créez et modifiez votre site en temps réel avec notre éditeur drag & drop. Aucun code requis.</p>
                                <ul class="list-unstyled">
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Édition en temps réel</li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Bibliothèque de templates</li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Personnalisation complète</li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Aperçu multi-devices</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {# Feature 2: Responsive Design #}
            <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body p-5">
                        <div class="d-flex align-items-start mb-4">
                            <div class="flex-shrink-0">
                                <div class="d-inline-flex align-items-center justify-content-center bg-success bg-opacity-10 rounded-3 p-3">
                                    <i class="fas fa-mobile-alt fa-2x text-success"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-4">
                                <h3 class="h4 fw-bold mb-3">100% Responsive</h3>
                                <p class="text-muted mb-4">Votre site s'adapte parfaitement à tous les écrans et appareils automatiquement.</p>
                                <ul class="list-unstyled">
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Adaptatif desktop/tablette/mobile</li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Touch-friendly</li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Performance optimisée</li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Compatible tous navigateurs</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {# Feature 3: SEO #}
            <div class="col-lg-6" data-aos="fade-up" data-aos-delay="200">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body p-5">
                        <div class="d-flex align-items-start mb-4">
                            <div class="flex-shrink-0">
                                <div class="d-inline-flex align-items-center justify-content-center bg-warning bg-opacity-10 rounded-3 p-3">
                                    <i class="fas fa-search fa-2x text-warning"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-4">
                                <h3 class="h4 fw-bold mb-3">SEO & Référencement</h3>
                                <p class="text-muted mb-4">Optimisé pour les moteurs de recherche afin d'augmenter votre visibilité en ligne.</p>
                                <ul class="list-unstyled">
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Balises meta automatiques</li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> URLs optimisées</li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Sitemap XML généré</li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Schema.org markup</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {# Feature 4: E-commerce #}
            <div class="col-lg-6" data-aos="fade-up" data-aos-delay="300">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body p-5">
                        <div class="d-flex align-items-start mb-4">
                            <div class="flex-shrink-0">
                                <div class="d-inline-flex align-items-center justify-content-center bg-info bg-opacity-10 rounded-3 p-3">
                                    <i class="fas fa-shopping-cart fa-2x text-info"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-4">
                                <h3 class="h4 fw-bold mb-3">Solutions E-commerce</h3>
                                <p class="text-muted mb-4">Vendez vos produits et services en ligne avec notre système de paiement intégré.</p>
                                <ul class="list-unstyled">
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Paiement sécurisé (Stripe)</li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Gestion catalogue produits</li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Gestion des commandes</li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Facturation automatique</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{# Advanced Features #}
<section class="py-5" style="background: #ffffff;">
    <div class="container py-5">
        <div class="row justify-content-center mb-5" data-aos="fade-up">
            <div class="col-lg-8 text-center">
                <span class="badge bg-primary text-white px-3 py-2 mb-3 rounded-pill">Fonctionnalités Avancées</span>
                <h2 class="display-5 fw-bold mb-4">Plus de Possibilités</h2>
                <p class="lead text-muted">Des outils professionnels pour faire grandir votre business</p>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-md-6 col-lg-3" data-aos="zoom-in" data-aos-delay="100">
                <div class="text-center p-4">
                    <div class="d-inline-flex align-items-center justify-content-center bg-primary bg-opacity-10 rounded-circle mb-3" style="width: 80px; height: 80px;">
                        <i class="fas fa-blog fa-2x text-primary"></i>
                    </div>
                    <h5 class="fw-bold mb-2">Blog Intégré</h5>
                    <p class="text-muted small mb-0">Publiez vos articles et partagez votre expertise</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-3" data-aos="zoom-in" data-aos-delay="200">
                <div class="text-center p-4">
                    <div class="d-inline-flex align-items-center justify-content-center bg-success bg-opacity-10 rounded-circle mb-3" style="width: 80px; height: 80px;">
                        <i class="fas fa-envelope fa-2x text-success"></i>
                    </div>
                    <h5 class="fw-bold mb-2">Formulaires de Contact</h5>
                    <p class="text-muted small mb-0">Collectez les messages de vos visiteurs</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-3" data-aos="zoom-in" data-aos-delay="300">
                <div class="text-center p-4">
                    <div class="d-inline-flex align-items-center justify-content-center bg-warning bg-opacity-10 rounded-circle mb-3" style="width: 80px; height: 80px;">
                        <i class="fas fa-chart-line fa-2x text-warning"></i>
                    </div>
                    <h5 class="fw-bold mb-2">Analytics</h5>
                    <p class="text-muted small mb-0">Suivez vos statistiques de visites en temps réel</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-3" data-aos="zoom-in" data-aos-delay="400">
                <div class="text-center p-4">
                    <div class="d-inline-flex align-items-center justify-content-center bg-danger bg-opacity-10 rounded-circle mb-3" style="width: 80px; height: 80px;">
                        <i class="fas fa-shield-alt fa-2x text-danger"></i>
                    </div>
                    <h5 class="fw-bold mb-2">SSL Gratuit</h5>
                    <p class="text-muted small mb-0">Certificat de sécurité HTTPS inclus</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-3" data-aos="zoom-in" data-aos-delay="500">
                <div class="text-center p-4">
                    <div class="d-inline-flex align-items-center justify-content-center bg-info bg-opacity-10 rounded-circle mb-3" style="width: 80px; height: 80px;">
                        <i class="fas fa-images fa-2x text-info"></i>
                    </div>
                    <h5 class="fw-bold mb-2">Galeries Photos</h5>
                    <p class="text-muted small mb-0">Créez de magnifiques galeries d'images</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-3" data-aos="zoom-in" data-aos-delay="600">
                <div class="text-center p-4">
                    <div class="d-inline-flex align-items-center justify-content-center rounded-circle mb-3" style="width: 80px; height: 80px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                        <i class="fas fa-edit fa-2x text-white"></i>
                    </div>
                    <h5 class="fw-bold mb-2">CKEditor</h5>
                    <p class="text-muted small mb-0">Éditeur de texte riche et puissant</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-3" data-aos="zoom-in" data-aos-delay="700">
                <div class="text-center p-4">
                    <div class="d-inline-flex align-items-center justify-content-center bg-dark bg-opacity-10 rounded-circle mb-3" style="width: 80px; height: 80px;">
                        <i class="fas fa-cloud-upload-alt fa-2x text-dark"></i>
                    </div>
                    <h5 class="fw-bold mb-2">Gestionnaire Médias</h5>
                    <p class="text-muted small mb-0">Uploadez et gérez vos fichiers facilement</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-3" data-aos="zoom-in" data-aos-delay="800">
                <div class="text-center p-4">
                    <div class="d-inline-flex align-items-center justify-content-center bg-primary bg-opacity-10 rounded-circle mb-3" style="width: 80px; height: 80px;">
                        <i class="fas fa-sync fa-2x text-primary"></i>
                    </div>
                    <h5 class="fw-bold mb-2">Mises à Jour Auto</h5>
                    <p class="text-muted small mb-0">Toujours à jour sans intervention</p>
                </div>
            </div>
        </div>
    </div>
</section>

{# Templates Showcase #}
<section class="py-5" style="background: #f8f9fa;">
    <div class="container py-5">
        <div class="row justify-content-center mb-5" data-aos="fade-up">
            <div class="col-lg-8 text-center">
                <span class="badge bg-primary text-white px-3 py-2 mb-3 rounded-pill">Templates</span>
                <h2 class="display-5 fw-bold mb-4">Designs Professionnels</h2>
                <p class="lead text-muted">Choisissez parmi nos templates modernes et personnalisables</p>
            </div>
        </div>

        <div class="row g-4">
            {% for i in 1..6 %}
            <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="{{ i * 100 }}">
                <div class="card border-0 shadow-sm overflow-hidden h-100 hover-lift" style="transition: transform 0.3s ease;">
                    <div class="position-relative" style="padding-top: 75%; background: linear-gradient(135deg, {{ ['#667eea', '#f093fb', '#4facfe', '#43e97b', '#fa709a', '#30cfd0'][i-1] }} 0%, {{ ['#764ba2', '#f5576c', '#00f2fe', '#38f9d7', '#fee140', '#330867'][i-1] }} 100%);">
                        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center">
                            <div class="text-white text-center">
                                <i class="fas fa-desktop fa-3x mb-3"></i>
                                <p class="fw-bold mb-0">Template {{ i }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="card-body text-center p-4">
                        <h5 class="fw-bold mb-2">Template Professionnel {{ i }}</h5>
                        <p class="text-muted small mb-3">Design moderne et responsive</p>
                        <a href="#" class="btn btn-sm btn-outline-primary rounded-pill px-4">Aperçu</a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

{# CTA Section #}
<section class="py-5 text-white position-relative overflow-hidden" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
    <div class="container py-5">
        <div class="row justify-content-center text-center" data-aos="zoom-in">
            <div class="col-lg-8">
                <h2 class="display-4 fw-bold mb-4">Prêt à Commencer ?</h2>
                <p class="lead mb-5">Créez votre site professionnel en quelques minutes</p>
                <div class="d-flex flex-wrap justify-content-center gap-3">
                    {% set targetUrl = app.user ? path('admin_site_create', {'plan': 'starter'}) : path('app_register') %}
                    <a href="{{ targetUrl }}" class="btn btn-light btn-lg px-5 py-3 rounded-pill shadow-lg">
                        <i class="fas fa-rocket me-2"></i>Créer Mon Site
                    </a>
                    <a href="{{ path('price') }}" class="btn btn-outline-light btn-lg px-5 py-3 rounded-pill">
                        <i class="fas fa-tag me-2"></i>Voir les Tarifs
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .hover-lift:hover {
        transform: translateY(-10px);
        box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
    }
</style>

<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init({
        duration: 800,
        easing: 'ease-in-out',
        once: true
    });
</script>

{% endblock %}