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

{% block title %}Guide de démarrage{% endblock %}
{% block breadcrumb %}Dashboard / Guide de démarrage{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .guide-container {
            max-width: 900px;
            margin: 0 auto;
        }

        .guide-hero {
            text-align: center;
            padding: 2.5rem 1.5rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 20px;
            color: white;
            margin-bottom: 2.5rem;
        }

        .guide-hero h1 {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .guide-hero p {
            opacity: 0.9;
            margin: 0;
        }

        .guide-step {
            display: flex;
            gap: 20px;
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            padding: 24px;
            margin-bottom: 20px;
        }

        .guide-step-number {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .guide-step h4 {
            font-weight: 700;
            margin-bottom: 8px;
        }

        .guide-step p {
            color: #64748b;
            margin-bottom: 12px;
        }

        .guide-step ul {
            color: #64748b;
            padding-left: 1.2rem;
            margin-bottom: 12px;
        }

        .guide-step li {
            margin-bottom: 4px;
        }

        .guide-links {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
    </style>
{% endblock %}

{% block body %}
<div class="guide-container">
    <div class="guide-hero">
        <h1><i class="fas fa-map-signs me-2"></i>Guide de démarrage</h1>
        <p>Les 5 étapes pour mettre votre site en ligne avec Izibrick</p>
    </div>

    <div class="guide-step">
        <div class="guide-step-number">1</div>
        <div>
            <h4>Créez vos pages</h4>
            <p>
                Le plus rapide : générez un site complet avec l'IA depuis le tableau de bord
                (packs Vitrine, Blog, One-Page ou Portfolio, adaptés à votre secteur d'activité).
                Vous pouvez aussi créer vos pages une par une, puis les composer librement
                avec l'éditeur : chaque page démarre vide ou depuis un modèle prêt à l'emploi.
            </p>
            <div class="guide-links">
                <a href="{{ path('dashboard') }}" class="btn btn-sm btn-outline-primary">
                    <i class="fas fa-magic me-1"></i>Tableau de bord
                </a>
                <a href="{{ path('bo-page-add') }}" class="btn btn-sm btn-outline-primary">
                    <i class="fas fa-plus-circle me-1"></i>Ajouter une page
                </a>
            </div>
        </div>
    </div>

    <div class="guide-step">
        <div class="guide-step-number">2</div>
        <div>
            <h4>Composez avec les widgets</h4>
            <p>
                Dans l'éditeur de page, glissez-déposez les widgets depuis la barre latérale :
                texte, images, galeries, FAQ, témoignages, formulaire de contact, horaires,
                agenda, compte à rebours… Chaque widget se configure dans le panneau de droite.
            </p>
            <ul>
                <li><strong>Sections</strong> : choisissez la largeur, les colonnes, le fond et l'espacement.</li>
                <li><strong>Modèles</strong> : le bouton « Charger un template » applique une mise en page complète.</li>
                <li><strong>Dupliquer</strong> : chaque section peut être dupliquée ou copiée vers une autre page.</li>
            </ul>
        </div>
    </div>

    <div class="guide-step">
        <div class="guide-step-number">3</div>
        <div>
            <h4>Personnalisez votre design</h4>
            <p>
                Dans les paramètres du site : logo, favicon, couleur principale, police,
                style des titres, et les modèles d'en-tête et de pied de page.
                Le style visuel choisi à la création reste modifiable à tout moment.
            </p>
            <div class="guide-links">
                <a href="{{ path('bo-global-parameters') }}" class="btn btn-sm btn-outline-primary">
                    <i class="fas fa-sliders-h me-1"></i>Paramètres du site
                </a>
            </div>
        </div>
    </div>

    <div class="guide-step">
        <div class="guide-step-number">4</div>
        <div>
            <h4>Soignez votre référencement</h4>
            <p>
                Renseignez le titre SEO et la description de chaque page (directement dans
                l'éditeur de page, panneau « Référencement »). Le tableau de bord affiche
                votre taux de couverture SEO pour repérer les pages à compléter.
            </p>
        </div>
    </div>

    <div class="guide-step">
        <div class="guide-step-number">5</div>
        <div>
            <h4>Votre site est en ligne !</h4>
            <p>
                Dès qu'une page est enregistrée, elle est visible publiquement : le bouton
                « Voir mon site » en haut de l'écran ouvre votre site tel que vos visiteurs
                le voient. Pour utiliser votre propre nom de domaine, renseignez-le dans
                les paramètres du site (section Domaine).
            </p>
            <div class="guide-links">
                <a href="{{ path('documentation') }}" target="_blank" class="btn btn-sm btn-outline-secondary">
                    <i class="fas fa-book me-1"></i>Documentation complète
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}