"use client";
import { motion } from "motion/react";
import Image, { StaticImageData } from "next/image";
import CartillaLogo from "@/assets/cartilla-logo.png";
import HeroBanner from "./hero-banner";
import useTilt from "./hooks/useTilt";
import { cn } from "@/lib/utils";
import { PageIntroPreloader } from "@/components/ui";
import { ReactNode } from "react";

type HeroProps = {
  title: string;
  imgSrcBg: StaticImageData;
  imgSrcSubject: StaticImageData;
  children?: ReactNode;
  titleStyles?: string;
};

const Hero = ({ title, imgSrcBg, imgSrcSubject, children, titleStyles }: HeroProps) => {
  const { ref, isLoaded, handleImageLoad, bgX, bgY, logoX, logoY, logoRotateY, subjectX, subjectY, titleX, titleY } =
    useTilt();

  return (
    <>
      <PageIntroPreloader isLoaded={isLoaded} />
      <section className="text-white overflow-hidden">
        <HeroBanner />
        <motion.div
          ref={ref}
          style={{ perspective: 1000 }}
          className="h-[90svh] landscape:h-[85svh] overflow-hidden rounded-bl-[3rem] rounded-br-[3rem] relative will-change-transform [perspective:62.5rem]"
        >
          <div className="size-full relative">
            <motion.div
              style={{
                x: bgX,
                y: bgY,
                scale: 1.1,
              }}
              className="absolute inset-0 will-change-transform"
            >
              <Image
                src={imgSrcBg}
                alt="Imagen de fondo"
                className="size-full object-cover object-bottom"
                onLoad={handleImageLoad}
                loading="eager"
              />
            </motion.div>

            <motion.div
              style={{
                x: logoX,
                y: logoY,
                rotateY: logoRotateY,
              }}
              className="absolute inset-0 will-change-transform [transform-style:preserve-3d] [perspective:62.5rem]"
            >
              <div className="w-[300%] max-w-[93.75rem] top-[60%] -translate-y-1/2 -right-[10%] landscape:size-[125%] landscape:object-contain absolute landscape:-top-[10%] landscape:left-0 landscape:right-auto landscape:translate-y-0 landscape:max-w-full">
                <Image
                  src={CartillaLogo}
                  alt="Logo principal"
                  className="object-contain size-full landscape:max-w-full"
                  onLoad={handleImageLoad}
                />
              </div>
            </motion.div>

            <motion.div
              style={{
                x: subjectX,
                y: subjectY,
              }}
              className="absolute contigo-container left-1/2 -translate-x-1/2 top-0 h-full will-change-transform"
            >
              <Image
                src={imgSrcSubject}
                alt="Decoración"
                className="h-3/4 absolute bottom-0 max-w-max -right-[30%] xs:-right-[20%] landscape:h-[90%] xl:h-[95%]! w-auto xl:-right-[10%]! landscape:object-contain object-bottom drop-shadow-[0_0.625rem_1.25rem_rgba(0,0,0,0.4)]"
                onLoad={handleImageLoad}
              />
            </motion.div>
          </div>
          <div className="bg-black/30 size-full absolute inset-0 landscape:hidden" />
          <motion.div
            className="contigo-container absolute left-1/2 will-change-transform top-[8.75rem] -translate-x-1/2 landscape:top-1/2 landscape:-translate-y-1/2"
            style={{
              x: titleX,
              y: titleY,
            }}
          >
            <div className="drop-shadow-[0_0.375rem_0.75rem_rgba(0,0,0,0.55)] space-y-5">
              <h1
                className={cn(
                  "font-medium text-[min(12vw,1.9375rem)] landscape:text-[min(4vw,3.1875rem)] leading-[1.5]",
                  titleStyles
                )}
                dangerouslySetInnerHTML={{ __html: title }}
              />
              {children}
            </div>
          </motion.div>
        </motion.div>
      </section>
    </>
  );
};

export default Hero;