Podcast Player Base

<section class="ws-podcast-player bg-[var(--ws-color-surface)] py-16">
  <div class="mx-auto max-w-2xl px-6">
    <article class="rounded-2xl border border-slate-200 bg-[var(--ws-color-surface)] p-6 shadow-sm sm:p-8">
      <!-- Top: Cover + Info -->
      <div class="flex flex-col items-start gap-6 sm:flex-row">
        <!-- Cover Art -->
        <div class="h-36 w-36 shrink-0 rounded-xl bg-gradient-to-br from-violet-400 via-purple-500 to-indigo-600 dark:from-violet-600 dark:via-purple-700 dark:to-indigo-800" aria-label="Podcast cover art"></div> <!-- ws-ok: decorative cover art gradient -->

        <div class="min-w-0 flex-1">
          <!-- Episode Badge -->
          <span class="inline-block rounded-full bg-violet-100 px-3 py-0.5 text-xs font-semibold text-violet-700">Episode 47</span>
          <!-- Title -->
          <h2 class="mt-2 text-xl font-bold text-slate-900">The Future of Design Systems</h2>
          <!-- Description -->
          <p class="mt-2 text-sm text-slate-500">We sit down with design system leads from three major tech companies to discuss how component libraries, tokens, and AI-assisted design are reshaping product development in 2026.</p>
          <!-- Date -->
          <time datetime="2026-03-18" class="mt-2 block text-xs text-slate-400">March 18, 2026</time>
        </div>
      </div>

      <!-- Player Area -->
      <div class="mt-6 rounded-xl bg-slate-50 p-4">
        <!-- Time Display + Progress Bar -->
        <div class="flex items-center gap-3">
          <time class="text-xs font-medium tabular-nums text-slate-500">12:34</time>
          <div class="relative h-2 flex-1 overflow-hidden rounded-full bg-slate-200">
            <div class="absolute inset-y-0 left-0 w-[39%] rounded-full bg-violet-500" aria-label="Playback progress: 39%"></div>
          </div>
          <time class="text-xs font-medium tabular-nums text-slate-500">32:15</time>
        </div>

        <!-- Playback Controls -->
        <div class="mt-4 flex items-center justify-center gap-6">
          <!-- Skip Back -->
          <button type="button" class="text-slate-400 transition hover:text-slate-600 dark:hover:text-slate-300" aria-label="Skip back 15 seconds">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0019 16V8a1 1 0 00-1.6-.8l-5.333 4zM4.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0011 16V8a1 1 0 00-1.6-.8l-5.334 4z"/></svg>
          </button>

          <!-- Play/Pause -->
          <button type="button" class="flex h-12 w-12 items-center justify-center rounded-full bg-violet-600 text-white shadow-md transition hover:bg-violet-700 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2 dark:focus:ring-offset-slate-800" aria-label="Play episode">
            <svg class="ml-0.5 h-6 w-6" fill="currentColor" viewBox="0 0 20 20"><path d="M6.3 2.841A1.5 1.5 0 004 4.11v11.78a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"/></svg>
          </button>

          <!-- Skip Forward -->
          <button type="button" class="text-slate-400 transition hover:text-slate-600 dark:hover:text-slate-300" aria-label="Skip forward 30 seconds">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.933 12.8a1 1 0 000-1.6L6.6 7.2A1 1 0 005 8v8a1 1 0 001.6.8l5.333-4zM19.933 12.8a1 1 0 000-1.6l-5.333-4A1 1 0 0013 8v8a1 1 0 001.6.8l5.333-4z"/></svg>
          </button>
        </div>

        <!-- Speed Badge -->
        <div class="mt-3 flex justify-center">
          <button type="button" class="rounded-full border border-slate-200 px-3 py-0.5 text-xs font-medium text-slate-500 transition hover:border-slate-300 hover:text-slate-700 dark:hover:border-slate-500 dark:hover:text-slate-300" aria-label="Playback speed: 1x">1x</button>
        </div>
      </div>

      <!-- Show Notes -->
      <details class="group mt-6">
        <summary class="flex cursor-pointer items-center justify-between text-sm font-semibold text-slate-900">
          Show Notes
          <svg class="h-5 w-5 shrink-0 text-slate-400 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
        </summary>
        <div class="mt-3 space-y-2 text-sm text-slate-600">
          <p><strong class="text-slate-900">Topics covered:</strong></p>
          <ul class="list-inside list-disc space-y-1">
            <li>Why design tokens are becoming the new API for design</li>
            <li>How AI assistants use component registries to build UIs</li>
            <li>The shift from component libraries to semantic pattern systems</li>
            <li>Predictions for design tooling in 2027</li>
          </ul>
          <p class="mt-3"><strong class="text-slate-900">Links:</strong></p>
          <ul class="list-inside list-disc space-y-1">
            <li><a href="#" class="text-violet-600 underline hover:text-violet-700 dark:hover:text-violet-300">Design Tokens W3C Spec</a></li>
            <li><a href="#" class="text-violet-600 underline hover:text-violet-700 dark:hover:text-violet-300">Webspire Pattern Registry</a></li>
          </ul>
        </div>
      </details>
    </article>
  </div>
</section>