Tabs Media Split

<section class="ws-tabs py-20">
  <div class="mx-auto max-w-6xl px-6">
    <div class="text-center">
      <h2 class="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">See how it works</h2>
      <p class="mx-auto mt-4 max-w-xl text-lg text-slate-500">Explore each capability with interactive previews.</p>
    </div>

    <div class="mt-14 grid items-start gap-10 lg:grid-cols-[340px_1fr]">
      <!-- Tab buttons (left) -->
      <div class="flex flex-row gap-2 overflow-x-auto lg:flex-col lg:overflow-visible" role="tablist" aria-label="Product features">
        <button role="tab" aria-selected="true" class="flex items-start gap-3 rounded-xl bg-indigo-50 p-4 text-left transition-all ring-1 ring-indigo-200 lg:w-full">
          <span class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-indigo-600 text-xs font-bold text-white">1</span>
          <div class="min-w-0">
            <p class="text-sm font-semibold text-indigo-900">Experience Analytics</p>
            <p class="mt-1 hidden text-sm text-indigo-700/70 lg:block">Understand how users interact with every page. Visualize behavior and optimize for engagement.</p>
          </div>
        </button>
        <button role="tab" aria-selected="false" class="flex items-start gap-3 rounded-xl bg-[var(--ws-tabs-bg)] p-4 text-left transition-all hover:bg-slate-50 lg:w-full">
          <span class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-slate-200 text-xs font-bold text-slate-600">2</span>
          <div class="min-w-0">
            <p class="text-sm font-semibold text-slate-900">Session Replay</p>
            <p class="mt-1 hidden text-sm text-slate-500 lg:block">Watch real user sessions to find friction, errors, and opportunities for improvement.</p>
          </div>
        </button>
        <button role="tab" aria-selected="false" class="flex items-start gap-3 rounded-xl bg-[var(--ws-tabs-bg)] p-4 text-left transition-all hover:bg-slate-50 lg:w-full">
          <span class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-slate-200 text-xs font-bold text-slate-600">3</span>
          <div class="min-w-0">
            <p class="text-sm font-semibold text-slate-900">Product Analytics</p>
            <p class="mt-1 hidden text-sm text-slate-500 lg:block">Build better products with data. Track funnels, retention, and feature adoption.</p>
          </div>
        </button>
        <button role="tab" aria-selected="false" class="flex items-start gap-3 rounded-xl bg-[var(--ws-tabs-bg)] p-4 text-left transition-all hover:bg-slate-50 lg:w-full">
          <span class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-slate-200 text-xs font-bold text-slate-600">4</span>
          <div class="min-w-0">
            <p class="text-sm font-semibold text-slate-900">Voice of Customer</p>
            <p class="mt-1 hidden text-sm text-slate-500 lg:block">Collect direct feedback to understand what customers think and feel.</p>
          </div>
        </button>
      </div>

      <!-- Media panel (right) -->
      <div role="tabpanel" class="overflow-hidden rounded-2xl border border-slate-200 bg-slate-50 shadow-sm">
        <div class="aspect-[16/10] bg-gradient-to-br from-indigo-100 via-indigo-50 to-white p-8">
          <div class="flex h-full flex-col items-center justify-center text-center">
            <div class="rounded-xl bg-[var(--ws-tabs-bg)] p-6 shadow-md">
              <div class="mx-auto h-6 w-32 rounded bg-indigo-200"></div>
              <div class="mt-4 space-y-2">
                <div class="h-3 w-48 rounded bg-slate-200"></div>
                <div class="h-3 w-40 rounded bg-slate-200"></div>
                <div class="h-3 w-44 rounded bg-slate-200"></div>
              </div>
              <div class="mt-4 h-24 w-full rounded-lg bg-indigo-100"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>