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

import Button from "@/components/common/button";
import B2BProfessionals from "@/public/participant/business-panel/b2b-professionals.webp";

type IntroSectionProps = {
  isLoggedIn: boolean;
  onClickJoinCommunity: () => void;
};

function IntroSection({ isLoggedIn, onClickJoinCommunity }: IntroSectionProps) {
  return (
    <section className="pt-24 bg-b2b-light dark:bg-b2b-dark space-y-8">
      <h1 className="text-center font-inter font-black text-5xl md:text-6xl xxl:text-7xl mx-6 sm:mx-auto max-w-5xl">
        Calling all professionals: Join our{" "}
        <span className="text-b2b-teal-blue dark:text-b2b-spring-rain">
          business research panel
        </span>{" "}
        and share your valuable insights.
      </h1>
      <p className="max-w-4xl text-center leading-7 mb-9 mx-6 sm:mx-auto text-xl">
        Share your expertise and help shape the future of products and services
        in your industry. You will be paid for your valued opinion and can take
        part from anywhere in the world.
      </p>
      <div className="flex justify-center my-8">
        <Button
          btnLabel={isLoggedIn ? "Apply now" : "Join our panel"}
          customVariant="b2b"
          endContent={<FaChevronRight />}
          onClick={onClickJoinCommunity}
        />
      </div>
      <div className="w-full mt-8 mx-auto">
        <Image
          unoptimized
          alt="A group of business professionals standing together in front of a modern office building. They are smiling and looking at the camera."
          className="object-cover h-[200px] md:h-[300px] lg:h-[600px] xxl:h-[1000px] object-top"
          height={2000}
          loading="eager"
          src={B2BProfessionals}
        />
      </div>
    </section>
  );
}

export default IntroSection;