{% extends "public_base.html" %}

{% block title %}{{ site.name }} — {{ site.tagline }}{% endblock %}

{% block hero %}
<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">días</span></div>
            <div class="countdown__unit"><span class="countdown__num" data-h>--</span><span class="countdown__label">horas</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">seg</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>
{% 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 %}

{% if upcoming %}
<section class="container section">
    <h2 class="section-title">Próximos eventos</h2>
    <div class="card-grid">
        {% for e in upcoming %}
        <a class="card" href="/events/{{ e.slug }}">
            <span class="badge">{{ e.kind }}</span>
            <h3 class="card__title">{{ e.title }}</h3>
            {% if e.summary %}<p class="card__text">{{ e.summary }}</p>{% endif %}
            {% if e.room or e.starts_at %}<p class="card__meta">{{ e.room }}{% if e.starts_at %} · {{ e.starts_at.strftime('%d %b %H:%M') }}{% endif %}</p>{% endif %}
        </a>
        {% endfor %}
    </div>
    <p style="margin-top:1.75rem"><a class="btn btn-primary" href="/events">Ver todos los eventos →</a></p>
</section>
{% 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">
        {% for img in site.gallery %}
        <a class="gallery-grid__item" href="{{ url_for('static', filename=img) }}" target="_blank" rel="noopener">
            <img src="{{ url_for('static', filename=img) }}" alt="{{ site.name }}" loading="lazy">
        </a>
        {% endfor %}
    </div>
</section>
{% endif %}

{# Sections contributed by content features (latest posts, partners…),
   rendered in their registered order. #}
{% for hook in get_template_hooks("home.section") %}{{ hook() | safe }}{% endfor %}

{% 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('Saber más') }}</a>
    </div>
</section>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
(function () {
    var el = document.querySelector('.countdown');
    if (!el) return;
    var t = new Date(el.dataset.target).getTime();
    var p = function (n) { return String(n).padStart(2, '0'); };
    function tick() {
        var d = t - Date.now(); if (d < 0) d = 0;
        el.querySelector('[data-d]').textContent = Math.floor(d / 86400000);
        el.querySelector('[data-h]').textContent = p(Math.floor(d % 86400000 / 3600000));
        el.querySelector('[data-m]').textContent = p(Math.floor(d % 3600000 / 60000));
        el.querySelector('[data-s]').textContent = p(Math.floor(d % 60000 / 1000));
    }
    tick(); setInterval(tick, 1000);
})();
</script>
{% endblock %}