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

import Button from "@/components/common/button";

type FinalCTASectionProps = {
  onClickSignup: () => void;
};

export default function FinalCTASection({
  onClickSignup,
}: FinalCTASectionProps) {
  return (
    <section className="relative flex flex-col justify-center items-center bg-b2b-light dark:bg-b2b-dark p-24">
      <div className=" bg-b2b-teal-blue dark:bg-b2b-spring-rain p-12 rounded-xl w-full md:w-3/4 lg:w-2/3 xl:w-1/2 flex flex-col items-center justify-center">
        <div className="mx-auto text-center text-white dark:text-black">
          <h2 className="font-black text-5xl font-inter">
            Ready to join our business panel?
          </h2>
          <p className="mx-auto mt-6 max-w-2xl text-lg">
            Start your journey with People for Research today, and earn £80+ per
            session for your professional opinion. Participate in insightful
            studies that shape the future of industries and businesses. Your
            expertise matters, and we&apos;re here to reward it!
          </p>
          <div className="flex justify-center pt-8">
            <Button
              btnLabel="Join our panel today"
              className="w-72"
              customVariant="black"
              endContent={<FaChevronRight />}
              onClick={onClickSignup}
            />
          </div>
        </div>
      </div>
    </section>
  );
}