import Image from "next/image";
import { FaChevronDown } from "react-icons/fa";

import InitialCTA from "@/public/user-viewing/initial-cta.webp";
import UserViewingLogo from "@/components/common/sprites/user-viewing-logo-sprite";
import type { UserViewingContent } from "@/lib/user-viewing-ghost-content";

function Hero({ content }: { content: UserViewingContent["hero"] }) {
  const handleClick = () => {
    const element = document.getElementById("about");

    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
    }
  };

  return (
    <>
      <div className="top-0 w-full h-2 bg-paleBlue dark:bg-userViewingBlue" />
      <div className="relative">
        <Image
          alt="" // not required, since this image is decorative.
          className="rounded-none items-center justify-center h-screen w-full object-cover"
          height={1000}
          loading="eager"
          src={InitialCTA}
          width={2000}
        />
        <div className="absolute inset-0 bg-white dark:bg-black opacity-40 z-10"></div>

        <span className="absolute inset-0 flex flex-col items-center justify-center text-center z-10">
          <UserViewingLogo width={200} />
          <div className="text-6xl lg:text-8xl font-inter font-black text-black dark:text-white max-w-2xl">
            {content.slogan}
            <span className="text-midnightBlue text-6xl xl:text-7xl mb-4">
              .
            </span>
          </div>
        </span>
        <button
          aria-label="Scroll down"
          className="absolute bottom-8 left-1/2 -translate-x-1/2 z-20 text-white/35 hover:text-white/70 transition-colors duration-300"
          onClick={handleClick}
        >
          <FaChevronDown className="animate-bounce text-xl" />
        </button>
      </div>
    </>
  );
}

export default Hero;