<%- include('../partials/head', { title, bodyClass: 'app-page app-screen-page direct-app-page' }) %>
<%- include('../partials/app-header') %>

<%
  const liveCount = Array.isArray(liveMatches) ? liveMatches.length : 0;
  const upcomingCount = Array.isArray(upcomingMatches) ? upcomingMatches.length : 0;
%>

<main class="app-main app-screen direct-app" data-auto-refresh="matches" data-refresh-interval="20000">
  <section class="app-screen-hero compact">
    <div>
      <p class="eyebrow">Temps réel</p>
      <h1>Direct</h1>
      <p>Scores, temps forts et matchs à surveiller sans quitter TopStats.</p>
    </div>
    <span class="app-screen-pill is-live">Live IA</span>
  </section>

  <% if (liveCount) { %>
    <section class="direct-signal-card is-active">
      <span class="direct-radar" aria-hidden="true"><i></i><i></i><i></i></span>
      <div>
        <strong><%= liveCount %> match<%= liveCount > 1 ? 's' : '' %> en direct</strong>
        <p>Ouvrez une fiche pour suivre le score, les stats et les événements.</p>
      </div>
    </section>

    <section class="app-competition-stack">
      <details class="app-competition" open>
        <summary>
          <span>En direct</span>
          <small><%= liveCount %> live</small>
        </summary>
        <div>
          <% liveMatches.forEach((match) => { %>
            <%- include('../partials/app-match-row', { match }) %>
          <% }) %>
        </div>
      </details>
    </section>
  <% } else { %>
    <section class="direct-signal-card">
      <span class="direct-radar" aria-hidden="true"><i></i><i></i><i></i></span>
      <div>
        <strong>Ninguna señal en directo activa</strong>
        <p>TopStats affichera les matchs en direct dès qu’ils seront disponibles.</p>
      </div>
    </section>
  <% } %>

  <section class="app-section-head">
    <div>
      <h2>À venir à surveiller</h2>
      <p><%= upcomingCount ? `${upcomingCount} affiche${upcomingCount > 1 ? 's' : ''} proche${upcomingCount > 1 ? 's' : ''}.` : 'Pas d’autres matchs live dans les 12 prochaines heures.' %></p>
    </div>
    <a href="/matchs">Tout voir</a>
  </section>

  <% if (upcomingCount) { %>
    <section class="app-competition-stack">
      <details class="app-competition" open>
        <summary>
          <span>Prochains matchs</span>
          <small><%= upcomingCount %> à venir</small>
        </summary>
        <div>
          <% upcomingMatches.forEach((match) => { %>
            <%- include('../partials/app-match-row', { match }) %>
          <% }) %>
        </div>
      </details>
    </section>
  <% } %>
</main>

<%- include('../partials/bottom-nav') %>
<%- include('../partials/footer') %>
