{% extends 'App::V2/base.html.twig' %}

{% set site_name = site_name|default('RueduProf') %}

{% set itemlist %}
    {% if category.slug == 'coach-sportif' %}
        Coach sportif
    {% elseif category.type == 'formations' %}
        Formateurs
    {% else %}
        Professeurs
    {% endif %}
{% endset %}

{% set nav_items = nav_items|default([
    {'label': 'Cours particuliers', 'href': app.request.getSchemeAndHttpHost() ~ path('app_home_page')},
    {'label': itemlist, 'href': '#itemlist'},
    {'label': 'Villes', 'href': '#villes'},
    {'label': 'FAQ', 'href': '#faq'},
    {'label': 'Blog', 'href': app.request.getSchemeAndHttpHost() ~ path('app_blog_show_index')}
]) %}

{% set subjectName = category.name|default('Maths') %}
{% set subjectType = category.type|default('cours particuliers') %}
{% set startsWithVowel = subjectName|first|lower in ['a','e','i','o','u','h','é','è','ê','ë'] %}
{% set subjectPrefix = startsWithVowel ? "d'" : 'de ' %}
{% set seoTitle %}{{ category.type == 'formations' ? 'Formations ' : 'Cours particuliers ' }}{{ subjectPrefix|raw }}{{ subjectName }} avec des professeurs qualifiés{% endset %}
{% set seoDescription %}Recherchez les meilleurs {{ category.type ? category.type : 'cours particuliers' }} {{ subjectPrefix|raw }}{{ subjectName }}. Comparez les profils, les tarifs et contactez gratuitement un professeur adapté à votre niveau.{% endset %}
{% set seoUrl = 'https://www.rueduprof.com/' ~ (category.type ? category.type : 'cours-particuliers') ~ '/' ~ category.slug %}
{% set meta_h1 %}{{ category.type == 'formations' ? 'Formations ' : 'Cours particuliers ' }}{{ subjectPrefix|raw }}{{ subjectName }} avec des professeurs qualifiés{% endset %}
{% set meta_p %}RueduProf vous met en relation avec des professeurs expérimentés en {{ subjectName }}, pour un accompagnement personnalisé du primaire aux études supérieures, en ligne ou à domicile.{% endset %}

{% set pageTitle = seoTitle %}
{% set pageDescription = seoDescription %}

{% set listing = listing|default({
    'subject': subjectName,
    'count': profileCategories|length,
    'sort': 'Les mieux notés'
}) %}

{% set faq = faq|default([
    {
        'q': 'Quel est le tarif moyen d’un cours particulier ' ~ subjectPrefix ~ subjectName ~ ' ?',
        'a': 'Les tarifs des cours particuliers ' ~ subjectPrefix ~ subjectName ~ ' varient selon le niveau de l’élève et l’expérience du professeur. En primaire, comptez généralement de 5 € à 30 € par heure. Au collège, les prix se situent le plus souvent entre 8 € et 35 € par heure. Pour le lycée, les tarifs vont en moyenne de 12 € à 50 € par heure. Enfin, pour les cours ' ~ subjectPrefix ~ subjectName ~ ' dans le supérieur, les prix observés sont généralement compris entre 15 € et 55 € par heure.'
    },
    {
        'q': 'Comment trouver un professeur particulier ' ~ subjectPrefix ~ subjectName ~ ' ?',
        'a': 'Consultez les profils, comparez les tarifs, les modalités de cours et les niveaux enseignés, puis contactez gratuitement le professeur qui correspond à votre besoin.'
    },
    {
        'q': 'Les cours ' ~ subjectPrefix ~ subjectName ~ ' sont-ils disponibles en ligne ?',
        'a': 'Oui, de nombreux professeurs proposent des cours en ligne en plus des cours à domicile ou chez le professeur.'
    },
    {
        'q': 'Quels niveaux sont proposés pour les cours ' ~ subjectPrefix ~ subjectName ~ ' ?',
        'a': 'Les annonces couvrent généralement le primaire, le collège, le lycée et le supérieur, selon l’expérience et les spécialités de chaque professeur.'
    },
    {
        'q': 'Comment choisir un bon professeur ' ~ subjectPrefix ~ subjectName ~ ' ?',
        'a': 'Regardez le niveau enseigné, la pédagogie, les avis éventuels, les disponibilités, les formats de cours proposés et la clarté du profil.'
    }
]) %}

{% block title %}{{ pageTitle }}{% endblock %}
{% block meta_title %}{{ pageTitle }}{% endblock %}
{% block meta_description %}{{ pageDescription }}{% endblock %}
{% block og_url %}{{ seoUrl }}{% endblock %}
{% block subtitle %}Homepage{% endblock %}
{% block canonical %}{{ seoUrl }}{% endblock %}

{% block open_graph %}
    <meta property="og:title" content="{{ seoTitle }} - RueduProf" />
    <meta property="og:description" content="{{ seoDescription }}" />
    <meta property="og:url" content="{{ seoUrl }}" />
    <meta property="og:image" content="https://www.rueduprof.com/images/rueduprof-2016-2.svg" />
{% endblock %}

{% block twitter_card %}
    <meta name="twitter:title" content="{{ seoTitle }} - RueduProf" />
    <meta name="twitter:description" content="{{ seoDescription }}" />
    <meta name="twitter:image" content="https://www.rueduprof.com/images/rueduprof-2016-2.svg" />
{% endblock %}

{% block snippet_json_breadcrumb %}{% endblock %}

{% block snippet_json %}
    {% include 'App::schema/cours_particuliers_subject.html.twig' with {
        arrLocs: arrLocs,
        profileCategories: profileCategories,
        category: category,
        faq: faq
    } only %}
{% endblock %}


{% set categorySlug = category ? category.slug : null %}
{% set parentSlug = category and category.parent is defined and category.parent ? category.parent.slug : null %}

{% set categoryHeroClassMap = {

    'maths': 'listing-hero-maths',

    'tennis': 'listing-hero-roland-garros',
    
    'anglais': 'listing-hero-english',
    'espagnol': 'listing-hero-spanish',
    'italien': 'listing-hero-italian',
    'allemand': 'listing-hero-german',
    'japonais': 'listing-hero-japanese',
    'portugais': 'listing-hero-portuguese',
    'chinois': 'listing-hero-chinese',
    'arabe': 'listing-hero-arabic',
    'fle': 'listing-hero-french',
} %}

{% set parentHeroClassMap = {
    'sciences': 'listing-hero-science',
    'langues': 'listing-hero-yellow',
    'musique': 'listing-hero-music',
    'soutien-scolaire': 'listing-hero-green',
    'litterature': 'listing-hero-philosophy',
    'arts': 'listing-hero-art',
    'sports': 'listing-hero-turquoise',
    'sciences-humaines': 'listing-hero-history-geo',
    'informatique': 'listing-hero-computer-science',
    'entreprise': 'listing-hero-business'
} %}

{% set heroClass = 'listing-hero-blue' %}

{% if categorySlug and categoryHeroClassMap[categorySlug] is defined %}
    {% set heroClass = categoryHeroClassMap[categorySlug] %}
{% elseif parentSlug and parentHeroClassMap[parentSlug] is defined %}
    {% set heroClass = parentHeroClassMap[parentSlug] %}
{% endif %}


{# Emojis spécifiques par catégorie #}
{% set categoryEmojiMap = {
    'maths': ['🧮', '📐'],
    'physique': ['⚛️', '🔭'],
    'chimie': ['🧪', '⚗️'],
    'sciences-de-l-ingenieur': ['⚙️', '🛠️'],
    'statistiques': ['📊', '📈'],
    'biologie': ['🧬', '🔬'],
    'svt': ['🌱', '🔬'],
    'prepas-scientifique': ['📐', '🚀'],
    'ses': ['📊', '💶'],

    'anglais': ['🇬🇧', '📘'],
    'espagnol': ['🇪🇸', '💃'],
    'italien': ['🇮🇹', '🍕'],
    'allemand': ['🇩🇪', '🏰'],
    'japonais': ['🇯🇵', '🌸'],
    'portugais': ['🇵🇹', '🌊'],
    'chinois': ['🇨🇳', '🐉'],
    'arabe': ['🌙', '🕌'],
    'fle': ['🇫🇷', '🥐'],

    'musique': ['🎵', '🎸'],
    'piano': ['🎹', '🎼'],
    'guitare': ['🎸', '🎵'],
    'chant': ['🎤', '🎶'],
    'violon': ['🎻', '🎼'],
    'batterie': ['🥁', '🎵'],

    'peinture': ['🎨', '🖌️'],

    'philosophie': ['🧠', '✍️'],


    'tennis': ['🎾', '🏆'],
    'coach-sportif': ['💪', '🏋️'],
    'yoga': ['🧘', '🌿'],
    'boxe': ['🥊', '🔥'],
    'zumba': ['💃', '🎵'],


    'histoire': ['🏛️', '📜'],
    'geographie': ['🗺️', '🌍'],

    'wordpress': ['🌐', '🛠️'],
    'symfony-6': ['🎼', '⚙️'],
    'magento': ['🛒', '📦'],
    'drupal': ['💧', '🌐'],
    'prestashop': ['🛍️', '⚙️'],
    'shopify': ['🛒', '💚'],
    'python': ['🐍', '💻'],
    'java': ['☕', '💻'],
    'intelligence-artificielle': ['🤖', '🧠'],
    'javascript-et-typescript': ['🟨', '⚡'],
    'laravel-10': ['🔴', '⚙️']

} %}

{# Emojis par parent #}
{% set parentEmojiMap = {
    'sciences': ['🔬', '🧪'],
    'langues': ['💬', '🌍'],
    'musique': ['🎵', '🎸'],
    'soutien-scolaire': ['📚', '✏️'],
    'litterature': ['📖', '🖋️'],
    'arts': ['🎨', '🖼️'],
    'sports': ['🏅', '⚡'],
    'sciences-humaines': ['🏛️', '🌍'],
    'informatique': ['💻', '⚙️'],
    'entreprise': ['💼', '📈']
} %}

{% set emojis = ['📚', '✨'] %}

{% if categorySlug and categoryEmojiMap[categorySlug] is defined %}
    {% set emojis = categoryEmojiMap[categorySlug] %}
{% elseif parentSlug and parentEmojiMap[parentSlug] is defined %}
    {% set emojis = parentEmojiMap[parentSlug] %}
{% endif %}


{% set about %}
    {% if category.slug == 'coach-sportif' %}
        En savoir plus sur les {% if category.slug == 'coach-sportif' %}{{ subjectName }}{% else %}cours particuliers {{ subjectPrefix|raw }}{{ subjectName }}{% endif %}
    {% elseif category.type == 'formations' %}
       En savoir plus sur les formations {{ subjectPrefix|raw }}{{ subjectName }}
    {% else %}
        En savoir plus sur les {% if category.slug == 'coach-sportif' %}{{ subjectName }}{% else %}cours particuliers {{ subjectPrefix|raw }}{{ subjectName }}{% endif %}
    {% endif %}
{% endset %}

{% block body %}
<section class="{{ heroClass }} py-4 py-lg-5" id="listing-search">
    <div class="container-xxl">

        <nav aria-label="breadcrumb" class="mb-3">
            <ol class="breadcrumb small mb-0">
                {%- if category.type == 'formations' %}
                {%- else -%}
                    <li class="breadcrumb-item">
                        <a href="{{ app.request.getSchemeAndHttpHost() ~ path('homepage') }}">Accueil</a>
                    </li>
                {%- endif -%}
                <li class="breadcrumb-item">
                {%- if category.type == 'formations' %}
                    <a href="{{ app.request.getSchemeAndHttpHost() ~ path('homepage') }}">Formations</a>
                {%- else -%}
                    <a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_home_page') }}">Cours particuliers</a>
                {%- endif -%}
                </li>

                <li class="breadcrumb-item active" aria-current="page">
                    {{ subjectName }}
                </li>
            </ol>
        </nav>

        <div class="listing-hero-box">
            <div class="row g-4 align-items-center">

                <div class="col-lg-7">
                    <div class="mb-3">
                        <span class="listing-badge">
                            <i class="bi bi-lightning-charge-fill"></i>
                            Mise en relation en quelques minutes
                        </span>
                    </div>

                    <h1 class="listing-title">
                        {{ meta_h1 }}
                    </h1>

                    <p class="listing-text">
                        {{ meta_p }}
                    </p>
                    {% if category.slug == 'coach-sportif' %}
                        <ul class="landing-benefits">
                            <li>🏋️ Coaching sportif personnalisé selon votre niveau</li>
                            <li>🎯 Objectifs adaptés : remise en forme, renforcement, perte de poids ou préparation physique</li>
                            <li>💻 Séances en ligne ou 🏠 à domicile</li>
                            <li>💬 Contact gratuit, sans commission</li>
                        </ul>
                    {% elseif category.slug == 'yoga' %}
                        <ul class="landing-benefits">
                            <li>🧘 Séances de yoga adaptées à votre niveau</li>
                            <li>🌿 Travail sur la souplesse, la respiration et le bien-être</li>
                            <li>💻 Cours en ligne ou 🏠 à domicile</li>
                            <li>💬 Contact gratuit, sans commission</li>
                        </ul>
                    {% elseif category.parent.slug == 'langues' %}
                        <ul class="landing-benefits">
                            <li>📚 Accompagnement du primaire aux études supérieures</li>
                            <li>🎯 Préparation aux examens, conversation, grammaire ou remise à niveau</li>
                            <li>💻 En ligne ou 🏠 à domicile</li>
                            <li>💬 Contact gratuit, sans commission</li>
                        </ul>
                    {% else %}
                    <ul class="landing-benefits">
                        <li>🎯 Comparez les profils et les tarifs</li>
                        <li>⚡ Trouvez un professeur adapté à votre niveau</li>
                        <li>💬 Contactez gratuitement sans commission</li>
                        <li>🏠 Cours à domicile avec un professeur proche de chez vous</li>
                        <li>🏠 Apprenez depuis chez vous, en visio</li>
                    </ul>
                    {% endif %}
                </div>

                <div class="col-lg-5">
                    <div class="listing-search-card">

                        {{ render(controller('App:Search:searchBar', {
                            'form': form_search,
                            'category': category
                        })) }}
                    </div>
                </div>

            </div>
        </div>

    </div>
</section>

<section class="section-white  pb-4 pb-lg-5 pt-4" id="itemlist">
    <div class="container-xxl">
        <div class="row g-4 g-xl-5 align-items-start">
            <div class="col-xl-12">
                <div class="results-toolbar mb-4">
                    <div>
                        <h2 class="h3 mb-2">{{ countProfiles }} Professeurs disponibles pour des {% if category.slug == 'coach-sportif' %}{{ subjectName }}{% else %}cours particuliers {{ subjectPrefix|raw }}{{ subjectName }}{% endif %} {{ emojis[0] }} {{ emojis[1] }}</h2>
                        <p class="text-secondary mb-0">{{ meta_h1 }}</p>
                    </div>
                </div>

                <div class="row g-4">
                    {% for key, item in profileCategories %}
                        {% include 'App::Category/_teacher_card.html.twig' with {
                            item: item,
                            category: category,
                            subjectPrefix: subjectPrefix,
                            subjectName: subjectName,
                            card_variant: 'simple'
                        } only %}
                    {% else %}
                        <div class="col-12">
                            <div class="alert alert-light border rounded-4 mb-0">Aucun professeur n’est disponible pour le moment.</div>
                        </div>
                    {% endfor %}

                
                    <div class="text-center mt-4 mt-lg-5">

                            <a href="{{ path('search', app.request.query.all|merge({
                                category: category.slug
                            })) }}"
                            class="see-more-teachers-btn">
                                <span>Voir plus de profs {{ subjectPrefix }}{{ subjectName }}</span>
                                <i class="bi bi-arrow-right"></i>
                            </a>
                    </div>

                </div>

                <div class="content-panel mt-4 mt-lg-5" id="villes">
                    <div class="section-eyebrow">Villes</div>
                    <h2 class="section-title mb-3">{{ category.type == 'formations' ? 'Les villes disponibles pour vos formations' : 'Les villes où trouver un professeur ' ~ subjectPrefix ~ subjectName }}</h2>
                    <p class="text-secondary mb-4">{{ category.type ? category.type : 'Les cours particuliers' }} {{ subjectPrefix }}{{ subjectName }}.</p>

                    <div class="row g-3">
                        <div class="col-12 col-md-6 col-xl-4">
                            {% if category.type and category.type == 'formations' %}
                                <a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_formations_show', { 'slug': category.slug, 'location': 'en-ligne' }) }}" class="subject-card d-flex align-items-start justify-content-between gap-3 h-100 text-decoration-none">
                                    <div>
                                        <div class="subject-count">En ligne</div>
                                        <div class="subject-label">Formations <b>{{ subjectPrefix ~ subjectName }} en ligne</b></div>
                                    </div>
                                    <span class="subject-arrow">→</span>
                                </a>
                            {% else %}
                                <a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_category_show', { 'slug': category.slug, 'location': 'en-ligne' }) }}" class="subject-card d-flex align-items-start justify-content-between gap-3 h-100 text-decoration-none">
                                    <div>
                                        <div class="subject-count">En ligne</div>
                                        <div class="subject-label">Cours particuliers <b>{{ subjectPrefix ~ subjectName }} en ligne</b></div>
                                    </div>
                                    <span class="subject-arrow">→</span>
                                </a>
                            {% endif %}
                        </div>

                        {% for arrLoc in arrLocs %}
                            <div class="col-12 col-md-6 col-xl-4">
                                {% if category.type and category.type == 'formations' %}
                                    <a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_formations_show', { 'slug': category.slug, 'location': arrLoc.locationSlug }) }}" class="subject-card d-flex align-items-start justify-content-between gap-3 h-100 text-decoration-none">
                                        <div>
                                            <div class="subject-count"><i class="bi bi-person-fill"></i>  {{ arrLoc.count }}</div>
                                            <div class="subject-label">Formations <b>{{ subjectPrefix ~ subjectName }}</b> à <b>{{ arrLoc.cityName }}</b> {{ arrLoc.locationName }}</div>
                                        </div>
                                        <span class="subject-arrow">→</span>
                                    </a>
                                {% else %}
                                    <a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_category_show', { 'slug': category.slug, 'location': arrLoc.locationSlug }) }}" class="subject-card d-flex align-items-start justify-content-between gap-3 h-100 text-decoration-none">
                                        <div>
                                            <div class="subject-count"><i class="bi bi-person-fill"></i>  {{ arrLoc.count }}</div>
                                            <div class="subject-label">Cours particuliers <b>{{ subjectPrefix ~ subjectName }}</b> à <b>{{ arrLoc.cityName }}</b> {{ arrLoc.locationName }}</div>
                                        </div>
                                        <span class="subject-arrow">→</span>
                                    </a>
                                {% endif %}
                            </div>
                        {% else %}

                        {% endfor %}
                    </div>
                </div>

                {#
                {% if category.slug == 'maths' %}
                    <div class="content-panel mt-4 mt-lg-5" id="matieres">
                        <div class="section-eyebrow">Maths</div>
                        <h2 class="section-title mb-3">Cours particuliers de maths en Île-de-France</h2>
                        <p class="text-secondary mb-4">Accédez rapidement aux pages locales les plus consultées pour les cours de maths.</p>

                        <div class="row g-3">
                            {% for location in locations %}
                                <div class="col-12 col-md-6 col-xl-4">
                                    <a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_category_show', { 'slug': 'maths', 'location': location.slug }) }}" class="subject-card d-flex align-items-start justify-content-between gap-3 h-100 text-decoration-none">
                                        <div>
                                            <div class="subject-count">IDF</div>
                                            <div class="subject-label">Cours particuliers de <b>maths</b>{% if location.city %} à <b>{{ location.city }}</b> -{% endif %} <b>{{ location.name }} ({{ location.zipcode }})</b></div>
                                        </div>
                                        <span class="subject-arrow">→</span>
                                    </a>
                                </div>
                            {% endfor %}

                            {% if category.slug == null %}
                                {% for department in departments %}
                                    <div class="col-12 col-md-6 col-xl-4">
                                        <a href="{{ app.request.getSchemeAndHttpHost() ~ path('app_category_show', { 'slug': 'maths', 'location': department.slug }) }}" class="subject-card d-flex align-items-start justify-content-between gap-3 h-100 text-decoration-none">
                                            <div>
                                                <div class="subject-count">Dept</div>
                                                <div class="subject-label">Cours particuliers de <b>maths</b>{% if department.city %} à <b>{{ department.city }}</b> -{% endif %} <b>{{ department.name }} ({{ department.zipcode }})</b></div>
                                            </div>
                                            <span class="subject-arrow">→</span>
                                        </a>
                                    </div>
                                {% endfor %}
                            {% endif %}
                        </div>
                    </div>
                {% endif %}
                #}

                {% if category.content %}
                    <div class="content-panel mt-4 mt-lg-5">
                        <div class="section-eyebrow">À propos</div>
                        <h2 class="section-title mb-3">{{about|raw}}</h2>
                        <div class="text-secondary">{% autoescape %}{{ category.content|raw|nl2br }}{% endautoescape %}</div>
                    </div>
                {% endif %}

                <div class="content-panel mt-4 mt-lg-5" id="faq">
                    <div class="section-eyebrow">FAQ</div>
                    <h2 class="section-title">Questions fréquentes</h2>

                    <div class="accordion accordion-flush faq-accordion mt-3" id="faqAccordion">
                        {% for item in faq %}
                            <div class="accordion-item">
                                <h3 class="accordion-header">
                                    <button class="accordion-button {% if not loop.first %}collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#faq{{ loop.index }}" aria-expanded="{{ loop.first ? 'true' : 'false' }}" aria-controls="faq{{ loop.index }}">
                                        {{ item.q }}
                                    </button>
                                </h3>
                                <div id="faq{{ loop.index }}" class="accordion-collapse collapse {% if loop.first %}show{% endif %}" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body text-secondary">{{ item.a }}</div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock %}

{% block javascripts %}
<script src="/assets/js/jquery-2.1.3.min.js"></script>
<script src="/js/js/jquery.timeago.js" type="text/javascript"></script>
<script>
    jQuery(function ($) {
        $("time.timeago").timeago();
    });
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDgIqxWbmTk2jHfOaNYEXC73GsWjal1Osw&signed_in=true&libraries=places&callback=initAutocomplete"></script>
{% endblock %}