import Image from "next/image";

export function TeambyAssistSection() {
  return (
    <section
      id="teamby-assist-section"
      className="relative w-full flex flex-col items-center z-20 px-4 mt-[40px] mb-[120px]"
    >
      {/* Frame 2147225289 (Type: FRAME, id: 4193:9747, width: 1216, height: 608) */}
      <div className="relative w-full max-w-[1216px] min-h-[608px] flex flex-col items-center overflow-visible">
        
        {/* ========================================================================= */}
        {/* 1. Header & Titles Container (Frame 2147225107, id: 4193:9748, w: 802, h: 195, x: 207, y: 0) */}
        {/* ========================================================================= */}
        <div className="relative w-full max-w-[802px] flex flex-col items-center text-center z-30">
          
          {/* Badge (Frame 2147225110, id: 4193:9749, w: 108, h: 48, itemSpacing: -8) */}
          <div className="relative flex flex-col items-center">
            {/* Badge Sparkle Star + Blur Halo (Frame 2147225109 & 3_4193_9751, w: 32, h: 32) */}
            <div className="relative w-[32px] h-[32px] flex items-center justify-center -mb-[8px] pointer-events-none select-none z-20">
              <Image
                src="/assets/images/assist_badge_star.png"
                alt=""
                width={64}
                height={64}
                unoptimized
                className="w-[64px] h-[64px] max-w-none flex-shrink-0"
              />
            </div>

            {/* Badge Pill (Header, id: 4193:9756, w: 108, h: 24, padding: 12px 4px, rounded: 24px) */}
            <div className="relative z-10 px-[12px] py-[4px] rounded-[24px] bg-[#0f1a47]/70 border border-white/50 backdrop-blur-[14px] flex items-center justify-center">
              {/* Title (id: 4193:9757, 12px, Inter Medium, #dae5ff) */}
              <span className="text-[#dae5ff] text-[12px] leading-[16px] font-medium tracking-normal select-none">
                Teamby Assist
              </span>
            </div>
          </div>

          {/* Titles Block (Frame 2147225111, id: 4193:9758, w: 802, h: 99, itemSpacing: 16, mt: 48px) */}
          <div className="w-full flex flex-col items-center mt-[48px] gap-[12px]">
            {/* Title (Subtitle, id: 4193:9761, 32px, Inter Medium, #e4ecf7) */}
            <h2 className="text-[#e4ecf7] text-[28px] sm:text-[32px] leading-[36px] sm:leading-[39px] font-medium tracking-tight text-center">
              Teamby gets is done.
            </h2>

            {/* Subtitle (Subtitle, id: 4193:9762, 16px, Inter Regular, lineHeight: 24px, #6f829e) */}
            <p className="text-[#6f829e] text-[14px] sm:text-[16px] leading-[22px] sm:leading-[24px] font-normal text-center max-w-[802px]">
              TeamBy unifies your work and uses AI to optimize workflows, meetings, and costs—so you can manage smarter without chasing updates.
            </p>
          </div>
        </div>

        {/* ========================================================================= */}
        {/* 2. Background Cosmic Light Wings & Particles */}
        {/* ========================================================================= */}
        {/* Left Wing (Group 2147223381, id: 4193:9764, w: 371, h: 228, x: 205, y: 302) */}
        <div className="absolute left-[calc(50%-403px)] top-[302px] w-[371px] h-[228px] pointer-events-none select-none z-0 hidden md:block">
          <Image
            src="/assets/images/assist_beam_left.png"
            alt=""
            width={371}
            height={228}
            unoptimized
            className="w-full h-full object-contain"
          />
        </div>

        {/* Right Wing (Group 2147223382, id: 4193:9917, w: 371, h: 228, x: 640, y: 302, rotation: -180) */}
        <div className="absolute left-[calc(50%+32px)] top-[302px] w-[371px] h-[228px] pointer-events-none select-none z-0 hidden md:block">
          <Image
            src="/assets/images/assist_beam_right.png"
            alt=""
            width={371}
            height={228}
            unoptimized
            className="w-full h-full object-contain"
          />
        </div>

        {/* ========================================================================= */}
        {/* 3. Central Glowing Orbit / Orb (Orbit, id: 4193:10070, w: 390, h: 390, x: 413, y: 218) */}
        {/* ========================================================================= */}
        <div className="relative md:absolute md:left-1/2 md:-translate-x-1/2 md:top-[92px] w-full max-w-[390px] md:max-w-none md:w-[802px] h-[340px] md:h-[641px] flex items-center justify-center pointer-events-none select-none z-10 my-[20px] md:my-0">
          <Image
            src="/assets/images/assist_orb.png"
            alt="Teamby Assist Cosmic Orb"
            width={802}
            height={641}
            priority
            unoptimized
            className="w-full md:w-[802px] h-auto md:h-[641px] max-w-none object-contain"
          />
        </div>

        {/* ========================================================================= */}
        {/* 4. Left Task Voice Pills (Frame 2147225288, id: 4193:10200, w: 286, h: 328, x: 0, y: 251) */}
        {/* ========================================================================= */}
        <div className="relative md:absolute md:left-0 md:top-[251px] w-full max-w-[286px] h-[328px] z-20 flex flex-col justify-between">
          
          {/* Card 1: (Frame 2147225284, id: 4193:10205, w: 286, h: 104, y: 251, opacity: 0.4) */}
          <div className="relative w-[286px] h-[104px] p-[16px] rounded-tl-[24px] rounded-tr-[24px] rounded-br-[24px] rounded-bl-0 bg-[#03070d]/20 border border-[#0f161f] opacity-40 backdrop-blur-[4px] flex items-start gap-[16px]">
            <div className="w-[24px] h-[24px] flex-shrink-0 mt-[2px]">
              <Image
                src="/assets/images/assist_audio_lines.svg"
                alt=""
                width={24}
                height={24}
                unoptimized
                className="w-[24px] h-[24px]"
              />
            </div>
            <p className="text-[#e4ecf7] text-[16px] leading-[24px] font-normal text-left font-[family-name:var(--font-inter)]">
              Create a task for the design team to review the landing page by 4 PM.
            </p>
          </div>

          {/* Card 2: Active (Frame 2147225286, id: 4193:10210, w: 286, h: 96, y: 367, opacity: 1) */}
          <div className="relative w-[286px] h-[96px] flex items-center">
            {/* Rectangle 1000001632 (id: 4193:10214, w: 216, h: 44, fill: #124aff, blur: 64px) */}
            <div className="absolute -right-[100px] top-1/2 -translate-y-1/2 w-[216px] h-[44px] bg-[#124aff] rounded-full blur-[64px] pointer-events-none opacity-90 -z-10" />

            <div className="relative w-full h-full p-[24px] rounded-tl-[24px] rounded-tr-[24px] rounded-br-[24px] rounded-bl-0 bg-[#03070d]/20 border border-[#232f40] backdrop-blur-[4px] flex items-start gap-[16px] z-10">
              <div className="w-[24px] h-[24px] flex-shrink-0 mt-[2px]">
                <Image
                  src="/assets/images/assist_audio_lines.svg"
                  alt=""
                  width={24}
                  height={24}
                  unoptimized
                  className="w-[24px] h-[24px]"
                />
              </div>
              <p className="text-[#e4ecf7] text-[16px] leading-[24px] font-normal text-left font-[family-name:var(--font-inter)]">
                Message Sara and cancel tomorrow&apos;s meeting.
              </p>
            </div>
          </div>

          {/* Card 3: (Frame 2147225287, id: 4193:10201, w: 286, h: 104, y: 475, opacity: 0.4) */}
          <div className="relative w-[286px] h-[104px] p-[16px] rounded-tl-[24px] rounded-tr-[24px] rounded-br-[24px] rounded-bl-0 bg-[#03070d]/20 border border-[#0f161f] opacity-40 backdrop-blur-[4px] flex items-start gap-[16px]">
            <div className="w-[24px] h-[24px] flex-shrink-0 mt-[2px]">
              <Image
                src="/assets/images/assist_audio_lines.svg"
                alt=""
                width={24}
                height={24}
                unoptimized
                className="w-[24px] h-[24px]"
              />
            </div>
            <p className="text-[#e4ecf7] text-[16px] leading-[24px] font-normal text-left font-[family-name:var(--font-inter)]">
              Reschedule the product meeting to Friday at 2 PM and let everyone know.
            </p>
          </div>

          {/* Vertical Gradient Fade Mask (Rectangle 1000001631, id: 4193:10209, w: 286, h: 328) */}
          <div className="absolute inset-0 pointer-events-none rounded-tl-[24px] rounded-tr-[24px] rounded-br-[24px] rounded-bl-0 bg-gradient-to-b from-[#03070D] via-transparent to-[#03070D] z-20" />
        </div>

      </div>
    </section>
  );
}