"use client";

import Image from "next/image";
import { FaChevronRight } from "react-icons/fa6";
import { useRouter } from "next/navigation";

import Button from "@/components/common/button";
import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import type { WhyUsContent } from "@/lib/homepage-ghost-content";
import WhyUsImage from "@/public/client/research.webp";

type WhyUsProps = { content: WhyUsContent };

function WhyUs({ content }: WhyUsProps) {
  const router = useRouter();

  const handleButtonClick = () => {
    router.push(INTERNAL_PAGES.client.whyUs);
  };

  return (
    <section>
      <div className="flex flex-col items-center justify-center space-y-8 text-center py-24">
        <span className="relative font-noto text-xl font-bold">
          Why us
          <span className="absolute -bottom-1 left-0 w-full h-1 bg-pfrBasicBlue opacity-40 dark:opacity-100"></span>
        </span>
        <h2 className="font-inter font-black text-3xl lg:text-7xl relative px-12">
          {content.title}
          <span
            aria-hidden
            className="inline text-pfrBasicBlue"
            role="presentation"
          >
            .
          </span>
        </h2>
        <p className="font-noto text-lg lg:text-xl max-w-4xl">
          {content.supportingCopy}
        </p>
        <Button
          btnLabel="Find out more"
          className="w-48"
          customVariant="client"
          endContent={<FaChevronRight />}
          onClick={handleButtonClick}
        />
        <div className="w-full">
          <Image
            alt="Three people are chatting in a cozy room. A man in a denim jacket sits on a couch, a woman in a white blouse and yellow pants sits on another couch, and a woman in a black top and red pants sits on an armchair. "
            className="object-cover rounded-none h-96 lg:h-[600px] xxl:h-[800px] w-screen"
            loading="eager"
            src={WhyUsImage}
          />
        </div>
      </div>
    </section>
  );
}

export default WhyUs;