export function CourseLessonCard() {
  const progress = 62;

  return (
    <div className="bg-[#F2F1EC] antialiased px-10 py-14 grid place-items-center text-[#111111]">
      <article className="group w-full max-w-md cursor-pointer rounded-2xl border border-[#1111111A] bg-white overflow-hidden transition-all duration-500 hover:-translate-y-1 hover:shadow-[0_30px_60px_-30px_rgba(17,17,17,0.25)]">
        {/* Cover */}
        <div className="relative aspect-[16/9] overflow-hidden">
          <div
            className="absolute inset-0 transition-transform duration-700 ease-out group-hover:scale-105"
            style={{
              background:
                "linear-gradient(135deg, #1A1A18 0%, #2A3D2F 50%, #5E7F66 100%)",
            }}
            aria-hidden
          />
          {/* faux waveform */}
          <div className="absolute inset-x-8 top-1/2 -translate-y-1/2 flex items-center gap-[3px] h-12 opacity-50">
            {Array.from({ length: 64 }).map((_, i) => (
              <span
                key={i}
                className="w-[3px] rounded-sm bg-white"
                style={{ height: `${20 + Math.abs(Math.sin(i * 0.5)) * 80}%` }}
              />
            ))}
          </div>
          {/* play button */}
          <div className="absolute inset-0 grid place-items-center">
            <button
              type="button"
              aria-label="Play"
              className="grid h-14 w-14 place-items-center rounded-full bg-white/95 text-[#111111] shadow-[0_10px_30px_-5px_rgba(0,0,0,0.3)] transition-transform group-hover:scale-110"
            >
              <span className="ml-1 text-[16px]">▶</span>
            </button>
          </div>

          <span className="absolute top-3 left-3 inline-flex items-center gap-1.5 rounded-full bg-black/50 text-white backdrop-blur px-2.5 py-1 text-[10.5px] font-mono uppercase tracking-[0.16em]">
            Lesson 04 / 12
          </span>
          <span className="absolute top-3 right-3 inline-flex items-center rounded-full bg-black/50 text-white backdrop-blur px-2 py-1 text-[10.5px] font-mono tabular-nums">
            18:42
          </span>
        </div>

        {/* Body */}
        <div className="p-5">
          <p className="font-mono text-[10.5px] uppercase tracking-[0.18em] text-[#6B6B66]">
            Module · Components
          </p>
          <h3
            className="mt-1.5 text-[18px] leading-snug tracking-tight"
            style={{ fontFamily: "var(--font-instrument-serif), Georgia, serif" }}
          >
            Composing motion without breaking the system
          </h3>

          {/* Progress */}
          <div className="mt-4">
            <div className="flex items-center justify-between font-mono text-[10.5px] uppercase tracking-[0.16em]">
              <span className="text-[#6B6B66]">Your progress</span>
              <span className="text-[#111111]">{progress}%</span>
            </div>
            <div className="mt-1.5 h-1.5 w-full rounded-full bg-[#1111111A] overflow-hidden">
              <div
                className="h-full rounded-full"
                style={{
                  width: `${progress}%`,
                  background:
                    "linear-gradient(90deg, #2A3D2F, #5E7F66)",
                }}
              />
            </div>
          </div>

          <div className="mt-4 flex items-center justify-between text-[12px]">
            <div className="flex items-center gap-2 text-[#6B6B66]">
              <span
                className="grid h-6 w-6 place-items-center rounded-full text-white text-[9px] font-mono"
                style={{ background: "linear-gradient(135deg, #1A1A18, #6B6B66)" }}
                aria-hidden
              >
                EM
              </span>
              Elena Marchetti
            </div>
            <span className="inline-flex items-center gap-1 font-mono text-[11px] text-[#6B6B66]">
              <span className="text-amber-500">★</span> 4.9 · 312
            </span>
          </div>
        </div>
      </article>
    </div>
  );
}
Course Lesson Card

Composing motion without breaking the system
