Feature Media Right

<section class="ws-features bg-[var(--ws-features-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="grid items-center gap-12 lg:grid-cols-2 lg:gap-20">

      <!-- Text Block (left) -->
      <div>
        <p class="mb-3 text-sm font-semibold uppercase tracking-widest text-[var(--ws-features-icon-color)]">Draw</p>
        <h2 class="text-balance text-3xl font-bold tracking-tight text-[var(--ws-features-text)] sm:text-4xl">
          Visualize ideas with an infinite canvas
        </h2>
        <p class="mt-4 text-lg text-[var(--ws-features-text-soft)]">
          Sketch wireframes, map out systems, and connect your docs to diagrams — all in the same workspace.
        </p>
        <ul class="mt-8 space-y-4">
          <li class="flex items-start gap-3">
            <div class="mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[var(--ws-features-icon-bg)]">
              <svg class="h-3 w-3 text-[var(--ws-features-icon-color)]" fill="none" viewBox="0 0 12 12" aria-hidden="true">
                <path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <div>
              <p class="font-medium text-[var(--ws-features-text)]">Freehand drawing</p>
              <p class="text-sm text-[var(--ws-features-text-muted)]">Sketch with a stylus or mouse. Smooth, pressure-aware strokes on any device.</p>
            </div>
          </li>
          <li class="flex items-start gap-3">
            <div class="mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[var(--ws-features-icon-bg)]">
              <svg class="h-3 w-3 text-[var(--ws-features-icon-color)]" fill="none" viewBox="0 0 12 12" aria-hidden="true">
                <path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <div>
              <p class="font-medium text-[var(--ws-features-text)]">Shapes & connectors</p>
              <p class="text-sm text-[var(--ws-features-text-muted)]">Build flowcharts, system diagrams, and org charts with auto-snapping connectors.</p>
            </div>
          </li>
          <li class="flex items-start gap-3">
            <div class="mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[var(--ws-features-icon-bg)]">
              <svg class="h-3 w-3 text-[var(--ws-features-icon-color)]" fill="none" viewBox="0 0 12 12" aria-hidden="true">
                <path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <div>
              <p class="font-medium text-[var(--ws-features-text)]">Linked to your docs</p>
              <p class="text-sm text-[var(--ws-features-text-muted)]">Embed canvases directly in documents. Context stays together, always.</p>
            </div>
          </li>
        </ul>
      </div>

      <!-- Media Block (right) -->
      <div>
        <div class="overflow-hidden rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)] shadow-lg">
          <div class="aspect-[4/3] p-6">
            <!-- Schematic whiteboard/canvas preview -->
            <div class="relative h-full rounded-xl border border-[var(--ws-features-border)] bg-[var(--ws-features-bg)] overflow-hidden">
              <!-- Grid dots pattern -->
              <svg class="absolute inset-0 h-full w-full opacity-20" xmlns="http://www.w3.org/2000/svg">
                <defs>
                  <pattern id="dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                    <circle cx="1.5" cy="1.5" r="1.5" fill="currentColor" class="text-[var(--ws-features-text-muted)]"/>
                  </pattern>
                </defs>
                <rect width="100%" height="100%" fill="url(#dots)"/>
              </svg>
              <!-- Schematic shapes -->
              <div class="absolute left-6 top-6 h-10 w-24 rounded-lg border-2 border-[var(--ws-features-icon-color)] bg-[var(--ws-features-icon-bg)] opacity-80"></div>
              <div class="absolute left-[40%] top-6 h-10 w-24 rounded-lg border-2 border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)]"></div>
              <div class="absolute bottom-6 left-1/2 -translate-x-1/2 h-10 w-28 rounded-lg border-2 border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)]"></div>
              <!-- Connector lines -->
              <svg class="absolute inset-0 h-full w-full" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <line x1="30%" y1="30%" x2="50%" y2="60%" stroke="currentColor" stroke-width="1.5" stroke-dasharray="4 3" class="text-[var(--ws-features-border)]"/>
                <line x1="65%" y1="30%" x2="50%" y2="60%" stroke="currentColor" stroke-width="1.5" stroke-dasharray="4 3" class="text-[var(--ws-features-border)]"/>
              </svg>
              <!-- Freehand stroke suggestion -->
              <svg class="absolute right-4 bottom-16 h-12 w-16 opacity-60" viewBox="0 0 64 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M4 40 C 10 20, 20 10, 32 16 S 50 30, 60 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" class="text-[var(--ws-features-icon-color)]"/>
              </svg>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>