---
import { IDEAS, REPO } from '../data/plugins';
---

<section id="bench" class="section">
  <div class="container">
    <div class="section-head">
      <p class="eyebrow">On the bench</p>
      <h2>What could come next</h2>
      <p>
        Ideas from the <a href={`${REPO}/src/branch/main/docs/ideas.md`}>ideas list</a>, each written against a problem
        seen in bass-music production. Most of the new ones are about texture. These are ideas, not promises.
      </p>
    </div>
    <ul class="grid" role="list">
      {
        IDEAS.map((idea) => (
          <li class={idea.texture ? 'texture' : undefined}>
            <div class="head">
              <h3>{idea.name}</h3>
              {idea.texture && <span class="badge badge-accent">Texture</span>}
            </div>
            <p class="label">{idea.role}</p>
            <p class="text">{idea.text}</p>
          </li>
        ))
      }
    </ul>
  </div>
</section>

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: grid;
    align-content: start;
    gap: 0.45rem;
    padding: 1.4rem 1.5rem 1.5rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    background: rgb(255 255 255 / 0.012);
  }

  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  h3 {
    font-size: 1.4rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .text {
    font-size: 0.975rem;
  }

  @media (max-width: 960px) {
    .grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 600px) {
    .grid {
      grid-template-columns: 1fr;
    }
  }
</style>