import Image from "next/image";

export function AiCopilotSection() {
  return (
    <section
      id="ai-copilot-section"
      className="relative w-full flex flex-col items-center z-20 px-4 mt-[80px] mb-[100px]"
    >
      {/* Floating Side Decorative Icons (Group 2147223357 & Group 2147223359: w: 32, h: 160) */}
      <div className="absolute left-[calc(50%-680px)] top-[260px] w-[32px] h-[160px] pointer-events-none hidden xl:block z-10 opacity-90">
        <Image
          src="/assets/images/copilot_side_decor_left.svg"
          alt=""
          width={32}
          height={160}
          unoptimized
          className="w-full h-full object-contain"
        />
      </div>
      <div className="absolute right-[calc(50%-680px)] top-[260px] w-[32px] h-[160px] pointer-events-none hidden xl:block z-10 opacity-90">
        <Image
          src="/assets/images/copilot_side_decor_right.svg"
          alt=""
          width={32}
          height={160}
          unoptimized
          className="w-full h-full object-contain"
        />
      </div>

      {/* Top Header Block (Text_1429_12117: w: 864, h: 132, y: 0) */}
      <div className="relative w-full max-w-[864px] flex flex-col items-center text-center z-20">
        {/* Glow Aura behind badge (Back_1429_12118: Ellipse 1578 & 1579) */}
        <div className="absolute -top-[50px] left-1/2 -translate-x-1/2 w-[180px] h-[180px] pointer-events-none -z-10">
          <div className="absolute inset-0 bg-[#001ac7] rounded-full blur-[100px] opacity-70" />
          <div className="absolute inset-[20px] bg-[#4e66ff] rounded-full blur-[50px] opacity-80" />
        </div>

        {/* Badge (3_1429_12123: w: 40, h: 40) */}
        <div className="relative w-[40px] h-[40px] mb-[24px] flex items-center justify-center flex-shrink-0">
          <Image
            src="/assets/images/copilot_badge.svg"
            alt=""
            width={100}
            height={100}
            unoptimized
            className="w-[100px] h-[100px] max-w-none flex-shrink-0 pointer-events-none select-none"
          />
        </div>

        {/* Text Container (Text_Container_1429_12126: w: 864, h: 68, itemSpacing: 12) */}
        <div className="w-full flex flex-col items-center gap-[12px]">
          {/* Title (Title_1429_12127: 32px, Medium, #ffffff) */}
          <h2 className="text-white text-[32px] leading-[39px] font-medium tracking-tight text-center max-w-[538px]">
            Meet your AI management co‑pilot.
          </h2>

          {/* Subtitle (Subtitle_1429_12128: 14px, Regular, #6f829e) */}
          <p className="text-[#6f829e] text-[14px] leading-[17px] font-normal text-center max-w-[864px]">
            TeamBy connects tasks, time, costs, and docs—then uses AI to optimize workflows and meeting time, so you can manage smarter.
          </p>
        </div>
      </div>

      {/* Content Frame: AI Orb & Feature Matrix (Content_Frame_1429_12129: w: 1216, h: 437, y: 212) */}
      <div className="relative w-full max-w-[1216px] h-[340px] md:h-[437px] mt-[48px] flex items-center justify-center overflow-visible">
        {/* Left Icons Matrix with smooth unclipped shadow blur (icons_1429_12130: w: 495, h: 288) */}
        <div className="absolute left-[calc(50%-608px)] top-1/2 -translate-y-1/2 w-[495px] h-[288px] flex items-center justify-center pointer-events-none z-0">
          <Image
            src="/assets/images/copilot_icons_left.png"
            alt=""
            width={693}
            height={815}
            priority
            unoptimized
            className="max-w-none flex-shrink-0 select-none pointer-events-none"
          />
        </div>

        {/* Right Icons Matrix with smooth unclipped shadow blur (icons_1429_12149: w: 495, h: 288) */}
        <div className="absolute right-[calc(50%-608px)] top-1/2 -translate-y-1/2 w-[495px] h-[288px] flex items-center justify-center pointer-events-none z-0">
          <Image
            src="/assets/images/copilot_icons_right.png"
            alt=""
            width={693}
            height={815}
            priority
            unoptimized
            className="max-w-none flex-shrink-0 select-none pointer-events-none"
          />
        </div>

        {/* Center Luminous Ball AI Orb (Luminous_ball_1429_12168: w: 437, h: 437) */}
        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[437px] h-[437px] flex items-center justify-center pointer-events-none z-10">
          <Image
            src="/assets/images/copilot_luminous_ball.png"
            alt="AI Co-Pilot Luminous Sphere"
            width={1349}
            height={865}
            priority
            unoptimized
            className="max-w-none flex-shrink-0 select-none pointer-events-none"
          />
        </div>
      </div>
    </section>
  );
}