/**
 * A faint black-and-white photo behind a page's content, faded into the page colour at the top and bottom.
 * Place it first inside a `relative isolate overflow-hidden` wrapper; add `bleed-end` to that wrapper when it
 * ends the page so the footer meets it directly.
 */
export function PageBackdrop({ src, blur = false }: { src: string; /** Soft-focus the photo. */ blur?: boolean }) {
  return (
    <>
      <img
        src={src}
        alt=""
        className={
          blur
            ? // Scaled up so the blurred edges stay outside the frame.
              'absolute inset-0 -z-20 h-full w-full scale-110 object-cover opacity-[0.22] blur-md grayscale dark:opacity-[0.26]'
            : 'absolute inset-0 -z-20 h-full w-full object-cover opacity-[0.14] grayscale dark:opacity-[0.18]'
        }
      />
      <div
        aria-hidden="true"
        className="absolute inset-0 -z-10 bg-linear-to-b from-background/60 via-transparent to-background/80"
      />
    </>
  );
}