---
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 file to fab in three moves.</h2>
  </div>
  <div class="steps">
    <Step n={1} title="Open a board.">
      Drag in a <code>.kicad_pcb</code> or start from the demo board. It opens in seconds —
      no install, no account.
    </Step>
    <Step n={2} title="Design and route.">
      Schematic capture, PCB layout, interactive routing, DRC/ERC, 3D view — the real KiCad
      toolset.
    </Step>
    <Step n={3} title="Export and ship.">
      BOM and Gerbers straight from the browser — 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>
