Video Grid

import { Play } from "lucide-react";

const videos = [
  { title: "Zero to production in 12 minutes", duration: "12:04", views: "48k", featured: true },
  { title: "Postgres branching, explained", duration: "8:31", views: "22k", featured: false },
  { title: "Rollbacks that actually roll back", duration: "6:12", views: "31k", featured: false },
  { title: "Edge functions deep dive", duration: "17:45", views: "15k", featured: false },
  { title: "Monorepos without the tears", duration: "10:58", views: "27k", featured: false },
  { title: "Office hours: your questions", duration: "42:19", views: "9k", featured: false },
];

export default function VideoGrid() {
  return (
    <section className="bg-background">
      <div className="mx-auto w-full max-w-6xl px-6 py-20 sm:py-24">
        <div className="mb-10 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <h2 className="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
              Watch, then ship
            </h2>
            <p className="mt-2 max-w-md text-muted-foreground">
              Real walkthroughs by the engineers who built it — no marketing
              voiceover.
            </p>
          </div>
          <p className="font-mono text-xs text-muted-foreground tabular-nums">
            {videos.length} videos · updated weekly
          </p>
        </div>

        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {videos.map((video) => (
            <button
              key={video.title}
              type="button"
              aria-label={`Play: ${video.title}, ${video.duration}`}
              className="group overflow-hidden rounded-xl border border-border/60 bg-card text-left transition-colors hover:border-foreground/25"
            >
              {/* CSS thumbnail */}
              <div
                aria-hidden
                className={
                  video.featured
                    ? "relative flex aspect-video items-center justify-center bg-foreground"
                    : "relative flex aspect-video items-center justify-center border-b border-border/60 bg-dots"
                }
              >
                <span
                  className={
                    video.featured
                      ? "flex size-11 items-center justify-center rounded-full bg-background text-foreground shadow-lg transition-transform group-hover:scale-105 motion-reduce:transition-none"
                      : "flex size-11 items-center justify-center rounded-full border border-border/60 bg-background shadow-sm transition-transform group-hover:scale-105 motion-reduce:transition-none"
                  }
                >
                  <Play className="ml-0.5 size-4 fill-current" />
                </span>
                <span
                  className={
                    video.featured
                      ? "absolute right-2.5 bottom-2.5 rounded-md bg-background/15 px-1.5 py-0.5 font-mono text-[10px] text-background tabular-nums"
                      : "absolute right-2.5 bottom-2.5 rounded-md bg-foreground/80 px-1.5 py-0.5 font-mono text-[10px] text-background tabular-nums"
                  }
                >
                  {video.duration}
                </span>
              </div>
              <div className="p-4">
                <h3 className="text-sm font-medium group-hover:underline group-hover:underline-offset-4">
                  {video.title}
                </h3>
                <p className="mt-1 font-mono text-xs text-muted-foreground tabular-nums">
                  {video.views} views
                </p>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}