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

{% block title %}{{ site.schoolName }} — Anglo · Votorantim{% endblock %}
{% block meta_description %}Colégio Mônaco em Votorantim: Fundamental e Ensino Médio com Sistema Anglo. Estrutura completa, aulas extracurriculares e formação para a cidadania.{% endblock %}

{% block body %}
{% set levelIcons = {
    'fundamental-1': 'fa-solid fa-book-open',
    'fundamental-2': 'fa-solid fa-flask',
    'ensino-medio': 'fa-solid fa-graduation-cap'
} %}
{% if slides %}
<section class="hero-carousel" data-carousel>
    <div class="hero-carousel__track">
        {% for slide in slides %}
            <article class="hero-slide{% if loop.first %} is-active{% endif %}">
                <div class="hero-slide__bg" data-parallax style="background-image: url('{{ media_url('uploads/images/' ~ slide.image) }}')"></div>
                <div class="hero-slide__overlay">
                    <div class="wrap hero-slide__content">
                        <p class="eyebrow">{{ site.schoolName }}</p>
                        <h1>{{ slide.title }}</h1>
                        {% if slide.text %}<p class="lead">{{ slide.text }}</p>{% endif %}
                        {% if slide.buttonUrl and slide.buttonLabel %}
                            <a class="btn btn-gold" href="{{ slide.buttonUrl }}">{{ slide.buttonLabel }}</a>
                        {% endif %}
                    </div>
                </div>
            </article>
        {% endfor %}
    </div>
    {% if slides|length > 1 %}
        <button class="hero-nav hero-nav--prev" type="button" data-carousel-prev aria-label="Anterior"><i class="fa-solid fa-chevron-left"></i></button>
        <button class="hero-nav hero-nav--next" type="button" data-carousel-next aria-label="Próximo"><i class="fa-solid fa-chevron-right"></i></button>
        <div class="hero-dots" data-carousel-dots>
            {% for slide in slides %}
                <button type="button" class="{% if loop.first %}is-active{% endif %}" aria-label="Slide {{ loop.index }}"></button>
            {% endfor %}
        </div>
    {% endif %}
</section>
{% else %}
<section class="hero">
    <div class="wrap">
        <p class="eyebrow">Educação é a base</p>
        <h1>Seu filho vai fazer mais que aprender. Vai conviver.</h1>
        <p class="lead">{{ site.mission }}</p>
        <a class="btn btn-gold" href="{{ path('app_contact') }}">Agendar visita</a>
    </div>
</section>
{% endif %}

{% if menuCursos %}
<nav class="levels" aria-label="Cursos">
    {% for page in menuCursos %}
        <a class="level-icon" href="{{ path('app_page', {slug: page.slug}) }}">
            <span class="level-icon__mark" aria-hidden="true">
                <i class="{{ levelIcons[page.slug] ?? 'fa-solid fa-school' }}"></i>
            </span>
            <span class="level-icon__text">
                <strong>{{ page.title }}</strong>
            </span>
        </a>
    {% endfor %}
</nav>
{% endif %}

{% if campaigns is not empty %}
<section class="campaigns">
    <div class="wrap">
        <div class="campaigns__grid campaigns__grid--{{ campaigns|length }}">
            {% for campaign in campaigns %}
                <a
                    class="campaign-card{% if campaign.image %} campaign-card--photo{% endif %}"
                    href="{{ campaign.url }}"
                    {% if campaign.url starts with 'http' %} target="_blank" rel="noopener"{% endif %}
                    {% if campaign.image %} style="background-image: url('{{ media_url('uploads/images/' ~ campaign.image) }}')"{% endif %}
                >
                    <span class="campaign-card__shade" aria-hidden="true"></span>
                    <span class="campaign-card__panel">
                        {% if not campaign.image %}
                            <span class="campaign-card__mark" aria-hidden="true">
                                <i class="{{ campaign.icon ?: 'fa-solid fa-star' }}"></i>
                            </span>
                        {% endif %}
                        <strong>{{ campaign.title }}</strong>
                        {% if campaign.excerpt %}<span>{{ campaign.excerpt }}</span>{% endif %}
                    </span>
                </a>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

{% if materialSegments %}
<section class="materials">
    <div class="wrap">
        <div class="materials__head">
            <h2>Lista de material</h2>
            <a href="{{ path('app_documents') }}">Ver todas</a>
        </div>
        <div class="materials__grid">
            {% for item in materialSegments %}
                <a class="campaign-card campaign-card--material" href="{{ path('app_documents') }}#{{ item.anchor }}">
                    <span class="campaign-card__shade" aria-hidden="true"></span>
                    <span class="campaign-card__panel">
                        <span class="campaign-card__mark" aria-hidden="true">
                            <i class="{{ item.icon }}"></i>
                        </span>
                        <span class="campaign-card__copy">
                            <strong>{{ item.label }}</strong>
                            <span>
                                {% if item.year %}{{ item.year }} · {% endif %}{{ item.count }} {{ item.count == 1 ? 'série' : 'séries' }}
                            </span>
                        </span>
                    </span>
                </a>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

{% if extraActivities %}
<section class="classes-section" data-classes-carousel>
    <div class="wrap">
        <div class="classes-head">
            <div>
                <h2 class="classes-title"><span>Aulas</span> extracurriculares</h2>
                <p>Musicalização, dança, banda e teatro no contraturno. Horários e matrículas na secretaria.</p>
            </div>
            {% if extraActivities|length > 3 %}
                <div class="classes-arrows">
                    <button type="button" data-classes-prev aria-label="Anterior"><i class="fa-solid fa-arrow-left"></i></button>
                    <button type="button" data-classes-next aria-label="Próximo"><i class="fa-solid fa-arrow-right"></i></button>
                </div>
            {% endif %}
        </div>
        <div class="classes-track">
            {% for activity in extraActivities %}
                {% include '_class_card.html.twig' with { activity: activity } %}
            {% endfor %}
        </div>
        <a class="classes-all" href="{{ path('app_extra_activities') }}">
            <span><i class="fa-solid fa-arrow-right"></i></span>
            Aulas
        </a>
    </div>
</section>
{% endif %}

{% if news %}
<section class="section">
    <div class="wrap">
        <div class="section-head">
            <h2>Acontece no Colégio Mônaco</h2>
            <a href="{{ path('app_news') }}">Ver todos</a>
        </div>
        {% set featured = news|first %}
        {% set others = news|slice(1) %}
        {% set featuredCover = featured.image ? media_url('uploads/images/' ~ featured.image) : (driveCovers[featured.id] ?? null) %}
        <div class="news-home">
            <a
                class="news-jumbo{% if featuredCover %} news-jumbo--photo{% endif %}"
                href="{{ path('app_news_show', {slug: featured.slug}) }}"
                {% if featuredCover %} style="background-image: url('{{ featuredCover }}')"{% endif %}
            >
                <span class="news-jumbo__shade" aria-hidden="true"></span>
                <span class="news-jumbo__panel">
                    <time>{{ featured.occurredAt|date('d/m/Y') }}</time>
                    <h3>{{ featured.title }}</h3>
                    {% if featured.excerpt %}<p>{{ featured.excerpt }}</p>{% endif %}
                </span>
            </a>
            {% if others %}
                <div class="news-home__row">
                    {% for item in others %}
                        <a class="card news-split" href="{{ path('app_news_show', {slug: item.slug}) }}">
                            {% include '_news_cover.html.twig' with { item: item, driveCovers: driveCovers|default({}) } %}
                            <span class="card__body">
                                <time>{{ item.occurredAt|date('d/m/Y') }}</time>
                                <h3>{{ item.title }}</h3>
                                {% if item.excerpt %}<p>{{ item.excerpt }}</p>{% endif %}
                            </span>
                        </a>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>
</section>
{% endif %}

{% if videos %}
<section class="section section--paper">
    <div class="wrap">
        <div class="section-head">
            <h2>Últimos vídeos</h2>
            <a href="{{ path('app_videos') }}">Ver todos</a>
        </div>
        <div class="video-grid">
            {% for video in videos %}
                {% include '_video_card.html.twig' with { video: video } %}
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

<section class="parallax-band">
    <div class="parallax-band__bg" data-parallax style="background-image: url('{{ media_url('uploads/images/hero-estrutura.jpg') }}')"></div>
    <div class="parallax-band__shade" aria-hidden="true"></div>
    <div class="wrap parallax-band__inner">
        <div>
            <h2>Uma escola inovadora</h2>
            <p>Biblioteca, laboratórios, brinquedoteca, deck de convivência, controle de acesso e parceria com o Sistema Anglo.</p>
        </div>
        <a class="btn btn-gold" href="{{ path('app_gallery', {slug: 'infraestrutura'}) }}">Conhecer a estrutura</a>
    </div>
</section>

{% if homeDocuments %}
<section class="section section--paper docs-home">
    <div class="wrap">
        <div class="section-head">
            <h2>Documentos</h2>
            <a href="{{ path('app_documents') }}">Ver todos</a>
        </div>
        <div class="doc-cards">
            {% for doc in homeDocuments %}
                {% include '_doc_card.html.twig' with { doc: doc } %}
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}
{% endblock %}