---
import { PLUGINS } from '../data/plugins';
---

<section id="foundry" class="section foundry">
  <div class="container cols">
    <div class="section-head">
      <p class="eyebrow">The foundry</p>
      <h2>Named after metalwork</h2>
      <p>
        The suite is the foundry: the workshop where the bass gets cast, shaped and finished. Each plugin is named after
        the craft that does the same job to metal.
      </p>
    </div>
    <dl class="names">
      {
        PLUGINS.map((p) => (
          <div>
            <dt>
              <a href={`/plugins/${p.slug}/`}>{p.name}</a>
            </dt>
            <dd>{p.metal}</dd>
          </div>
        ))
      }
    </dl>
  </div>
</section>

<style>
  .foundry {
    border-block: 1px solid var(--line);
    background:
      radial-gradient(60% 80% at 100% 0%, rgb(255 1 96 / 0.07), transparent 60%),
      var(--bg-2);
  }

  .cols {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }

  .section-head {
    margin-bottom: 0;
  }

  .names {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 0;
  }

  .names div {
    padding: 1.1rem 1.25rem 1.1rem 0;
    border-top: 1px solid var(--line);
  }

  dt a {
    color: var(--text);
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
  }

  dt a:hover {
    color: var(--accent);
  }

  dd {
    margin: 0.2rem 0 0;
    font-size: 0.975rem;
  }

  @media (max-width: 860px) {
    .cols {
      grid-template-columns: 1fr;
    }
  }

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