hireby-frontend/components/three-steps-section.tsx

import Image from "next/image";

interface StepCard {
  id: string;
  imageSrc: string;
  imageWidth: number;
  imageHeight: number;
  title: string;
  description: string;
}

const STEP_CARDS: StepCard[] = [
  {
    id: "step-1",
    imageSrc: "/assets/images/step-1-illustration.png",
    imageWidth: 395,
    imageHeight: 296,
    title: "Define what good looks like.",
    description:
      "No complex implementation story. Start with the role, let candidates respond, and review the evidence when it’s ready.",
  },
  {
    id: "step-2",
    imageSrc: "/assets/images/step-2-illustration.png",
    imageWidth: 337,
    imageHeight: 252,
    title: "Invite every candidate into the same structure.",
    description:
      "Share one interview link. Candidates respond online through video, audio, text, or assessments—without ...",
  },
  {
    id: "step-3",
    imageSrc: "/assets/images/step-3-illustration.png",
    imageWidth: 333,
    imageHeight: 250,
    title: "Review the shortlist—and the reasons behind it.",
    description:
      "Compare candidates against the same criteria, open the evidence behind each score, and choose who moves ...",
  },
];

export function ThreeStepsSection() {
  return (
    <section
      id="how-it-work"
      className="relative w-full bg-white overflow-hidden pt-16 lg:pt-[100px] pb-20 lg:pb-[150px]"
    >

      <div className="relative z-10 max-w-[1216px] mx-auto px-4">
        {/* Top Centered Logo (Logo 759:7254 - 64x64 at y=0) */}
        <div className="flex justify-center mb-[14px]">
          <div className="relative w-[64px] h-[64px] flex items-center justify-center">
            <Image
              src="/assets/images/three-steps-badge.svg"
              alt="Three steps"
              width={64}
              height={64}
              className="w-full h-full object-contain"
            />
          </div>
        </div>

        {/* Text Header Container (text 759:7248 - 1160x156, itemSpacing: 16) */}
        <div className="max-w-[1160px] mx-auto text-center flex flex-col items-center gap-4">
          {/* Main Title with 'Three steps' highlight pill */}
          <h2 className="text-3xl sm:text-4xl md:text-[48px] md:leading-[58px] tracking-tight">
            <div className="flex justify-center">
              <span className="relative inline-flex items-center justify-center shrink-0 px-3 sm:px-5 md:px-6 py-0.5 sm:py-1">
                {/* Rectangle 1000001759 Background Pill */}
                <span className="absolute inset-x-0 bottom-3 h-[38px] rounded-full overflow-hidden pointer-events-none">
                  <Image
                    src="/assets/images/Frame 2147263248.svg"
                    alt=""
                    fill
                    className="w-full h-full object-cover"
                  />
                </span>
                <span
                  className="relative z-10 font-bold bg-clip-text text-transparent"
                  style={{
                    backgroundImage: "linear-gradient(to bottom, #9ddd8a, #3ad288)",
                  }}
                >
                  Three steps
                </span>
              </span>
            </div>
            <span className="block font-medium text-[#020d09]">
              from open role to&nbsp;reviewable shortlist.
            </span>
          </h2>

          {/* Subtitle Description (Subtitle 759:7250 - fontSize: 18, lineHeight: 24, opacity: 0.3) */}
          <p className="text-base sm:text-[18px] leading-[24px] text-[#020d09]/30 max-w-[1160px] mx-auto font-normal font-sans">
            No complex implementation story. Start with the role, let candidates respond, and review the evidence when it’s ready.
          </p>
        </div>

        {/* 3 Cards Container Wrapper */}
        <div className="relative mt-12 md:mt-16 lg:mt-[80px] max-w-[1216px] mx-auto">
          {/* Background Curved Band (Rectangle 1000001764 - 1920x484 centered on cards) */}
          <div
            aria-hidden="true"
            className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[1920px] h-[484px] pointer-events-none z-0 select-none"
          >
            <Image
              src="/assets/images/three-steps-bg-band.svg"
              alt=""
              width={1920}
              height={484}
              className="w-full h-full object-fill"
            />
          </div>

          {/* 3 Cards Container Frame (Frame 2147263192 - 1216x486, cornerRadius: 48, padding: 8, itemSpacing: 8) */}
          <div
            className="relative z-10 rounded-[48px] p-2 flex flex-col lg:flex-row gap-2 shadow-sm"
            style={{
              background:
                "linear-gradient(135deg, rgba(244, 207, 0, 0.2) 0%, rgba(0, 167, 104, 0.2) 100%), rgba(21, 154, 104, 0.3)",
            }}
          >
            {STEP_CARDS.map((card) => (
              <div
                key={card.id}
                className="flex-1 bg-white rounded-[40px] min-h-[470px] flex flex-col justify-between overflow-hidden shadow-xs"
              >
                {/* Illustration Area (height: 296px) */}
                <div className="relative w-full h-[296px] flex items-center justify-center p-4">
                  <Image
                    src={card.imageSrc}
                    alt={card.title}
                    width={card.imageWidth}
                    height={card.imageHeight}
                    className="max-h-[296px] w-auto object-contain"
                  />
                </div>

                {/* Text Container (Frame 2147263193 - width: 330, height: 138, itemSpacing: 8) */}
                <div className="px-8 pb-8 pt-2 flex flex-col gap-2">
                  <h3 className="text-[24px] leading-[29px] font-medium text-[#020d09] text-left">
                    {card.title}
                  </h3>
                  <p className="text-[18px] leading-[24px] text-[#020d09]/30 font-normal text-left font-sans">
                    {card.description}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}