Header 157

"use client";

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

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

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

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

export const Header157 = (props: Header157Props) => {
  const { heading, description, buttons, video, image } = {
    ...Header157Defaults,
    ...props,
  };

  const isMobile = useMediaQuery("(max-width: 991px)");
  const [isIframeLoaded, setIsIframeLoaded] = useState(false);
  const containerRef = useRef<HTMLElement>(null);
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start start", "end end"],
  });

  const contentY = useTransform(scrollYProgress, [0.02, 0.6], ["0%", "-100%"]);
  const contentOpacity = useTransform(scrollYProgress, [0.02, 0.24], [1, 0]);
  const videoWidthRaw = useTransform(scrollYProgress, [0.02, 0.28], ["30%", "100%"]);
  const videoWidth = useSpring(videoWidthRaw, { stiffness: 320, damping: 50 });

  return (
    <section ref={containerRef} className="relative lg:h-[150vh]">
      <div className="static lg:sticky lg:top-0 lg:min-h-screen">
        <div className="px-[5%] py-16 md:py-24 lg:py-28">
          <div className="container">
            <div className="relative z-10 flex aspect-video w-full flex-col flex-nowrap justify-start self-center object-cover">
              {isMobile ? (
                <div
                  className="relative z-10 order-last flex items-center justify-center self-end justify-self-end overflow-hidden object-cover lg:order-first"
                  style={{ width: "100%" }}
                >
                  <Dialog>
                    <DialogTrigger className="relative flex aspect-video w-full items-center justify-center overflow-hidden">
                      <img
                        src={image.src}
                        alt={image.alt}
                        className="aspect-video size-full object-cover"
                      />
                      <span className="absolute inset-0 z-10 bg-neutral-darkest/40" />
                      <PlayCircle className="absolute z-20 size-20 text-white" />
                    </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)}
                      />
                    </DialogContent>
                  </Dialog>
                </div>
              ) : (
                <motion.div
                  className="relative z-10 order-last flex items-center justify-center self-end justify-self-end overflow-hidden object-cover lg:order-first"
                  style={{ width: videoWidth }}
                >
                  <Dialog>
                    <DialogTrigger className="relative flex aspect-video w-full items-center justify-center overflow-hidden">
                      <img
                        src={image.src}
                        alt={image.alt}
                        className="aspect-video size-full object-cover"
                      />
                      <span className="absolute inset-0 z-10 bg-neutral-darkest/40" />
                      <PlayCircle className="absolute z-20 size-20 text-white" />
                    </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)}
                      />
                    </DialogContent>
                  </Dialog>
                </motion.div>
              )}

              {isMobile ? (
                <div className="relative top-0 left-0 mb-12 flex flex-col flex-nowrap items-start justify-end self-start md:mb-18 lg:absolute lg:mb-0 lg:h-[calc(100vh-14rem)]">
                  <div className="container max-w-lg">
                    <div className="mb-5 md:mb-6">
                      <h1 className="text-h1 font-bold">{heading}</h1>
                    </div>
                    <p className="text-medium">{description}</p>
                    <div className="mt-6 md:mt-8">
                      <div className="flex items-center gap-4">
                        {buttons.map((button, index) => (
                          <Button key={index} {...button}>
                            {button.title}
                          </Button>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              ) : (
                <motion.div
                  className="relative top-0 left-0 mb-12 flex flex-col flex-nowrap items-start justify-end self-start md:mb-18 lg:absolute lg:mb-0 lg:h-[calc(100vh-14rem)]"
                  style={{ y: contentY, opacity: contentOpacity }}
                >
                  <div className="container max-w-lg">
                    <div className="mb-5 md:mb-6">
                      <h1 className="text-h1 font-bold">{heading}</h1>
                    </div>
                    <p className="text-medium">{description}</p>
                    <div className="mt-6 md:mt-8">
                      <div className="flex items-center gap-4">
                        {buttons.map((button, index) => (
                          <Button key={index} {...button}>
                            {button.title}
                          </Button>
                        ))}
                      </div>
                    </div>
                  </div>
                </motion.div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export const Header157Defaults: Props = {
  heading: "Long heading is what you see here in this header section",
  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" }, { title: "Button", variant: "secondary" }],
  video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
  image: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-video-thumbnail.svg",
    alt: "Relume placeholder image",
  },
};