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

{% block title %}VINDN — Find what's on{% endblock %}

{% block head_extra %}
{% include '_leaflet_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;">Nordrhein-Westfalen — updated every hour</p>
      <div class="section-head">
        <h1 style="font-size:clamp(28px,4vw,40px);">What's on near you</h1>
        <a href="{{ path('map') }}" class="btn btn-primary btn-sm">Open full map →</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;">Browse</p>
          <h2>Find events by category</h2>
        </div>
        <a href="{{ path('event_list') }}" class="section-link">Browse all events →</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;">Live from the importer</p>
          <h2>Worth planning around</h2>
        </div>
        <a href="{{ path('event_list') }}" class="section-link">Browse all events →</a>
      </div>
      <div class="card-grid">
        {% for event in upcomingEvents %}
          {% include 'events/_card.html.twig' with { event: event } %}
        {% else %}
          <p style="color:var(--muted);">No events imported yet — check back once the backend's import job has run.</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);">The board for everything on, wherever you are.</p>
    </div>
    <div>
      <h4>Explore</h4>
      <ul>
        <li><a href="{{ path('event_list') }}">Browse events</a></li>
        <li><a href="{{ path('search') }}">Search</a></li>
        <li><a href="{{ path('map') }}">Map</a></li>
      </ul>
    </div>
    <div>
      <h4>Organizers</h4>
      <ul>
        <li><a href="#">List an event</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Guidelines</a></li>
      </ul>
    </div>
    <div>
      <h4>Company</h4>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Privacy</a></li>
      </ul>
    </div>
  </div>
  <div class="footer-bottom">
    <span>© 2026 VINDN</span>
  </div>
{% endblock %}

{% block scripts %}
{% include '_leaflet_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 %}