import Image from "next/image";

export function CallToActionSection() {
  return (
    <section
      id="call-to-action-section"
      className="relative w-full flex flex-col items-center z-20 px-4 mt-[40px] md:mt-[80px] mb-[120px]"
    >
      {/* Root Frame: call to action (Type: FRAME, id: 4193:10521, width: 1216, height: 445) */}
      <div className="relative w-full max-w-[1216px] h-[445px] rounded-[32px] overflow-hidden select-none">
        
        {/* Background Card (Frame 2095586149, id: 4193:10522, width: 1216, height: 445, cornerRadius: 32) */}
        <div className="absolute inset-0 w-full h-full pointer-events-none -z-10">
          <Image
            src="/assets/images/call_to_action.png"
            alt=""
            fill
            priority
            unoptimized
            className="object-cover object-center pointer-events-none select-none"
          />
        </div>

        {/* 3D Visual Graphic (Group 1000011246, id: 4193:10668, w: 360, h: 360, x: 767, y: 43) */}
        <div
          className="absolute right-[0px] sm:right-[30px] lg:right-[65px] top-[20px] lg:top-[30px] w-[300px] sm:w-[360px] lg:w-[420px] h-[287px] sm:h-[344px] lg:h-[401px] pointer-events-none select-none z-10"
          style={{
            WebkitMaskImage:
              "radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0) 70%)",
            maskImage:
              "radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0) 70%)",
          }}
        >
          <Image
            src="/assets/images/call_to_action_visual.png"
            alt=""
            width={450}
            height={430}
            priority
            unoptimized
            className="w-full h-full object-contain pointer-events-none select-none"
          />
        </div>

        {/* Text Frame (Frame 2095586148, id: 4193:10660, width: 471, height: 81, x: 132, y: 127) */}
        <div className="absolute left-[24px] sm:left-[60px] lg:left-[132px] top-[100px] lg:top-[127px] w-[calc(100%-48px)] sm:w-[471px] max-w-[471px] flex flex-col gap-[16px] z-20">
          {/* Title (Title, id: 4193:10661, 40px, Inter Medium, #ffffff) */}
          <h2 className="text-white text-[32px] sm:text-[40px] leading-[38px] sm:leading-[48px] font-medium tracking-tight text-left">
            Install in minutes.
          </h2>

          {/* Subtitle (Subtitle, id: 4193:10662, 14px, Inter Regular, #6f829e) */}
          <p className="text-[#6f829e] text-[14px] leading-[17px] font-normal text-left max-w-[471px]">
            Download TeamBy and create your workspace. No setup marathon.
          </p>
        </div>

        {/* CTA Button (Button, id: 4193:10724, width: 173, height: 48, x: 132, y: 261, radius: 12) */}
        <button
          type="button"
          id="cta-see-in-action-button"
          className="btn-primary-gradient absolute left-[24px] sm:left-[60px] lg:left-[132px] top-[245px] lg:top-[261px] w-[173px] h-[48px] rounded-[12px] px-[20px] py-[12px] flex items-center justify-center gap-[8px] cursor-pointer hover:brightness-110 active:scale-95 transition-all shadow-[0_0_25px_rgba(72,126,255,0.35)] z-20"
        >
          {/* Icon (Icon, id: 4193:10725, width: 25, height: 24) */}
          <Image
            src="/assets/images/call_to_action_icon.svg"
            alt=""
            width={25}
            height={24}
            unoptimized
            className="w-[25px] h-[24px] flex-shrink-0 pointer-events-none select-none"
          />

          {/* Button Title (Button title, id: 4193:10727, 16px, Inter Regular, lineHeight: 20px, #ffffff) */}
          <span className="text-white text-[16px] leading-[20px] font-normal text-center select-none">
            See In Action
          </span>
        </button>

      </div>
    </section>
  );
}