Header 139

"use client";

import { useRef, useState } from "react";
import { motion, useScroll, useTransform } from "motion/react";
import clsx from "clsx";
import { Button, type ButtonProps } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { PlayCircle, ProgressActivity } from "relume-icons";

type ImageProps = {
  src: string;
  alt?: string;
};

type Props = {
  heading: string;
  description: string;
  buttons: ButtonProps[];
  image: ImageProps;
  video: string;
  videoImage: ImageProps;
};

export type Header139Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;

export const Header139 = (props: Header139Props) => {
  const { heading, description, buttons, image, video, videoImage } = {
    ...Header139Defaults,
    ...props,
  };

  const [isIframeLoaded, setIsIframeLoaded] = useState(false);
  const sectionRef = useRef<HTMLElement | null>(null);

  const { scrollYProgress } = useScroll({
    target: sectionRef,
    offset: ["center end", "end center"],
  });

  const containerMotion = {
    y: useTransform(scrollYProgress, [0, 0.25], ["0vh", "-5vh"]),
    width: useTransform(scrollYProgress, [0, 0.25], ["90%", "100%"]),
    height: useTransform(scrollYProgress, [0, 0.25], ["90vh", "100vh"]),
  };

  const imageTranslate = {
    y: useTransform(scrollYProgress, [0.4, 1], ["0%", "70%"]),
  };

  const videoDialogTranslate = {
    y: useTransform(scrollYProgress, [0.3, 0.5], ["0%", "200%"]),
  };

  return (
    <section ref={sectionRef} className="relative flex h-[150vh] flex-col items-center">
      <motion.div
        className="sticky top-[5vh] z-10 mt-[5vh] mb-[-5vh] flex h-[90vh] w-[90%] flex-col items-start justify-center overflow-hidden"
        style={containerMotion}
      >
        <div className="px-[5%] py-16 md:py-24 lg:py-28">
          <div className="relative z-10 container max-w-md">
            <h1 className="mb-5 text-h1 font-bold text-white md:mb-6">{heading}</h1>
            <p className="text-medium text-white">{description}</p>
            <div className="mt-6 flex flex-wrap gap-4 md:mt-8">
              {buttons.map((button, index) => (
                <Button key={index} {...button}>
                  {button.title}
                </Button>
              ))}
            </div>
          </div>
        </div>
        <motion.div className="absolute inset-0 z-0" style={imageTranslate}>
          <img src={image.src} alt={image.alt} className="size-full object-cover" />
          <div className="absolute inset-0 bg-neutral-darkest/50" />
        </motion.div>
        <Dialog>
          <DialogTrigger className="hidden md:flex" asChild>
            <motion.button
              className="absolute right-[5%] bottom-[5%] flex w-full items-center justify-center overflow-hidden rounded-image md:max-w-[14rem] lg:max-w-xxs"
              style={videoDialogTranslate}
            >
              <img src={videoImage.src} alt={videoImage.alt} className="size-full object-cover" />
              <PlayCircle className="absolute z-20 size-20 text-white" />
            </motion.button>
          </DialogTrigger>
          <DialogContent>
            {!isIframeLoaded && (
              <ProgressActivity className="mx-auto size-16 animate-spin text-white" />
            )}
            <iframe
              className={clsx("z-0 mx-auto aspect-video size-full md:w-[738px] lg:w-[940px]", {
                visible: isIframeLoaded,
                hidden: !isIframeLoaded,
              })}
              src={video}
              allow="autoplay; encrypted-media; picture-in-picture"
              allowFullScreen
              onLoad={() => setIsIframeLoaded(true)}
            ></iframe>
          </DialogContent>
        </Dialog>
      </motion.div>
      <div className="absolute inset-0 -z-10 mt-[100vh]" />
    </section>
  );
};

export const Header139Defaults: Props = {
  heading: "Medium length hero heading goes here",
  description:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
  buttons: [
    { title: "Button", variant: "alternate" },
    { title: "Button", variant: "secondary-alt" },
  ],
  image: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
    alt: "Relume placeholder image",
  },
  video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
  videoImage: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-video-thumbnail-landscape.svg",
    alt: "Relume placeholder image",
  },
};