import * as motion from "motion/react-client";

interface HeroSectionProps {
  titleStart: string;
  titleHighlight?: string;
  titleEnd?: string;
  description: string;
  titleClassName?: string;
  showImages?: boolean;
}

export default function HeroSection({
  titleStart,
  titleHighlight,
  titleEnd,
  description,
  titleClassName,
  showImages = true,
}: HeroSectionProps) {
  return (
    <div className="flex flex-col bg-[#F2F2E9] min-h-[400px] lg:min-h-[628px] py-[60px] lg:py-0 justify-center items-center relative overflow-hidden px-[30px] md:px-[60px] lg:px-[135px] pt-[90px]">
      <img
        src="/icons/hero-section-bg.svg"
        alt=""
        className="absolute top-0 right-[-5%] lg:right-[-5%] w-full sm:w-[80%] lg:w-[50%] h-full object-cover rotate-180 opacity-50 lg:opacity-100 mix-blend-multiply lg:mix-blend-normal"
      />
      <img
        src="/icons/hero-section-bg.svg"
        alt=""
        className="absolute top-0 left-[-5%] lg:left-[-5%] w-full sm:w-[80%] lg:w-[50%] h-full object-cover opacity-50 lg:opacity-100 mix-blend-multiply lg:mix-blend-normal"
      />
      <div className="flex flex-row text-center w-full z-1">
        <motion.div
          className="flex flex-col gap-4 lg:gap-[16px] w-full items-center"
          initial={{ opacity: 0, scale: 0.96 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{
            once: true,
            amount: 0.5,
          }}
          transition={{
            duration: 0.75,
            ease: "easeOut",
          }}
        >
          <div
            className={`text-[32px] leading-[38px] xs:text-[40px] xs:leading-[48px] md:text-[56px] md:leading-[64px] lg:text-[74px] lg:leading-[84px] font-bold walsheim text-[#3B3B3B] ${titleClassName || ""}`}
          >
            {titleStart}
            {titleHighlight && (
              <span className="text-[#F58220] mx-5 inline-block whitespace-nowrap">
                {" "}
                <span className="relative">
                  {showImages && (
                    <img
                      className="absolute md:left-[-26px] md:top-[-19px] left-[-17px] top-[-11px] w-[30px] h-[30px] md:w-auto md:h-auto"
                      src="/images/common/left-hl.svg"
                      alt=""
                    />
                  )}{" "}
                  {titleHighlight}{" "}
                  {showImages && (
                    <img
                      className="absolute right-[-21px] top-[-11px] md:right-[-29px] md:top-[-14px] w-[30px] h-[30px] md:w-auto md:h-auto"
                      src="/images/common/right-hl.svg"
                      alt=""
                    />
                  )}{" "}
                </span>
              </span>
            )}
            {""}
            {titleEnd || ""}
          </div>
          <p className="text-sm xs:text-base md:text-lg text-[#444444] leading-5 md:leading-6 figtree max-w-none lg:max-w-[658px]">
            {description}
          </p>
        </motion.div>
      </div>
    </div>
  );
}