<section class="hero">
  <div>
    <p class="eyebrow">Eventor.ro</p>
    <h1>Gasesti. Cumperi. Intri.</h1>
    <p>Bilete la concerte, festivaluri, teatru, stand-up, sport si evenimente culturale din Romania.</p>
    <form class="hero-search" method="get" action="/evenimente">
      <input type="search" name="q" placeholder="Cauta evenimente, artisti, locatii">
      <select name="city" aria-label="Oras">
        <option value="">Toata Romania</option>
        <% cities.forEach((city) => { %>
          <option value="<%= city.slug %>"><%= city.name %></option>
        <% }) %>
      </select>
      <button type="submit">Cauta</button>
    </form>
  </div>
</section>

<section class="section">
  <div class="section-header">
    <h2>Categorii</h2>
    <a href="/evenimente">Vezi toate</a>
  </div>
  <div class="chip-grid">
    <% categories.forEach((category) => { %>
      <a class="chip" href="/categorie/<%= category.slug %>"><%= category.name %><span><%= category.event_count %></span></a>
    <% }) %>
  </div>
</section>

<section class="section">
  <div class="section-header">
    <h2>Evenimente recomandate</h2>
    <a href="/evenimente">Toate evenimentele</a>
  </div>
  <div class="event-grid">
    <% featuredEvents.forEach((event) => { %>
      <%- include('../partials/event-card', { event }) %>
    <% }) %>
  </div>
</section>

<section class="section section-muted">
  <div class="section-header">
    <h2>Weekendul acesta</h2>
    <a href="/evenimente?date=weekend">Vezi weekend</a>
  </div>
  <div class="event-grid compact-grid">
    <% weekendEvents.forEach((event) => { %>
      <%- include('../partials/event-card', { event }) %>
    <% }) %>
  </div>
</section>

<section class="section">
  <div class="section-header">
    <h2>In orasul tau</h2>
    <a href="/orase">Toate orasele</a>
  </div>
  <div class="city-grid">
    <% cities.slice(0, 10).forEach((city) => { %>
      <a class="city-tile" href="/oras/<%= city.slug %>">
        <strong><%= city.name %></strong>
        <span><%= city.event_count %> evenimente</span>
      </a>
    <% }) %>
  </div>
</section>

<section class="section split-sections">
  <div>
    <div class="section-header">
      <h2>Sub 100 lei</h2>
      <a href="/evenimente?maxPrice=100&sort=price">Vezi oferte</a>
    </div>
    <div class="stack-list">
      <% lowPriceEvents.forEach((event) => { %>
        <a class="mini-event" href="/eveniment/<%= event.slug %>">
          <span><%= event.title %></span>
          <strong><%= Number(event.min_price || 0).toFixed(0) %> RON</strong>
        </a>
      <% }) %>
    </div>
  </div>
  <div>
    <div class="section-header">
      <h2>Nou adaugate</h2>
      <a href="/evenimente?sort=newest">Vezi noutati</a>
    </div>
    <div class="stack-list">
      <% newEvents.forEach((event) => { %>
        <a class="mini-event" href="/eveniment/<%= event.slug %>">
          <span><%= event.title %></span>
          <strong><%= event.city_name %></strong>
        </a>
      <% }) %>
    </div>
  </div>
</section>

<section class="cta-band">
  <h2>Vinde bilete cu Eventor</h2>
  <p>Creezi. Vinzi. Scanezi. Incasezi.</p>
  <a class="button" href="/organizeaza">Pentru organizatori</a>
</section>
