import Image from "next/image";
import { AnimatedCopilotOrb } from "@/components/copilot/AnimatedCopilotOrb";

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 (Clipped from half of icon to top) */}
        <div className="absolute top-[20px] left-1/2 -translate-x-1/2 w-[300px] h-[200px] pointer-events-none -z-10 overflow-hidden">
          <div className="absolute -top-[70px] left-1/2 -translate-x-1/2 w-[130px] h-[130px]">
            <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>
        </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: Separated AI Orb & Feature Matrices (Figma: 1216px x 437px) */}
      <div className="relative w-full max-w-[1216px] mt-[48px] flex items-center justify-center">
        <div className="relative w-full aspect-[1216/437] max-w-[1216px] overflow-visible select-none">
          {/* Left Icon Matrix (Figma: 495x288 at x=0, y=75) */}
          <div className="absolute left-[-16.28%] top-1/2 -translate-y-1/2 w-[57%] h-[186.5%] pointer-events-none select-none z-0">
            <Image
              src="/assets/images/copilot_icons_left.png"
              alt="AI Features Matrix Left"
              fill
              priority
              unoptimized
              className="object-contain object-left select-none"
              sizes="(max-width: 1280px) 45vw, 550px"
            />
          </div>

          {/* Right Icon Matrix (Figma: 495x288 at x=721, y=75) */}
          <div className="absolute right-[-16.28%] top-1/2 -translate-y-1/2 w-[57%] h-[186.5%] pointer-events-none select-none z-0">
            <Image
              src="/assets/images/copilot_icons_right.png"
              alt="AI Features Matrix Right"
              fill
              priority
              unoptimized
              className="object-contain object-right select-none"
              sizes="(max-width: 1280px) 45vw, 550px"
            />
          </div>

          {/* Middle Luminous Orb (Figma: 437x437 centered at x=608, y=218.5) */}
          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[132.57%] h-[197.94%] pointer-events-none select-none z-10">
            <AnimatedCopilotOrb />
          </div>
        </div>
      </div>
    </section>
  );
}