Blur

import { useState } from 'react';

const episodes = [
  { title: 'The Long Night', image: '/episodes/long-night.jpg' },
  { title: 'Crossing the Ice', image: '/episodes/crossing.jpg' }
];

export function EpisodeGuide() {
  return (
    <div className='h-96 overflow-y-auto rounded-2xl border'>
      {/* backdrop-blur blurs what scrolls behind the header. The 70% fill keeps text readable,
          and stays nearly solid where backdrop-filter isn't supported. */}
      <header className='sticky top-0 z-10 border-b bg-background/95 px-6 py-4 font-semibold backdrop-blur-md backdrop-saturate-180 supports-backdrop-filter:bg-background/70'>
        Season 2
      </header>
      <ul className='space-y-6 p-6'>
        {episodes.map((episode) => (
          <SpoilerImage key={episode.title} {...episode} />
        ))}
      </ul>
    </div>
  );
}

// filter: blur hides the frame itself until the viewer asks to see it.
function SpoilerImage({ title, image }: { title: string; image: string }) {
  const [revealed, setRevealed] = useState(false);
  return (
    <li>
      <button
        type='button'
        aria-pressed={revealed}
        aria-label={revealed ? `Hide ${title} still` : `Reveal ${title} still`}
        onClick={() => setRevealed(!revealed)}
        className='block w-full overflow-hidden rounded-xl'
      >
        <img
          src={image}
          alt=''
          className={`aspect-video w-full object-cover transition-[filter] duration-300 ease-out ${revealed ? 'blur-none' : 'blur-xl'}`}
        />
      </button>
      <p className='mt-2 text-sm font-medium'>{title}</p>
    </li>
  );
}