"use client";
import { FaChevronRight, FaUsers, FaEye } from "react-icons/fa6";
import { useRouter } from "next/navigation";
import { FaGlobeEurope, FaLaptopHouse } from "react-icons/fa";

import UserViewingLogo from "@/components/common/sprites/user-viewing-logo-sprite";
import Button from "@/components/common/button";
import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import type { UserViewingContent } from "@/lib/homepage-ghost-content";

type UserViewingHeroProps = { content: UserViewingContent };

function UserViewingHero({ content }: UserViewingHeroProps) {
  const router = useRouter();

  const handleButtonClick = () => {
    router.push(INTERNAL_PAGES.userViewing.homepage);
  };

  const featureIcons = [
    {
      icon: <FaGlobeEurope className="size-5" />,
    },
    {
      icon: <FaUsers className="size-5" />,
    },
    { icon: <FaEye className="size-5" /> },
    {
      icon: <FaLaptopHouse className="size-5" />,
    },
  ];

  return (
    <div className="relative bg-gradient-to-br from-midnightBlue via-midnightBlue to-blue-900 overflow-hidden mt-12">
      <div className="absolute inset-0 opacity-10">
        <div className="absolute top-20 left-10 w-72 h-72 bg-white rounded-full mix-blend-multiply filter blur-xl animate-pulse"></div>
        <div className="absolute top-40 right-10 w-96 h-96 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl animate-pulse delay-1000"></div>
        <div className="absolute -bottom-20 left-1/2 w-80 h-80 bg-indigo-300 rounded-full mix-blend-multiply filter blur-xl animate-pulse delay-2000"></div>
      </div>

      <div className="relative flex flex-col items-center justify-center text-center text-white p-8 py-16 mt-12">
        <UserViewingLogo fill="#fff" width={200} />
        <h2 className="font-inter font-black text-4xl lg:text-6xl bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent animate-slideUp delay-300">
          {content.title}
        </h2>
        <div className="flex flex-wrap justify-center gap-4 mt-6 animate-slideUp delay-500">
          {content.features.map((feature, index) => (
            <div
              key={index}
              className="flex items-center gap-2 px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full border border-white/5 cursor-pointer"
            >
              {featureIcons[index].icon}
              <span className="text-sm font-medium">{feature}</span>
            </div>
          ))}
        </div>
        <p className="font-noto text-xl mt-6 max-w-2xl leading-relaxed text-blue-100 animate-slideUp delay-700">
          {content.promo.leadingText}{" "}
          <span className="font-bold text-white bg-gradient-to-r from-yellow-400 to-orange-400 bg-clip-text text-transparent">
            {content.promo.highlight}
          </span>{" "}
          {content.promo.trailingText}
        </p>
        <div className="mt-12 animate-slideUp delay-1000">
          <Button
            btnLabel="Book our viewing facility today"
            className="transform hover:scale-105 transition-all duration-300 shadow-2xl hover:shadow-blue-500/25"
            customVariant="black"
            endContent={
              <FaChevronRight className="group-hover:translate-x-1 transition-transform" />
            }
            onClick={handleButtonClick}
          />
        </div>
      </div>

      {/* CSS animations. */}
      <style jsx>{`
        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes slideUp {
          from {
            opacity: 0;
            transform: translateY(30px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        .animate-fadeIn {
          animation: fadeIn 0.8s ease-out;
        }

        .animate-slideUp {
          animation: slideUp 0.8s ease-out;
        }

        .delay-300 {
          animation-delay: 0.3s;
          animation-fill-mode: both;
        }
        .delay-500 {
          animation-delay: 0.5s;
          animation-fill-mode: both;
        }
        .delay-700 {
          animation-delay: 0.7s;
          animation-fill-mode: both;
        }
        .delay-1000 {
          animation-delay: 1s;
          animation-fill-mode: both;
        }
        .delay-2000 {
          animation-delay: 2s;
        }
      `}</style>
    </div>
  );
}

export default UserViewingHero;