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

<section id="install" class="section install">
  <div class="container cols">
    <div class="section-head">
      <p class="eyebrow">Install</p>
      <h2>Into the rack in a minute</h2>
      <p>
        The plugins are built for FL Studio 2024.1 or newer on Windows x64. Nothing to register, no installer, no
        account.
      </p>
    </div>

    <ol class="steps" role="list">
      <li class="plate">
        <span class="n">01</span>
        <div>
          <h3>Download</h3>
          <p>
            Pick a plugin above, or open its release on <a href={`${REPO}/releases`}>Gitea</a>. Each ZIP has a
            <code>.sha256</code> file next to it to check the download.
          </p>
        </div>
      </li>
      <li class="plate">
        <span class="n">02</span>
        <div>
          <h3>Copy the .clap file</h3>
          <p>Extract the ZIP and copy the <code>.clap</code> file into</p>
          <pre><code>C:\Program Files\Common Files\CLAP\</code></pre>
        </div>
      </li>
      <li class="plate">
        <span class="n">03</span>
        <div>
          <h3>Rescan in FL Studio</h3>
          <p>
            Open <b>Options → Manage plugins</b>, enable <b>Verify plugins</b> and click <b>Find installed plugins</b>.
            The plugins appear under the vendor <b>Bass Foundry</b>.
          </p>
        </div>
      </li>
      <li class="plate">
        <span class="n">04</span>
        <div>
          <h3>Load it</h3>
          <p>
            Rivet goes in the Channel Rack. All the others go in mixer effect slots; each plugin’s page says where it
            sits best.
          </p>
        </div>
      </li>
    </ol>
  </div>
</section>

<style>
  .install {
    border-block: 1px solid var(--line);
    background: linear-gradient(180deg, var(--bg-2), var(--bg));
  }

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

  .section-head {
    position: sticky;
    top: 6.5rem;
    margin-bottom: 0;
  }

  .steps {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .steps li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
  }

  .n {
    color: var(--accent);
    font-family: var(--display);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
  }

  h3 {
    margin-bottom: 0.4rem;
    font-size: 1.35rem;
    text-transform: uppercase;
  }

  b {
    color: var(--text);
    font-weight: 600;
  }

  pre {
    margin: 0.7rem 0 0;
    overflow-x: auto;
  }

  pre code {
    display: block;
    padding: 0.75rem 1rem;
    background: var(--bg);
  }

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

    .section-head {
      position: static;
    }
  }
</style>