import Image from "next/image";

export function VoiceAgentSection() {
  return (
    <section
      id="voice-agent-section"
      className="relative w-full flex flex-col items-center z-20 px-4 mb-[120px]"
    >
      {/* Frame 2147225098 (Type: FRAME, id: 1429:12443, width: 1216, height: 1330) */}
      <div className="relative w-full max-w-[1216px] flex flex-col gap-[24px]">
        {/* ROW 1: (y: 0, height: 481) */}
        <div className="w-full flex flex-col lg:flex-row gap-[24px] items-stretch">
          {/* 1. Image Container (id: 1429:12444, width: 803, height: 481, fills: #080f1a opacity 0.5, cornerRadius: 32) */}
          <div className="relative w-full lg:w-[803px] h-[481px] rounded-[32px] bg-[#080f1a]/50 border border-white/[0.08] overflow-hidden flex-shrink-0">
            {/* Glow Effects: Ellipse 1075, 1079, 1080 */}
            <div className="absolute -left-[112px] top-[322px] w-[318px] h-[318px] rounded-full bg-[#0029b2] blur-[100px] pointer-events-none opacity-80" />
            <div className="absolute -left-[112px] top-[401px] w-[239px] h-[239px] rounded-full bg-[#0032d7] blur-[70px] pointer-events-none opacity-80" />
            <div className="absolute -left-[112px] top-[461px] w-[179px] h-[179px] rounded-full bg-[#809dff] blur-[50px] pointer-events-none opacity-70" />

            {/* Title (id: 1429:12445, x: 40, y: 40, w: 723, h: 20) */}
            <span className="absolute left-[40px] top-[40px] text-[#6f829e] text-[14px] leading-[20px] tracking-[0.1px] font-normal font-[family-name:var(--font-poppins)] select-none">
              Smart Voice Agent 
            </span>

            {/* Text Block (id: 1429:12446, x: 40, y: 366, w: 723, h: 75) */}
            <div className="absolute left-[40px] top-[366px] w-[calc(100%-80px)] max-w-[723px] flex flex-col">
              {/* Frame 2147225099 (id: 1429:12447, itemSpacing: 12) */}
              <div className="flex flex-col gap-[12px]">
                {/* Title (id: 1429:12448, 24px, Inter Medium, #f7faff) */}
                <h3 className="text-[#f7faff] text-[24px] leading-[29px] font-medium tracking-tight">
                  Stop typing. Just say it.TeamBy follows through.
                </h3>
                {/* Subtitle (id: 1429:12449, 14px, Inter Regular, #6f829e) */}
                <p className="text-[#6f829e] text-[14px] leading-[17px] font-normal max-w-[723px]">
                  Speak naturally and TeamBy types for you, creates tasks, assigns owners, sets deadlines, and generates status summaries on demand.
                </p>
              </div>
            </div>
          </div>

          {/* 2. Card (id: 1429:12454, width: 389, height: 481, fills: #080f1a opacity 0.5, cornerRadius: 32) */}
          <div className="relative w-full lg:w-[389px] h-[481px] rounded-[32px] bg-[#080f1a]/50 border border-white/[0.08] overflow-hidden flex-shrink-0">
            {/* Background Glow (Vector 6071 / id: 1429:12456) */}
            <div className="absolute inset-0 pointer-events-none select-none opacity-80">
              <Image
                src="/assets/images/feature_grid_card_glow.png"
                alt=""
                fill
                unoptimized
                className="object-cover"
              />
            </div>

            {/* Star particle constellation (id: 1429:12463) */}
            <div className="absolute inset-0 pointer-events-none select-none">
              <Image
                src="/assets/images/feature_grid_card_stars.svg"
                alt=""
                fill
                unoptimized
                className="object-cover"
              />
            </div>

            {/* Orbit glow lines & sphere (Group 2147223363 & 2147223364) */}
            <div className="absolute inset-0 pointer-events-none select-none">
              <Image
                src="/assets/images/feature_grid_card_orbit2.png"
                alt=""
                fill
                unoptimized
                className="object-cover"
              />
              <Image
                src="/assets/images/feature_grid_card_orbit1.png"
                alt=""
                fill
                unoptimized
                className="object-cover"
              />
            </div>

            {/* Frame 2147225100: 250% (HTML text) + Arrow up-right (x: 32, y: 72, w: 188.79, h: 47.55) */}
            <div className="absolute left-[32px] top-[72px] flex items-start select-none">
              <span className="text-[48px] leading-[48px] font-medium tracking-tight bg-gradient-to-b from-[#ffffff] to-[#86a2ff] bg-clip-text text-transparent font-[Inter]">
                250%
              </span>
              <Image
                src="/assets/images/feature_grid_card_arrow.svg"
                alt=""
                width={20}
                height={20}
                unoptimized
                className="w-[20px] h-[20px] ml-1 flex-shrink-0"
              />
            </div>

            {/* Subtitle (id: 1429:12521, x: 32, y: 415, w: 325, h: 34, 14px, Inter Regular, #6995ff) */}
            <p className="absolute left-[32px] top-[415px] w-[325px] text-[#6995ff] text-[14px] leading-[17px] font-normal">
              Speak naturally and TeamBy types for you, creates tasks, assigns owners.
            </p>
          </div>
        </div>

        {/* ROW 2: Group 2147223361 (y: 505, height: 481) */}
        <div className="w-full flex flex-col lg:flex-row gap-[24px] items-stretch">
          {/* 3. Card (id: 1429:12532, width: 389, height: 481, fills: #080f1a opacity 0.5, stroke: #2e353f, cornerRadius: 32) */}
          <div className="relative w-full lg:w-[389px] h-[481px] rounded-[32px] bg-[#080f1a]/50 border border-[#2e353f] overflow-hidden flex-shrink-0">
            {/* Earth from space image (id: 1429:12533, w: 389, h: 388, rotation: -180) */}
            <div className="absolute top-0 left-0 w-[389px] h-[388px] pointer-events-none select-none overflow-hidden">
              <Image
                src="/assets/images/feature_grid_earth.png"
                alt="Earth from Space"
                fill
                unoptimized
                className="object-cover"
              />
              {/* Inner shadow overlay */}
              <div className="absolute inset-0 shadow-[inset_0_0_100px_#040a13] pointer-events-none" />
            </div>

            {/* Ellipse arc line (id: 1429:12534) */}
            <div className="absolute top-[62px] -left-[120px] w-[958px] h-[275px] pointer-events-none select-none">
              <Image
                src="/assets/images/feature_grid_earth_ellipse.svg"
                alt=""
                width={389}
                height={231}
                unoptimized
                className="w-full h-auto object-contain"
              />
            </div>

            {/* Box Blur overlay (id: 1429:12535, w: 598, h: 352, x: -104, y: 257) */}
            <div
              className="absolute -left-[104px] top-[257px] w-[598px] h-[352px] pointer-events-none backdrop-blur-[2px] bg-black/[0.01]"
              style={{
                WebkitMaskImage:
                  "linear-gradient(to bottom, transparent 0%, black 35%, black 100%)",
                maskImage:
                  "linear-gradient(to bottom, transparent 0%, black 35%, black 100%)",
              }}
            />

            {/* Text Block (id: 1429:12536, x: 40, y: 388, w: 283, h: 53) */}
            <div className="absolute left-[40px] top-[388px] w-[283px] flex flex-col">
              {/* Frame 2147225099 (id: 1429:12537, itemSpacing: 12) */}
              <div className="flex flex-col gap-[12px]">
                {/* Title (id: 1429:12538, 20px, Inter Medium, #f7faff) */}
                <h3 className="text-[#f7faff] text-[20px] leading-[24px] font-medium tracking-tight">
                  Stop typing
                </h3>
                {/* Subtitle (id: 1429:12539, 14px, Inter Regular, #6995ff) */}
                <p className="text-[#6995ff] text-[14px] leading-[17px] font-normal">
                  Speak naturally and TeamBy types for you.
                </p>
              </div>
            </div>
          </div>

          {/* 4. Image Container (id: 1429:12523, width: 803, height: 481, fills: #080f1a opacity 0.5, cornerRadius: 32) */}
          <div className="relative w-full lg:w-[803px] h-[481px] rounded-[32px] bg-[#080f1a]/50 border border-white/[0.08] overflow-hidden flex-shrink-0">
            {/* Glow Effects: Ellipse 1075, 1079, 1080 */}
            <div className="absolute -left-[112px] top-[322px] w-[318px] h-[318px] rounded-full bg-[#0029b2] blur-[100px] pointer-events-none opacity-80" />
            <div className="absolute -left-[112px] top-[401px] w-[239px] h-[239px] rounded-full bg-[#0032d7] blur-[70px] pointer-events-none opacity-80" />
            <div className="absolute -left-[112px] top-[461px] w-[179px] h-[179px] rounded-full bg-[#809dff] blur-[50px] pointer-events-none opacity-70" />

            {/* Title (id: 1429:12524, x: 40, y: 40, w: 723, h: 20) */}
            <span className="absolute left-[40px] top-[40px] text-[#6f829e] text-[14px] leading-[20px] tracking-[0.1px] font-normal font-[family-name:var(--font-poppins)] select-none">
              Smart Voice Agent 
            </span>

            {/* Text Block (id: 1429:12525, x: 40, y: 366, w: 723, h: 75) */}
            <div className="absolute left-[40px] top-[366px] w-[calc(100%-80px)] max-w-[723px] flex flex-col">
              {/* Frame 2147225099 (id: 1429:12526, itemSpacing: 12) */}
              <div className="flex flex-col gap-[12px]">
                {/* Title (id: 1429:12527, 24px, Inter Medium, #f7faff) */}
                <h3 className="text-[#f7faff] text-[24px] leading-[29px] font-medium tracking-tight">
                  Stop typing. Just say it.TeamBy follows through.
                </h3>
                {/* Subtitle (id: 1429:12528, 14px, Inter Regular, #6f829e) */}
                <p className="text-[#6f829e] text-[14px] leading-[17px] font-normal max-w-[723px]">
                  Speak naturally and TeamBy types for you, creates tasks, assigns owners, sets deadlines, and generates status summaries on demand.
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* ROW 3: Group 2147223362 (y: 1010, height: 320) */}
        <div className="w-full flex flex-col lg:flex-row gap-[24px] items-stretch">
          {/* 5. Card (id: 1429:12543, width: 596, height: 320, fills: #080f1a opacity 0.5, stroke: #2e353f, cornerRadius: 32) */}
          <div className="relative w-full lg:w-[596px] h-[320px] rounded-[32px] bg-[#080f1a]/50 border border-[#2e353f] overflow-hidden flex-shrink-0" />

          {/* 6. Card (id: 1429:12541, width: 596, height: 320, fills: #080f1a opacity 0.5, stroke: #2e353f, cornerRadius: 32) */}
          <div className="relative w-full lg:w-[596px] h-[320px] rounded-[32px] bg-[#080f1a]/50 border border-[#2e353f] overflow-hidden flex-shrink-0" />
        </div>
      </div>
    </section>
  );
}