pcbjam/site/src/sections/HowItWorks.astro

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

<SectionBand id="how-it-works" labelledby="hiw-h2">
  <div class="section-head">
    <h2 id="hiw-h2">From link to layout in three moves.</h2>
  </div>
  <div class="steps">
    <Step n={1} title="Open a board.">
      Paste a link, drag in a <code>.kicad_pcb</code>, or pull from GitHub. It opens in seconds —
      no install, no account wall to <em>look</em>.
    </Step>
    <Step n={2} title="Start a jam.">
      Share the URL. Teammates join with live cursors and presence. Everyone sees the same
      board update in real time.
    </Step>
    <Step n={3} title="Design, route & export — together.">
      Schematic capture, PCB layout, DRC/ERC, 3D, BOM, and Gerbers — the full flow, then hand
      off to any fab. Your call.
    </Step>
  </div>
</SectionBand>

<style>
  .steps {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
  }
  .steps :global(code) {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: color-mix(in srgb, var(--bg-soft) 70%, transparent);
    padding: 0.05rem 0.3rem;
    border-radius: var(--radius-sm);
  }
  @media (max-width: 760px) {
    .steps {
      grid-template-columns: 1fr;
    }
  }
</style>