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

{% block title %}Créateur de Site Internet Professionnel en 15 Min | Izibrick{% endblock %}

{% block meta_description %}Créez votre site web professionnel en 15 minutes sans coder. Solution tout-en-un : design moderne, responsive, SEO optimisé. Essai gratuit 30 jours.{% endblock %}

{% block meta_keywords %}créateur site internet, site professionnel rapide, créer site web, sans coder, solution tout-en-un, site responsive{% endblock %}

{% block body %}

{# Hero Section - Modern gradient design #}
<section class="position-relative overflow-hidden" style="min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
    <div class="container">
        <div class="row min-vh-100 align-items-center">
            <div class="col-lg-6 text-white" data-aos="fade-right">
                <h1 class="display-3 fw-bold mb-4" style="line-height: 1.2;">
                    Créez votre site internet professionnel
                    <span class="d-block" style="background: linear-gradient(90deg, #ffd89b 0%, #19547b 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">en 15 minutes</span>
                </h1>
                <p class="lead mb-5" style="font-size: 1.25rem; opacity: 0.95;">
                    Solution tout-en-un pour créer, gérer et développer votre présence en ligne sans compétences techniques
                </p>
                <div class="d-flex flex-wrap 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" style="font-weight: 600;">
                        <i class="fas fa-rocket me-2"></i>Commencer gratuitement
                    </a>
                    <a href="{{ path('features') }}" class="btn btn-outline-light btn-lg px-5 py-3 rounded-pill">
                        <i class="fas fa-info-circle me-2"></i>En savoir plus
                    </a>
                </div>

                {# Trust indicators #}
                <div class="mt-5 pt-4" style="border-top: 1px solid rgba(255,255,255,0.2);">
                    <div class="row text-center">
                        <div class="col-4">
                            <h3 class="fw-bold mb-0">500+</h3>
                            <small style="opacity: 0.8;">Sites créés</small>
                        </div>
                        <div class="col-4">
                            <h3 class="fw-bold mb-0">98%</h3>
                            <small style="opacity: 0.8;">Satisfaction</small>
                        </div>
                        <div class="col-4">
                            <h3 class="fw-bold mb-0">24/7</h3>
                            <small style="opacity: 0.8;">Support</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6" data-aos="fade-left">
                <div class="position-relative">
                    <img src="{{ asset('templates/bo/img/hero-illustration.svg') }}" alt="Website Builder" class="img-fluid"
                         onerror="this.src='{{ asset('templates/bo/img/bg6.png') }}'" style="filter: drop-shadow(0 20px 60px rgba(0,0,0,0.3));">
                </div>
            </div>
        </div>
    </div>

    {# Animated background shapes #}
    <div class="position-absolute" style="top: 10%; left: 5%; width: 100px; height: 100px; background: rgba(255,255,255,0.1); border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; animation: float 6s ease-in-out infinite;"></div>
    <div class="position-absolute" style="bottom: 10%; right: 10%; width: 150px; height: 150px; background: rgba(255,255,255,0.1); border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; animation: float 8s ease-in-out infinite;"></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>

{# Services Section - Card-based modern design #}
<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">Nos Services</span>
                <h2 class="display-5 fw-bold mb-4">Tout ce dont vous avez besoin</h2>
                <p class="lead text-muted">Des outils puissants et simples pour créer un site professionnel</p>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">
                <div class="card h-100 border-0 shadow-sm hover-lift" style="transition: transform 0.3s ease;">
                    <div class="card-body p-4">
                        <div class="d-inline-flex align-items-center justify-content-center bg-primary bg-opacity-10 rounded-circle mb-4" style="width: 70px; height: 70px;">
                            <i class="fas fa-bolt fa-2x text-primary"></i>
                        </div>
                        <h4 class="fw-bold mb-3">Rapide et Intuitif</h4>
                        <p class="text-muted mb-0">Créez votre site en quelques minutes grâce à notre interface simple et intuitive. Aucune compétence technique requise.</p>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
                <div class="card h-100 border-0 shadow-sm hover-lift" style="transition: transform 0.3s ease;">
                    <div class="card-body p-4">
                        <div class="d-inline-flex align-items-center justify-content-center bg-success bg-opacity-10 rounded-circle mb-4" style="width: 70px; height: 70px;">
                            <i class="fas fa-mobile-alt fa-2x text-success"></i>
                        </div>
                        <h4 class="fw-bold mb-3">100% Responsive</h4>
                        <p class="text-muted mb-0">Votre site s'adapte automatiquement à tous les écrans : ordinateur, tablette et smartphone. Design parfait partout.</p>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
                <div class="card h-100 border-0 shadow-sm hover-lift" style="transition: transform 0.3s ease;">
                    <div class="card-body p-4">
                        <div class="d-inline-flex align-items-center justify-content-center bg-warning bg-opacity-10 rounded-circle mb-4" style="width: 70px; height: 70px;">
                            <i class="fas fa-search fa-2x text-warning"></i>
                        </div>
                        <h4 class="fw-bold mb-3">SEO Optimisé</h4>
                        <p class="text-muted mb-0">Votre site respecte les standards du web pour un référencement naturel optimal sur Google et les moteurs de recherche.</p>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="400">
                <div class="card h-100 border-0 shadow-sm hover-lift" style="transition: transform 0.3s ease;">
                    <div class="card-body p-4">
                        <div class="d-inline-flex align-items-center justify-content-center bg-info bg-opacity-10 rounded-circle mb-4" style="width: 70px; height: 70px;">
                            <i class="fas fa-shield-alt fa-2x text-info"></i>
                        </div>
                        <h4 class="fw-bold mb-3">Sécurité Maximale</h4>
                        <p class="text-muted mb-0">Hébergement sécurisé, certificat SSL inclus et sauvegardes automatiques pour protéger vos données.</p>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="500">
                <div class="card h-100 border-0 shadow-sm hover-lift" style="transition: transform 0.3s ease;">
                    <div class="card-body p-4">
                        <div class="d-inline-flex align-items-center justify-content-center bg-danger bg-opacity-10 rounded-circle mb-4" style="width: 70px; height: 70px;">
                            <i class="fas fa-palette fa-2x text-danger"></i>
                        </div>
                        <h4 class="fw-bold mb-3">Design Moderne</h4>
                        <p class="text-muted mb-0">Templates professionnels et personnalisables à l'infini. Créez un site unique qui vous ressemble.</p>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="600">
                <div class="card h-100 border-0 shadow-sm hover-lift" style="transition: transform 0.3s ease;">
                    <div class="card-body p-4">
                        <div class="d-inline-flex align-items-center justify-content-center bg-purple bg-opacity-10 rounded-circle mb-4" style="width: 70px; height: 70px;">
                            <i class="fas fa-headset fa-2x" style="color: #764ba2;"></i>
                        </div>
                        <h4 class="fw-bold mb-3">Support 24/7</h4>
                        <p class="text-muted mb-0">Notre équipe est disponible pour vous accompagner à chaque étape. Assistance rapide et efficace.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{# CTA Banner #}
<section class="py-5 text-white" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
    <div class="container">
        <div class="row align-items-center justify-content-between" data-aos="zoom-in">
            <div class="col-lg-8 text-center text-lg-start mb-4 mb-lg-0">
                <h3 class="h2 fw-bold mb-2">Prêt à lancer votre projet ?</h3>
                <p class="mb-0 opacity-75">Rejoignez des centaines d'entrepreneurs qui nous font confiance</p>
            </div>
            <div class="col-lg-4 text-center text-lg-end">
                {% 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">
                    <i class="fas fa-rocket me-2"></i>Commencer maintenant
                </a>
            </div>
        </div>
    </div>
</section>

{# How it works Section #}
<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">Simple & Efficace</span>
                <h2 class="display-5 fw-bold mb-4">Comment ça marche ?</h2>
                <p class="lead text-muted">Créez votre site professionnel en 4 étapes simples</p>
            </div>
        </div>

        <div class="row g-5">
            <div class="col-md-6 col-lg-3 text-center" data-aos="fade-up" data-aos-delay="100">
                <div class="position-relative mb-4">
                    <div class="d-inline-flex align-items-center justify-content-center rounded-circle bg-primary text-white fw-bold" style="width: 80px; height: 80px; font-size: 2rem;">
                        1
                    </div>
                    <div class="position-absolute top-50 start-100 translate-middle-y d-none d-lg-block" style="width: 100%; height: 2px; background: linear-gradient(90deg, #667eea 0%, transparent 100%);"></div>
                </div>
                <h4 class="fw-bold mb-3">Choisissez votre offre</h4>
                <p class="text-muted">Sélectionnez le forfait Izibrick adapté à vos besoins et votre budget</p>
            </div>

            <div class="col-md-6 col-lg-3 text-center" data-aos="fade-up" data-aos-delay="200">
                <div class="position-relative mb-4">
                    <div class="d-inline-flex align-items-center justify-content-center rounded-circle bg-primary text-white fw-bold" style="width: 80px; height: 80px; font-size: 2rem;">
                        2
                    </div>
                    <div class="position-absolute top-50 start-100 translate-middle-y d-none d-lg-block" style="width: 100%; height: 2px; background: linear-gradient(90deg, #667eea 0%, transparent 100%);"></div>
                </div>
                <h4 class="fw-bold mb-3">Personnalisez</h4>
                <p class="text-muted">Choisissez le nom, le thème et les couleurs de votre site</p>
            </div>

            <div class="col-md-6 col-lg-3 text-center" data-aos="fade-up" data-aos-delay="300">
                <div class="position-relative mb-4">
                    <div class="d-inline-flex align-items-center justify-content-center rounded-circle bg-primary text-white fw-bold" style="width: 80px; height: 80px; font-size: 2rem;">
                        3
                    </div>
                    <div class="position-absolute top-50 start-100 translate-middle-y d-none d-lg-block" style="width: 100%; height: 2px; background: linear-gradient(90deg, #667eea 0%, transparent 100%);"></div>
                </div>
                <h4 class="fw-bold mb-3">Créez votre compte</h4>
                <p class="text-muted">Inscrivez-vous pour accéder à votre interface d'administration</p>
            </div>

            <div class="col-md-6 col-lg-3 text-center" data-aos="fade-up" data-aos-delay="400">
                <div class="position-relative mb-4">
                    <div class="d-inline-flex align-items-center justify-content-center rounded-circle bg-success text-white fw-bold" style="width: 80px; height: 80px; font-size: 2rem;">
                        <i class="fas fa-check"></i>
                    </div>
                </div>
                <h4 class="fw-bold mb-3">C'est en ligne !</h4>
                <p class="text-muted">Votre site est opérationnel. Gérez-le facilement depuis votre tableau de bord</p>
            </div>
        </div>
    </div>
</section>

<style>
    @keyframes float {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(5deg); }
    }

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

    .bg-purple {
        background-color: #764ba2!important;
    }
</style>

{# Add AOS (Animate On Scroll) library #}
<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 %}