---
layout: default
title: Beats Disponíveis
permalink: /beats/
---

<main class="main-content">
  <div class="publication">

    <div class="container">
      <br />

      <div class="tabs is-centered is-boxed is-medium mb-6">
        {% include sidebar.html %}
      </div>

      <div class="has-text-centered mb-6">
        <h1 class="title is-3 has-text-grey-dark">🎧 Beats Disponíveis</h1>
        <p class="subtitle is-6 has-text-grey">
          Ouça e baixe beats criados pela comunidade.
        </p>
        <div style="width: 60px; height: 4px; background-color: #3273dc; margin: 1rem auto; border-radius: 2px;"></div>
      </div>

      <div class="columns is-multiline">
        {% if site.data.beats %}
            {% for filename in site.data.beats %}
            
                <div class="column is-12-mobile is-6-tablet is-4-desktop is-3-widescreen">
                  <div class="card beat-card"
                       style="height: 100%; background-color: #f0f8ff; border: 1px solid #cfe8fc; border-radius: 12px; display: flex; flex-direction: column; transition: all 0.3s ease;">
    
                    <div class="card-content has-text-centered p-4" style="flex: 1; display: flex; flex-direction: column; justify-content: center;">
    
                      <div class="mb-3" style="width: 60px; height: 60px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; box-shadow: 0 4px 10px rgba(0,0,0,0.05);">
                          <span class="icon is-large has-text-info"><i class="fa-solid fa-compact-disc fa-2x fa-spin-hover"></i></span>
                      </div>
    
                      {% assign file_name_clean = filename | remove: '.wav' | remove: '.mp3' %}
                      {% assign project_url = "" %}
    
                      {% for projeto in site.data.all %}
                        {% if projeto.file == file_name_clean %}
                          {% assign project_slug = projeto.file | slugify %}
                          {% assign project_url = "/projetos/" | append: project_slug | append: ".html" %}
                        {% endif %}
                      {% endfor %}
    
                      <h3 class="title is-6 mb-3" style="color: #205081; word-break: break-word;">
                        {% if project_url != "" %}
                          <a href="{{ project_url | relative_url }}" class="beat-link" title="Ir para o projeto">
                            {{ file_name_clean }} <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.7em; margin-left: 4px;"></i>
                          </a>
                        {% else %}
                          {{ file_name_clean }}
                        {% endif %}
                      </h3>
    
                      <div class="audio-wrapper" style="width: 100%;">
                        <audio class="audio-player" controls style="width: 100%; height: 32px; border-radius: 20px;">
                          <source src="/mmpSearch/src_mmpSearch/wav/{{ filename }}" type="audio/wav">
                          Seu navegador não suporta áudio.
                        </audio>
                      </div>
    
                    </div>
                  </div>
                </div>
    
            {% endfor %}
        {% else %}
            <div class="column is-12">
                <div class="notification is-warning has-text-centered">
                    Nenhum beat encontrado no manifesto (beats.json). Tente fazer um upload novo para regenerar a lista.
                </div>
            </div>
        {% endif %}
      </div>

    </div>

  </div>
</main>

<style>
  /* Estilo do Card */
  .beat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(50, 115, 220, 0.15);
    border-color: #3273dc !important;
    background-color: #fff !important;
  }

  /* Animação do Disco ao passar o mouse */
  .beat-card:hover .fa-spin-hover {
    animation: spin 2s linear infinite;
  }
  @keyframes spin { 100% { transform: rotate(360deg); } }

  /* Link do Título */
  .beat-link {
    color: #205081;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    transition: all 0.2s;
  }
  .beat-link:hover {
    color: #3273dc;
    border-bottom-color: #3273dc;
  }

  /* Ajuste fino do player */
  audio::-webkit-media-controls-panel {
    background-color: #f1f3f5;
  }
  .beat-card:hover audio::-webkit-media-controls-panel {
    background-color: #eef6fc;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Lógica para tocar apenas um áudio por vez
    const audioPlayers = document.querySelectorAll('.audio-player');
    
    audioPlayers.forEach(audio => {
      audio.addEventListener('play', function() {
        audioPlayers.forEach(otherAudio => {
          if (otherAudio !== audio && !otherAudio.paused) {
            otherAudio.pause();
            otherAudio.currentTime = 0; // Opcional: reinicia o outro
          }
        });
        
        // Adiciona um efeito visual ao card ativo
        const card = audio.closest('.beat-card');
        if(card) {
            card.style.borderColor = '#4caf50';
            card.style.backgroundColor = '#f0fff4';
        }
      });

      audio.addEventListener('pause', function() {
        const card = audio.closest('.beat-card');
        if(card) {
            card.style.borderColor = '#cfe8fc';
            card.style.backgroundColor = '#f0f8ff';
        }
      });
    });
  });
</script>