---
import SectionBand from '../components/SectionBand.astro';
import Chip from '../components/Chip.astro';
import Icon from '../components/Icon.astro';

// TODO(assets): replace name chips with grayscale source logos once usage rights
// are cleared (§4b.7). Kept text-only for now to avoid trademark/asset issues.
const sources = ['EAGLE', 'Altium', 'CADSTAR', 'OrCAD'];
---

<SectionBand tone="soft" labelledby="mig-h3">
  <div class="mig">
    <div class="mig-copy">
      <h3 id="mig-h3">Coming from EAGLE, Altium, CADSTAR, or OrCAD?</h3>
      <p class="muted">
        KiCad is where designs are migrating — and PCBJam opens them in a browser tab, free,
        with nothing to install. <em>Bring your board. Invite your team. Pick up where you left
        off.</em>
      </p>
      <a class="btn btn-primary" href="#waitlist">Join the waitlist →</a>
    </div>
    <div class="mig-flow" aria-hidden="true">
      <div class="cluster sources">
        {sources.map((s) => <Chip label={s} />)}
      </div>
      <Icon name="icons/arrow-outward.svg" mode="mask" size="1.5rem" class="mig-arrow" />
      <span class="mig-dest">PCBJam</span>
    </div>
  </div>
</SectionBand>

<style>
  .mig {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2rem;
    align-items: center;
  }
  .mig-copy h3 {
    margin-bottom: 0.5rem;
  }
  .mig-copy .btn {
    margin-top: 1rem;
  }
  .mig-flow {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .mig-arrow {
    color: var(--accent);
  }
  .mig-dest {
    font-weight: 700;
    color: var(--accent);
    font-size: 1.1rem;
  }
  @media (max-width: 820px) {
    .mig {
      grid-template-columns: 1fr;
    }
    .mig-flow {
      justify-content: flex-start;
    }
  }
</style>
