{% extends shell('public') %}

{#- The page's title, which the shell writes into <title> and, in an app
    shell, into the heading of the page: PUBLIC_HOME_TITLE when the product
    names its home, the site's name and tagline otherwise. #}
{% block title %}{% if config.PUBLIC_HOME_TITLE %}{{ config.PUBLIC_HOME_TITLE }}{% else %}{{ site.name }} — {{ site.tagline }}{% endif %}{% endblock %}

{% block hero %}
{# A feature that owns the headline moment (an edition, a campaign) renders
   the whole hero through the home.hero slot. When nothing contributes, the
   shell draws its own from the product's SITE_* config. #}
{% set contributed_hero = render_template_hooks("home.hero") %}
{% if contributed_hero %}
{{ contributed_hero }}
{% else %}
<section class="block block-hero hero--home">
    <div class="container">
        {% set ev_eyebrow = ('Edición ' ~ site.event.edition ~ ' · ' ~ site.event.dates ~ ' · ' ~ site.event.venue) if (site.event and site.event.iso) else site.hero_eyebrow %}
        {% if ev_eyebrow %}<p class="hero-eyebrow">{{ ev_eyebrow }}</p>{% endif %}
        <h1 class="hero-title">{{ site.name }}</h1>
        <p class="hero-subtitle">{{ site.tagline }}</p>

        {% if site.event and site.event.iso %}
        <div class="countdown" data-target="{{ site.event.iso }}">
            <div class="countdown__unit"><span class="countdown__num" data-d>--</span><span class="countdown__label">{{ _('days') }}</span></div>
            <div class="countdown__unit"><span class="countdown__num" data-h>--</span><span class="countdown__label">{{ _('hours') }}</span></div>
            <div class="countdown__unit"><span class="countdown__num" data-m>--</span><span class="countdown__label">{{ _('min') }}</span></div>
            <div class="countdown__unit"><span class="countdown__num" data-s>--</span><span class="countdown__label">{{ _('sec') }}</span></div>
        </div>
        {% endif %}

        {% if site.hero_actions %}
        <p class="hero-actions">
            {% for a in site.hero_actions %}<a class="btn {{ a.class | default('btn-primary') }}" href="{{ a.href }}">{{ a.label }}</a>{% endfor %}
        </p>
        {% endif %}
    </div>
</section>
{% endif %}
{% endblock %}

{% block content %}
{% if site.highlights %}
<section class="container section">
    {% if site.highlights_title %}<h2 class="section-title">{{ site.highlights_title }}</h2>{% endif %}
    <div class="feature-grid">
        {% for h in site.highlights %}
        <div class="feature">
            {% if h.icon %}<span class="feature__icon">{{ h.icon }}</span>{% endif %}
            <h3>{{ h.title }}</h3>
            {% if h.text %}<p>{{ h.text }}</p>{% endif %}
        </div>
        {% endfor %}
    </div>
</section>
{% endif %}

{# Sections contributed by content features (upcoming events, partners,
   latest photos…), rendered in their registered order. A product with no
   content features still gets the SITE_* fallbacks below.

   A feature with something to show beside the sections rather than among
   them (counters, a call to action) contributes to home.aside. Only then
   does the home split into the sections and a narrower column next to them,
   stacked on small screens (assets/css/home.css). When nothing renders in
   home.aside the sections keep the full width, exactly as before the slot
   existed. #}
{% set home_sections = render_template_hooks("home.section") %}
{% set home_aside = render_template_hooks("home.aside") %}
{% if home_aside %}
<div class="container home-columns{% if not home_sections %} home-columns--aside-only{% endif %}">
    {% if home_sections %}<div class="home-columns__main">{{ home_sections }}</div>{% endif %}
    <aside class="home-columns__aside">{{ home_aside }}</aside>
</div>
{% else %}
{{ home_sections }}
{% endif %}

{% if site.sponsors %}
<section class="container section">
    <h2 class="section-title">{{ site.sponsors_title }}</h2>
    <div class="logo-wall">
        {% for s in site.sponsors %}<div class="logo-wall__item">{{ s }}</div>{% endfor %}
    </div>
</section>
{% endif %}

{% if site.gallery %}
<section class="container section">
    <h2 class="section-title">{{ site.gallery_title }}</h2>
    <div class="gallery-grid" data-lightbox-gallery>
        {% for img in site.gallery %}
        <a class="gallery-grid__item" href="{{ url_for('static', filename=img) }}">
            <img src="{{ url_for('static', filename=img) }}" alt="{{ site.name }}" loading="lazy">
        </a>
        {% endfor %}
    </div>
</section>
{% endif %}

{% if site.cta and site.cta.title %}
<section class="cta-banner">
    <div class="container">
        <h2>{{ site.cta.title }}</h2>
        {% if site.cta.text %}<p>{{ site.cta.text }}</p>{% endif %}
        <a class="btn btn-primary" href="{{ site.cta.href | default('#') }}">{{ site.cta.button | default(_('Learn more')) }}</a>
    </div>
</section>
{% endif %}
{% endblock %}