---
import SectionBand from '../components/SectionBand.astro';
import CheckItem from '../components/CheckItem.astro';
import { Picture } from 'astro:assets';
import pcbnew from '../assets/screens/pcbnew.png';
import eeschema from '../assets/screens/eeschema.png';
import gerbview from '../assets/screens/gerbview.png';
import symbolEditor from '../assets/screens/symbol-editor.png';

const capabilities = [
  'Schematic capture (Eeschema)',
  'PCB layout (Pcbnew)',
  'DRC / ERC',
  'Interactive router',
  '3D board view',
  'BOM export',
  'Gerber / drill export',
  'Footprint & symbol libraries',
  'Net classes & constraints',
  'Push-and-shove routing',
];

// Real screenshots captured from the WASM build by the e2e harness, each loading
// a real design. Originals are 1280×720 PNGs in src/assets/screens/ (kept as the
// source); astro:assets <Picture> emits responsive AVIF/WebP at build time.
//   PCB        — pic_programmer demo board (Pcbnew)
//   Schematic  — ECC83 push-pull amplifier (Eeschema)
//   Gerber     — tiny_tapeout fab output, 6 layers (GerbView)
//   Symbol     — VCA810 op-amp from a seeded library (Symbol editor)
const shots = [
  {
    img: pcbnew,
    caption: 'PCB layout — Pcbnew',
    alt: 'KiCad Pcbnew laying out the pic_programmer demo board in a browser tab',
  },
  {
    img: eeschema,
    caption: 'Schematic capture — Eeschema',
    alt: 'KiCad Eeschema editing the ECC83 push-pull amplifier schematic in a browser tab',
  },
  {
    img: gerbview,
    caption: 'Gerber viewer — GerbView',
    alt: 'KiCad GerbView displaying the tiny_tapeout demo board Gerber layers in a browser tab',
  },
  {
    img: symbolEditor,
    caption: 'Symbol editor',
    alt: 'KiCad symbol editor showing the VCA810 op-amp symbol in a browser tab',
  },
];
---

<SectionBand tone="soft" labelledby="cap-h2">
  <div class="section-head">
    <span class="eyebrow">The actual engine, compiled to WebAssembly</span>
    <h2 id="cap-h2">This is real KiCad — the whole thing.</h2>
    <p class="lead">
      PCBJam isn’t a web re-implementation with a fraction of the features. It’s the genuine
      KiCad engine compiled to WebAssembly, running in your tab. Schematic capture. Multi-layer
      PCB layout. Design rule checks. 3D view. BOM and Gerber export. The same
      <code>.kicad_pcb</code> you’d open on the desktop — because it <em>is</em> the same tool.
    </p>
  </div>

  <div class="cap-grid">
    <ul class="checklist">
      {capabilities.map((c) => <CheckItem label={c} />)}
    </ul>
    <div class="shots">
      {shots.map((s) => (
        <figure class="shot">
          <Picture
            src={s.img}
            formats={['avif', 'webp']}
            alt={s.alt}
            widths={[320, 640, 960, 1280]}
            sizes="(max-width: 460px) 90vw, (max-width: 820px) 45vw, 300px"
            loading="lazy"
            decoding="async"
          />
          <figcaption>{s.caption}</figcaption>
        </figure>
      ))}
    </div>
  </div>
</SectionBand>

<style>
  .cap-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 2rem;
    align-items: start;
  }
  .checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 1.5rem;
  }
  .checklist :global(.check) {
    break-inside: avoid;
  }
  .shots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .shot {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  /* astro:assets <Picture> renders the <img>; style it globally within .shots. */
  .shots :global(img) {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-soft);
  }
  .shot figcaption {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--fg-muted);
    letter-spacing: 0.01em;
  }
  :global(code) {
    font-family: var(--font-mono);
  }
  @media (max-width: 820px) {
    .cap-grid {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 460px) {
    .checklist {
      columns: 1;
    }
    .shots {
      grid-template-columns: 1fr;
    }
  }
</style>
