---
/**
 * DemoLaunchCard — a clickable "open the live demo" card: a real product
 * screenshot dimmed under a play button + CTA, opening the editor in a new tab.
 *
 * New tab is load-bearing, not a style choice: the editor needs COOP/COEP
 * (SharedArrayBuffer) and the landing page deliberately isn't cross-origin
 * isolated (it would break the no-COEP YouTube/iframe embeds), so the demo
 * can never be iframed here. Same mechanic as the Gerber viewer card.
 */
import { Picture } from 'astro:assets';
import type { ImageMetadata } from 'astro';

interface Props {
  href: string;
  image: ImageMetadata;
  alt: string;
  cta?: string;
  sub?: string;
  class?: string;
}

const {
  href,
  image,
  alt,
  cta = 'Open the live demo',
  sub = 'Opens in a new tab · no install, no account',
  class: cls = '',
} = Astro.props;
---

<a class={`launch-card ${cls}`} href={href} target="_blank" rel="noopener">
  <Picture
    src={image}
    formats={['avif', 'webp']}
    alt={alt}
    widths={[480, 768, 1280]}
    sizes="(max-width: 880px) 92vw, 540px"
    loading="eager"
    decoding="async"
  />
  <span class="launch-card__scrim" aria-hidden="true"></span>
  <span class="launch-card__play" aria-hidden="true">▶</span>
  <span class="launch-card__cta">{cta}</span>
  <span class="launch-card__sub">{sub}</span>
</a>

<style>
  .launch-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-soft);
    color: var(--fg);
    text-decoration: none;
    transition: filter var(--dur) var(--ease);
  }
  .launch-card :global(img) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  /* Dim the screenshot so the CTA stays legible. */
  .launch-card__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 16, 32, 0.45), rgba(11, 16, 32, 0.72));
  }
  .launch-card:hover {
    filter: brightness(1.06);
    text-decoration: none;
  }
  .launch-card__play,
  .launch-card__cta,
  .launch-card__sub {
    position: relative;
  }
  .launch-card__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);
  }
  .launch-card__cta {
    font-weight: 600;
    font-size: 1.1rem;
    color: #fff;
  }
  .launch-card__sub {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
    padding: 0 1rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .launch-card {
      transition: none;
    }
  }
</style>
