import Image from "next/image";

interface FaqItem {
  id: string;
  question: string;
}

const FAQ_ITEMS: FaqItem[] = [
  {
    id: "4193:10416",
    question: "We’ve been using Jira / ClickUp for years. How difficult is data migration?",
  },
  {
    id: "4193:10431",
    question: "Won’t employees feel uncomfortable or monitored with time tracking?",
  },
  {
    id: "4193:10447",
    question: "Transitioning from Basecamp to Monday.com requires careful planning to avoid data loss.",
  },
  {
    id: "4193:10462",
    question: "Is the subscription cost justified for mid-sized and large teams?",
  },
  {
    id: "4193:10478",
    question: "Transitioning from Basecamp to Monday.com requires careful planning to avoid data loss.",
  },
  {
    id: "4193:10493",
    question: "Is the subscription cost justified for mid-sized and large teams?",
  },
];

export function FaqSection() {
  return (
    <section
      id="faq-section"
      className="relative w-full flex flex-col items-center z-20 px-4 mt-[60px] md:mt-[100px] mb-[120px]"
    >
      {/* Root Container: FAQ (Type: FRAME, id: 4193:10413, width: 1010, height: 534) */}
      <div className="relative w-full max-w-[1010px] flex flex-col items-center">
        
        {/* Header Block: Text (Type: FRAME, id: 4193:10508, width: 1010, height: 132, x: 0, y: 0) */}
        <div className="relative w-full max-w-[1010px] flex flex-col items-center text-center z-20">
          
          {/* Background Glow Aura: Back (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 (Type: FRAME, id: 4193:10514, width: 40, height: 40, x: 485, y: 0, cornerRadius: 50) */}
          <div className="relative w-[40px] h-[40px] mb-[24px] flex items-center justify-center flex-shrink-0">
            <Image
              src="/assets/images/faq_header_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>

          {/* Header Text Container: Frame 2095586188 (Type: FRAME, id: 4193:10518, width: 1010, height: 68, itemSpacing: 12) */}
          <div className="w-full flex flex-col items-center gap-[12px]">
            {/* Title (Type: TEXT, id: 4193:10519, 32px, Inter Medium, #ffffff) */}
            <h2 className="text-white text-[28px] sm:text-[32px] leading-[34px] sm:leading-[39px] font-medium tracking-tight text-center max-w-[1010px]">
              Addressing Your Concerns
            </h2>

            {/* Subtitle (Type: TEXT, id: 4193:10520, 14px, Inter Regular, #6f829e) */}
            <p className="text-[#6f829e] text-[14px] leading-[17px] font-normal text-center max-w-[1010px]">
              We answer the most common questions about switching to TeamBy so you can choose with confidence.
            </p>
          </div>
        </div>

        {/* Cards Grid: Frame 2095586174 (Type: FRAME, id: 4193:10414, width: 1010, height: 322, x: 0, y: 212, itemSpacing: 32) */}
        <div className="w-full grid grid-cols-1 md:grid-cols-2 gap-[24px] md:gap-[32px] mt-[48px] md:mt-[80px] z-20">
          {FAQ_ITEMS.map((item, index) => (
            <div
              key={`${item.id}-${index}`}
              id={`faq-card-${index + 1}`}
              className="relative w-full md:max-w-[489px] min-h-[86px] rounded-[20px] bg-[#080f1a]/50 border border-white/10 backdrop-blur-md px-[24px] py-[24px] flex items-center justify-between gap-[16px] overflow-hidden group transition-all duration-300 hover:border-white/20"
            >
              {/* Subtle Card Background Glow */}
              <div
                className="absolute -top-[20px] -left-[20px] w-[180px] h-[180px] pointer-events-none -z-10 rounded-full bg-[radial-gradient(circle_at_top_left,rgba(0,41,178,0.25)_0%,transparent_70%)] opacity-80"
                aria-hidden="true"
              />

              {/* Question Title (Type: TEXT, 16px, Inter Medium, gradient #ffffff -> #a2beff) */}
              <span className="text-white text-[15px] sm:text-[16px] leading-[20px] sm:leading-[22px] font-medium text-left select-none drop-shadow-[0_0_10px_rgba(75,128,255,0.25)]">
                {item.question}
              </span>

              {/* Plus Icon: plus-sign-circle (Type: INSTANCE, id: 4193:10419, width: 24, height: 24) */}
              <div className="w-[24px] h-[24px] flex-shrink-0 flex items-center justify-center">
                <Image
                  src="/assets/images/faq_plus_icon.svg"
                  alt=""
                  width={24}
                  height={24}
                  unoptimized
                  className="w-[24px] h-[24px] pointer-events-none select-none flex-shrink-0 transition-transform duration-200 group-hover:scale-110"
                />
              </div>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

export const FAQSection = FaqSection;