---
import SectionBand from '../components/SectionBand.astro';
import WaitlistForm from '../components/WaitlistForm.astro';
---

<SectionBand grid class="final" labelledby="final-h2">
  <div class="final-inner">
    <h2 id="final-h2">Be there when the first jam opens.</h2>
    <p class="lead">
      Early access rolls out in waves. Join the waitlist and we’ll save you a seat.
    </p>

    <WaitlistForm
      source="final"
      class="final-form"
      microcopy="Get early-access invites and product updates. No spam, unsubscribe anytime."
    />

    <ul class="final-trust">
      <li>Open source</li>
      <li>Built on KiCad</li>
      <li>Built by Emergence Engineering</li>
    </ul>
  </div>
</SectionBand>

<style>
  .final-inner {
    max-width: 36rem;
    margin-inline: auto;
    text-align: center;
  }
  .final-inner .lead {
    margin-inline: auto;
  }
  .final-form {
    margin-top: 1.5rem;
    text-align: left;
  }
  .final-trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    padding: 0;
    margin: 1.5rem 0 0;
    font-size: 0.8rem;
    color: var(--fg-muted);
    font-family: var(--font-mono);
  }
</style>
