import Image from "next/image";

export function Footer() {
  return (
    <footer
      id="footer"
      className="relative w-full max-w-[1920px] h-[800px] bg-[#03070d] overflow-hidden select-none mx-auto pointer-events-none"
    >
      {/* 1. Back Frame (Frame Back, id: 1429:9164, width: 1920, height: 703, x: 0, y: 97) */}
      <div className="absolute left-0 top-[97px] w-full h-[703px] max-w-[1920px] overflow-hidden z-10">
        {/* Background Grid & Line Mesh (Group 1000011255, id: 1429:9165, w: 3024.56, h: 862.58) */}
        <div className="absolute left-1/2 -translate-x-1/2 top-0 w-[1920px] h-[703px] pointer-events-none">
          <Image
            src="/assets/images/footer_back.png"
            alt=""
            width={1920}
            height={703}
            priority
            unoptimized
            className="w-full h-full object-cover object-top pointer-events-none"
          />
        </div>

        {/* 3D Floating Shape - Right (Object, id: 1429:10203, width: 48, height: 48, x: 1165, y: 413 [rel y: 316]) */}
        <div className="absolute left-[calc(50%-960px+1165px)] top-[316px] w-[48px] h-[48px] pointer-events-none z-20">
          <Image
            src="/assets/images/footer_object_right.png"
            alt=""
            width={48}
            height={48}
            unoptimized
            className="w-full h-full object-contain pointer-events-none"
          />
        </div>

        {/* 3D Floating Shape - Left (Object, id: 1429:10206, width: 48, height: 48, x: 673, y: 449 [rel y: 352]) */}
        <div className="absolute left-[calc(50%-960px+673px)] top-[352px] w-[48px] h-[48px] pointer-events-none z-20">
          <Image
            src="/assets/images/footer_object_left.png"
            alt=""
            width={48}
            height={48}
            unoptimized
            className="w-full h-full object-contain pointer-events-none"
          />
        </div>
      </div>

      {/* 2. Glow Lighting Halos (Ellipses 1073-1080, #0029b2, blur radius 300px) */}
      <div className="absolute inset-0 w-full h-full pointer-events-none z-20 overflow-hidden">
        {/* Ellipse 1073 (id: 1429:10260, x: 621, y: 49) */}
        <div className="absolute left-[calc(50%-960px+321px)] top-[-251px] w-[782px] h-[782px] mix-blend-screen opacity-90 pointer-events-none">
          <Image
            src="/assets/images/footer_glow_ellipse.svg"
            alt=""
            width={782}
            height={782}
            unoptimized
            className="w-full h-full object-contain pointer-events-none"
          />
        </div>

        {/* Ellipse 1074 (id: 1429:10267, x: 1119, y: 49) */}
        <div className="absolute left-[calc(50%-960px+819px)] top-[-251px] w-[782px] h-[782px] mix-blend-screen opacity-90 pointer-events-none">
          <Image
            src="/assets/images/footer_glow_ellipse.svg"
            alt=""
            width={782}
            height={782}
            unoptimized
            className="w-full h-full object-contain pointer-events-none"
          />
        </div>

        {/* Ellipse 1075 & 1077 (id: 1429:10261 & 1429:10262, x: 621, y: 452) */}
        <div className="absolute left-[calc(50%-960px+321px)] top-[152px] w-[782px] h-[782px] mix-blend-screen opacity-90 pointer-events-none">
          <Image
            src="/assets/images/footer_glow_ellipse.svg"
            alt=""
            width={782}
            height={782}
            unoptimized
            className="w-full h-full object-contain pointer-events-none"
          />
        </div>

        {/* Ellipse 1076 & 1078 (id: 1429:10264 & 1429:10265, x: 1155, y: 435) */}
        <div className="absolute left-[calc(50%-960px+855px)] top-[135px] w-[782px] h-[782px] mix-blend-screen opacity-90 pointer-events-none">
          <Image
            src="/assets/images/footer_glow_ellipse.svg"
            alt=""
            width={782}
            height={782}
            unoptimized
            className="w-full h-full object-contain pointer-events-none"
          />
        </div>

        {/* Ellipse 1079 (id: 1429:10263, x: 583, y: 486) */}
        <div className="absolute left-[calc(50%-960px+283px)] top-[186px] w-[782px] h-[782px] mix-blend-screen opacity-80 pointer-events-none">
          <Image
            src="/assets/images/footer_glow_ellipse.svg"
            alt=""
            width={782}
            height={782}
            unoptimized
            className="w-full h-full object-contain pointer-events-none"
          />
        </div>

        {/* Ellipse 1080 (id: 1429:10266, x: 1117, y: 469) */}
        <div className="absolute left-[calc(50%-960px+817px)] top-[169px] w-[782px] h-[782px] mix-blend-screen opacity-80 pointer-events-none">
          <Image
            src="/assets/images/footer_glow_ellipse.svg"
            alt=""
            width={782}
            height={782}
            unoptimized
            className="w-full h-full object-contain pointer-events-none"
          />
        </div>
      </div>

      {/* 3. TeamBy Outlined Logo Vector (TeamBy, id: 1429:10259, width: 804, height: 201, x: 558, y: 91) */}
      <div className="absolute left-[calc(50%-960px+558px)] top-[91px] w-[808px] h-[204px] pointer-events-none select-none z-30">
        <Image
          src="/assets/images/footer_teamby.svg"
          alt="TeamBy"
          width={808}
          height={204}
          priority
          unoptimized
          className="w-full h-full object-contain pointer-events-none"
        />
      </div>

      {/* 4. Constellation / Star Arc Container (Container, id: 1429:10209, width: 1105.89, height: 261.82, x: 397.39, y: 312.59) */}
      <div className="absolute left-[calc(50%-960px+397px)] top-[312px] w-[1126px] h-[361px] pointer-events-none select-none z-20">
        <Image
          src="/assets/images/footer_container.svg"
          alt=""
          width={1126}
          height={361}
          unoptimized
          className="w-full h-full object-contain pointer-events-none"
        />
      </div>
    </footer>
  );
}

export const FooterSection = Footer;