<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% include 'public/_seo.html.twig' with {
        seo_title: 'SALSABIL Madrassas | Gestion moderne des écoles islamiques',
        seo_description: 'Plateforme de gestion, inscriptions, suivi pédagogique et administration des madrassas et écoles islamiques.',
        seo_canonical: platform_public_url('/'),
        seo_image: public_absolute_asset_url(null, 'assets/brand/logo-salmad-dark.png'),
        seo_type: 'website',
        seo_robots: 'index,follow',
        seo_site_name: 'SALSABIL Madrassas'
    } only %}
    <script type="application/ld+json">{{ {
        '@context': 'https://schema.org',
        '@type': 'WebSite',
        'name': 'SALSABIL Madrassas',
        'url': platform_public_url('/'),
        'description': 'Plateforme de gestion, inscriptions, suivi pédagogique et administration des madrassas et écoles islamiques.'
    }|json_encode|raw }}</script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
    <link rel="icon" type="image/png" href="{{ asset('assets/brand/favicon.png') }}">
    <link href="{{ asset('assets/public/platform/home.css') }}" rel="stylesheet">
</head>
<body class="platform-public-body">
    <header class="platform-public-header">
        <div class="platform-public-nav">
            <a class="platform-public-brand" href="{{ path('public_home') }}">
                <img src="{{ asset('assets/brand/logo-salmad-light.png') }}" alt="SALSABIL Madrassas">
            </a>
            <nav>
                <a href="#fonctionnalites">Fonctionnalités</a>
                <a href="#ecoles">Écoles pilotes</a>
                <a href="#themes">Thèmes</a>
            </nav>
            <div class="platform-public-actions">
                <a class="platform-public-link" href="{{ path('app_login') }}">Connexion</a>
                <a class="platform-public-button" href="mailto:contact@salsabilmadrassas.local">Demander une démo</a>
            </div>
        </div>
    </header>

    <main>
        <section class="platform-hero">
            <div class="platform-hero-copy">
                <span class="platform-kicker">Plateforme SaaS pour écoles islamiques</span>
                <h1>Gérez votre madrassa avec clarté, sérieux et sérénité.</h1>
                <p>SALSABIL Madrassas accompagne les écoles dans la gestion des inscriptions, étudiants, classes, paiements et pages publiques, depuis une interface unique.</p>
                <div class="platform-hero-actions">
                    <a class="platform-public-button platform-public-button-gold" href="mailto:contact@salsabilmadrassas.local">Demander une démo</a>
                    <a class="platform-public-button platform-public-button-soft" href="#ecoles">Voir les écoles pilotes</a>
                </div>
            </div>
            <div class="platform-hero-visual">
                <div class="platform-dashboard-preview">
                    <div class="platform-preview-top">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <div class="platform-preview-grid">
                        <div class="platform-preview-card platform-preview-card-main">
                            <strong>{{ ecoles|length }}</strong>
                            <span>Madrassas actives</span>
                        </div>
                        <div class="platform-preview-card">
                            <strong>{{ themes|length }}</strong>
                            <span>Thèmes publics</span>
                        </div>
                        <div class="platform-preview-card">
                            <strong>100%</strong>
                            <span>Gestion centralisée</span>
                        </div>
                    </div>
                    <div class="platform-preview-list">
                        {% for ecole in ecoles|slice(0, 3) %}
                            <a href="{{ public_school_url(ecole) }}" target="_blank" rel="noopener">
                                <span>{{ ecole.nom|slice(0, 2)|upper }}</span>
                                <strong>{{ ecole.nom }}</strong>
                                <small>{{ ecole.displayLocation }}</small>
                            </a>
                        {% else %}
                            <div>
                                <span>SM</span>
                                <strong>SALSABIL Madrassas</strong>
                                <small>Prêt pour les écoles pilotes</small>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </section>

        <section class="platform-section" id="fonctionnalites">
            <div class="platform-section-head">
                <span class="platform-kicker">Gestion quotidienne</span>
                <h2>Les modules essentiels d’une madrassa moderne.</h2>
            </div>
            <div class="platform-feature-grid">
                {% for feature in [
                    {icon: 'app_registration', title: 'Inscriptions simplifiées', text: 'Préinscriptions publiques, validation administrative et suivi des dossiers.'},
                    {icon: 'groups', title: 'Étudiants et classes', text: 'Organisation des apprenants, niveaux, sections et affectations par école.'},
                    {icon: 'payments', title: 'Paiements clairs', text: 'Suivi des frais, statuts de paiement et visibilité financière.'},
                    {icon: 'language', title: 'Pages publiques', text: 'Chaque madrassa dispose d’un espace public avec son logo, ses couleurs et son thème.'}
                ] %}
                    <article class="platform-feature-card">
                        <span class="material-symbols-outlined">{{ feature.icon }}</span>
                        <h3>{{ feature.title }}</h3>
                        <p>{{ feature.text }}</p>
                    </article>
                {% endfor %}
            </div>
        </section>

        <section class="platform-section platform-pilots" id="ecoles">
            <div class="platform-section-head">
                <span class="platform-kicker">Écoles pilotes</span>
                <h2>Deux madrassas pour valider les premiers usages.</h2>
            </div>
            <div class="platform-school-grid">
                {% for ecole in ecoles %}
                    <article class="platform-school-card">
                        <div class="platform-school-logo">
                            {% if ecole.logo %}
                                <img src="{{ asset(ecole.logo) }}" alt="{{ ecole.nom }}">
                            {% else %}
                                <span>{{ ecole.nom|slice(0, 2)|upper }}</span>
                            {% endif %}
                        </div>
                        <div>
                            <h3>{{ ecole.nom }}</h3>
                            <p>{{ ecole.slogan ?: ecole.description ?: 'Madrassa pilote configurée sur SALSABIL Madrassas.' }}</p>
                            <div class="platform-school-meta">
                                <span>{{ ecole.displayLocation }}</span>
                                <span>{{ ecole.themePublic ? ecole.themePublic.nom : 'Thème à définir' }}</span>
                            </div>
                        </div>
                        <a href="{{ public_school_url(ecole) }}" target="_blank" rel="noopener">Voir la page publique</a>
                    </article>
                {% endfor %}
            </div>
        </section>

        <section class="platform-section" id="themes">
            <div class="platform-section-head">
                <span class="platform-kicker">Thèmes publics</span>
                <h2>Des vitrines adaptées à l’identité de chaque école.</h2>
            </div>
            <div class="platform-theme-grid">
                {% for theme in themes %}
                    <article class="platform-theme-card">
                        {% if theme.previewImage %}
                            <img src="{{ asset(theme.previewImage) }}" alt="Aperçu {{ theme.nom }}">
                        {% else %}
                            <div class="platform-theme-placeholder">
                                <span class="material-symbols-outlined">palette</span>
                            </div>
                        {% endif %}
                        <div>
                            <h3>{{ theme.nom }}</h3>
                            <p>{{ theme.description ?: 'Thème public disponible pour les madrassas.' }}</p>
                            <code>{{ theme.code }}</code>
                        </div>
                    </article>
                {% endfor %}
            </div>
        </section>

        <section class="platform-final-cta">
            <span class="platform-kicker">SALSABIL Madrassas</span>
            <h2>Un socle professionnel pour gérer et présenter votre madrassa.</h2>
            <div class="platform-hero-actions">
                <a class="platform-public-button platform-public-button-gold" href="mailto:contact@salsabilmadrassas.local">Demander une démo</a>
                <a class="platform-public-button platform-public-button-soft" href="{{ path('app_login') }}">Connexion</a>
            </div>
        </section>
    </main>

    <footer class="platform-public-footer">
        <img src="{{ asset('assets/brand/logo-salmad-dark.png') }}" alt="SALSABIL Madrassas">
        <p>Propulsé par SALSABIL Madrassas, plateforme de gestion pour les écoles islamiques.</p>
    </footer>
</body>
</html>
