{% extends 'frontend/base_front.html.twig' %}

{% block title %}
    Bluesy – Crée gratuitement ta page professionnelle
{% endblock %}

{% block main_content %}

    <!-- HERO SECTION -->
    <section class="bg-white text-dark py-5 hero-section" style="padding-top: 140px;">
        <div class="container">
            <div class="row align-items-center gy-5 gx-lg-5 flex-column flex-lg-row">
                <!-- Texte -->
                <div class="col-lg-6 text-start">
                    <h1 class="fw-bold display-4 mb-4" style="font-family: 'Poppins', sans-serif;">
                        Crée ta page <span class="text-primary">Bluesy</span> gratuite en quelques minutes
                    </h1>
                    <p class="mb-4" style="font-size: 1.15rem; color: #555; max-width: 540px;">
                        Rassemble tout ce qui te rend crédible : témoignages, résultats, réseaux sociaux, branding personnel.<br>
                        Avec <strong>Bluesy</strong>, une page élégante et professionnelle à partager partout, sans coder.
                    </p>
                    <div class="text-center text-lg-start">
                        <a href="/register" class="btn btn-primary btn-sm px-5 py-3 rounded-pill shadow-lg">
                            Créer ma page gratuitement
                        </a>
                    </div>
                </div>

                <!-- Image Hero -->
                <div class="col-lg-6 text-center">
                    <div class="p-4 overflow-hidden" style="box-sizing: border-box;">
                        <img
                                src="{{ asset('images/header.png') }}"
                                alt="Aperçu de la page Bluesy"
                                class="img-fluid mx-auto"
                                style="max-width: 420px; width: 100%; height: auto;"
                        >
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ETAPES SECTION -->
    <section class="py-5" style="background-color: #f9fafb;">
        <div class="container text-center">
            <h2 class="fw-bold mb-4 fs-2">Comment ça fonctionne</h2>
            <p class="text-muted mb-5" style="font-size: 1rem;">En quelques clics, mets en valeur ton expertise.</p>
            <div class="row gy-5 gx-lg-5 justify-content-center text-start">
                <div class="col-md-4">
                    <div class="border-0 rounded-4 p-4 shadow-sm h-100 bg-white overflow-hidden" style="box-sizing: border-box;">
                        <h3 class="h5 fw-semibold mb-3">1. Personnalise ton profil</h3>
                        <p class="text-muted">Ajoute ton métier, une photo pro et tes liens (LinkedIn, Instagram, site...).</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="border-0 rounded-4 p-4 shadow-sm h-100 bg-white overflow-hidden" style="box-sizing: border-box;">
                        <h3 class="h5 fw-semibold mb-3">2. Mets en avant ton contenu</h3>
                        <p class="text-muted">Vidéos, photos, chiffres clés, résultats : tout ce qui prouve ta valeur.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="border-0 rounded-4 p-4 shadow-sm h-100 bg-white overflow-hidden" style="box-sizing: border-box;">
                        <h3 class="h5 fw-semibold mb-3">3. Partage ta page</h3>
                        <p class="text-muted">Reçois ton lien personnalisé et utilise-le dans ta bio, ton CV, tes signatures.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- POURQUOI Bluesy -->
    <section class="py-5 bg-white">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold fs-2">Pourquoi choisir Bluesy ?</h2>
                <p class="text-muted" style="font-size: 1rem;">Ta page pro, sans complexité, sans frais.</p>
            </div>
            <div class="row gy-5 gx-lg-5">
                <div class="col-md-4 text-center">
                    <div class="p-4 overflow-hidden" style="box-sizing: border-box;">
                        <div class="bg-white border border-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px; background: #e9f2ff;">
                            <i class="fas fa-bolt text-primary fs-2"></i>
                        </div>
                        <h3 class="h6 fw-bold">Impact immédiat</h3>
                        <p class="text-muted">Un design moderne qui inspire confiance dès la première impression.</p>
                    </div>
                </div>
                <div class="col-md-4 text-center">
                    <div class="p-4 overflow-hidden" style="box-sizing: border-box;">
                        <div class="bg-white border border-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px; background: #e9f2ff;">
                            <i class="fas fa-layer-group text-primary fs-2"></i>
                        </div>
                        <h3 class="h6 fw-bold">Tout centralisé</h3>
                        <p class="text-muted">Ton univers, ton offre, tes preuves : tout est réuni au même endroit.</p>
                    </div>
                </div>
                <div class="col-md-4 text-center">
                    <div class="p-4 overflow-hidden" style="box-sizing: border-box;">
                        <div class="bg-white border border-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px; background: #e9f2ff;">
                            <i class="fas fa-magic text-primary fs-2"></i>
                        </div>
                        <h3 class="h6 fw-bold">Gratuit & sans code</h3>
                        <p class="text-muted">Simple à utiliser. Accessible à tous. Aucune connaissance technique requise.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CALL TO ACTION -->
    <section class="text-white text-center py-5" style="background: linear-gradient(135deg, #0d6efd, #6a82fb);">
        <div class="container">
            <div class="p-5 rounded-4" style="background: transparent;">
                <h2 class="fw-bold mb-3">Lance ta page Bluesy aujourd’hui</h2>
                <p class="mb-4" style="font-size: 1.1rem;">Crée une page pro qui inspire confiance. Gratuit et rapide.</p>
                <div class="text-center">
                    <a href="/register" class="btn btn-light text-primary btn-md px-lg-5 rounded-pill shadow-lg">
                        Créer ma page gratuitement
                    </a>
                </div>
            </div>
        </div>
    </section>

{% endblock %}