---
/**
 * Landing-page Gerber-viewer showcase (below the fold).
 *
 * The fully-interactive viewer lives on the blog post — it needs the page to be
 * cross-origin isolated (COOP/COEP for SharedArrayBuffer + pthreads), which we
 * deliberately do NOT apply to the landing page: that would block the YouTube
 * hero embed (a no-COEP cross-origin iframe can't load in an isolated document).
 * So Launch opens the standalone viewer (/gerber-demo/) in a NEW TAB: that page
 * IS cross-origin isolated (public/_headers) and boots the board immediately.
 */
import SectionBand from '../components/SectionBand.astro';

// Standalone viewer page (cross-origin isolated + auto-boots the board). Opened
// in a new tab so the landing page itself never needs isolation.
const DEMO_HREF = '/gerber-demo/index.html';
const poster = '/gerber-demo/poster.png';
// The full in-browser editor (not just the viewer) — the public demo.
const EDITOR_URL = 'https://demo.pcbjam.com';
---

<SectionBand id="demo" labelledby="gerber-demo-h2">
  <div class="section-head">
    <span class="eyebrow">Real KiCad, rendering in this tab</span>
    <h2 id="gerber-demo-h2">Open a real board in your browser</h2>
    <p class="lead">
      KiCad's Gerber viewer (GerbView), compiled to WebAssembly — no install, no
      upload. It rasterizes a real multi-layer board, the
      <a href="https://tinytapeout.com/">tiny_tapeout</a> demo, entirely
      client-side. Launch the live viewer:
    </p>
  </div>

  <a
    class="gerber-launch"
    href={DEMO_HREF}
    target="_blank"
    rel="noopener"
    style={`background-image:url(${poster})`}
  >
    <span class="gerber-launch__play" aria-hidden="true">▶</span>
    <span class="gerber-launch__cta">Launch the live Gerber viewer</span>
    <span class="gerber-launch__sub">Opens in a new tab · streams ~22&nbsp;MB on demand</span>
  </a>

  <p class="demo-note">
    Want to do more than look? Open a board in the full editor at
    <a href={EDITOR_URL} target="_blank" rel="noopener">demo.pcbjam.com</a> — edit
    the PCB or schematic in your browser, no install, no account.
  </p>
</SectionBand>

<style>
  .gerber-launch {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    aspect-ratio: 16 / 9;
    max-height: 460px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-size: cover;
    background-position: center top;
    background-color: var(--bg-soft);
    color: var(--fg);
    text-decoration: none;
    transition: filter var(--dur) var(--ease);
  }
  /* Dim the poster so the CTA stays legible. */
  .gerber-launch::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 16, 32, 0.5), rgba(11, 16, 32, 0.78));
  }
  .gerber-launch:hover {
    filter: brightness(1.06);
    text-decoration: none;
  }
  .gerber-launch > * {
    position: relative;
  }
  .gerber-launch__play {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: var(--brand-600);
    color: #fff;
    font-size: 1.4rem;
    padding-left: 4px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  }
  .gerber-launch__cta {
    font-weight: 600;
    font-size: 1.1rem;
  }
  .gerber-launch__sub {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--fg-muted);
    text-align: center;
    padding: 0 1rem;
  }
  .demo-note {
    margin: 1rem 0 0;
    text-align: center;
    color: var(--fg-muted);
    font-size: 0.95rem;
  }
  .demo-note a {
    color: var(--accent);
    font-weight: 600;
  }
  @media (prefers-reduced-motion: reduce) {
    .gerber-launch {
      transition: none;
    }
  }
</style>
