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

{% block title %}{{ 'home.title'|trans }}{% endblock %}

{% block head_extra %}
{% include '_leaflet_head.html.twig' %}
{% include '_datepicker_head.html.twig' %}
{% endblock %}

{% block body %}

  <!-- MAP HERO — light: nearest ~20 events, refines once you share your location -->
  <section class="section" style="padding:0;">
    <div class="wrap">
      <p class="eyebrow" style="margin-bottom:8px;"></p>
      <div class="section-head">
        <h1 style="font-size:clamp(28px,4vw,40px);">{{ 'home.hero.title'|trans }}</h1>
        <a href="{{ path('map') }}" class="btn btn-primary btn-sm">{{ 'home.hero.map_link'|trans }}</a>
      </div>
    </div>
  </section>
  <section class="section" style="padding:0;">
    {% include '_map_stage.html.twig' with { compact: true } %}
  </section>

  <!-- BROWSE EVENTS -->
  <section class="section">
    <div class="wrap">
      <div class="section-head">
        <div>
          <p class="eyebrow" style="margin-bottom:8px;">{{ 'home.browse.eyebrow'|trans }}</p>
          <h2>{{ 'home.browse.title'|trans }}</h2>
        </div>
        <a href="{{ path('event_list') }}" class="section-link">{{ 'home.browse.all'|trans }}</a>
      </div>
      <div class="chip-row">
        {% for category in popularCategories %}
          <a href="{{ path('event_list', {category: category}) }}" class="chip">{{ category }}</a>
        {% endfor %}
      </div>
    </div>
  </section>

  <!-- THIS WEEK -->
  <section class="section" style="background:var(--paper-dim);">
    <div class="wrap">
      <div class="section-head">
        <div>
          <p class="eyebrow" style="margin-bottom:8px;">{{ 'home.recent.eyebrow'|trans }}</p>
          <h2>{{ 'home.recent.title'|trans }}</h2>
        </div>
        <a href="{{ path('event_list') }}" class="section-link">{{ 'home.browse.all'|trans }}</a>
      </div>
      <div class="card-grid">
        {% for event in upcomingEvents %}
          {% include 'events/_card.html.twig' with { event: event } %}
        {% else %}
          <p style="color:var(--muted);">{{ 'home.recent.empty'|trans }}</p>
        {% endfor %}
      </div>
    </div>
  </section>

{% endblock %}

{% block footer %}
  <div class="footer-grid">
    <div>
      <img src="{{ asset('images/vindn_logo_adobe.svg') }}" alt="VINDN" style="height:24px; margin-bottom:14px;">
      <p style="max-width:260px; font-size:14px; color:var(--muted);">{{ 'home.footer.tagline'|trans }}</p>
    </div>
    <div>
      <h4>{{ 'home.footer.explore'|trans }}</h4>
      <ul>
        <li><a href="{{ path('event_list') }}">{{ 'nav.browse'|trans }}</a></li>
        <li><a href="{{ path('map') }}">{{ 'nav.map'|trans }}</a></li>
      </ul>
    </div>
    <div>
      <h4>{{ 'home.footer.organizers'|trans }}</h4>
      <ul>
        <li><a href="#">{{ 'home.footer.list_event'|trans }}</a></li>
        <li><a href="#">{{ 'home.footer.pricing'|trans }}</a></li>
        <li><a href="#">{{ 'home.footer.guidelines'|trans }}</a></li>
      </ul>
    </div>
    <div>
      <h4>{{ 'home.footer.company'|trans }}</h4>
      <ul>
        <li><a href="#">{{ 'home.footer.about'|trans }}</a></li>
        <li><a href="#">{{ 'home.footer.contact'|trans }}</a></li>
        <li><a href="#">{{ 'home.footer.privacy'|trans }}</a></li>
      </ul>
    </div>
  </div>
  <div class="footer-bottom">
    <span>© 2026 VINDN</span>
  </div>
{% endblock %}

{% block scripts %}
{% include '_leaflet_scripts.html.twig' %}
{% include '_datepicker_scripts.html.twig' %}
<script type="application/json" id="map-data">{{ mapEventsJson|raw }}</script>
<script>
  Vindn.initMapStage({
    events: Vindn.readEmbeddedJson('map-data'),
    limit: 20,
    defaultCenter: [{{ centerLat }}, {{ centerLon }}]
  });
</script>
{% endblock %}