import { useState } from "react";

export interface FaqItem {
  question: string;
  answer: string;
}

const faq: FaqItem[] = [
  {
    question: "What does KleboAi do exactly?",
    answer:
      "KleboAi checks any image you upload and tells you whether it's AI-generated or human-made. It works across images created by all major AI tools.",
  },
  {
    question: "How accurate is the KleboAi AI image detector?",
    answer:
      "KleboAi is built to be reliable across a wide range of images, using detection models trained to recognize patterns from major AI generators.",
  },
  {
    question: "What types of images can I upload to KleboAi?",
    answer:
      "KleboAi supports a wide range of image types, from personal photos and product shots to digital art and screenshots, in standard formats like JPG and PNG.",
  },
  {
    question: "Does KleboAi store the images I upload?",
    answer:
      "No, KleboAi doesn't keep your images. Each upload is analyzed once to generate a result, and nothing is saved or retained on our servers afterward.",
  },
  {
    question: "Do I need the Chrome extension to use KleboAI?",
    answer:
      "Yes. KleboAI runs as a Chrome extension and analyzes visual content directly on supported websites.",
  },
  {
    question: "How do I activate the extension?",
    answer:
      "After subscribing, enter your license key in the extension to activate your account and start analyzing content.",
  },
];

/**
 * Animated plus/minus toggle icon.
 * Two bars: the vertical bar rotates + fades away, the whole icon
 * spins 135deg as it goes from "+" to "–". Pure CSS transitions, no
 * icon library dependency.
 */
function ToggleIcon({ isOpen }: { isOpen: boolean }) {
  return (
    <span
      className="relative flex h-7.5 w-7.5 min-w-7.5 items-center justify-center rounded-full border transition-colors duration-300"
      style={{
        borderColor: isOpen ? "var(--color-badge, #6366f1)" : "var(--border-color, #d4d4d8)",
        color: isOpen ? "var(--color-badge, #6366f1)" : "var(--heading-color, #18181b)",
        backgroundColor: isOpen ? "rgba(99,102,241,0.08)" : "transparent",
      }}
    >
      <span
        className="absolute h-0.5 w-3.5 rounded-full transition-all duration-300 ease-[cubic-bezier(0.65,0,0.35,1)]"
        style={{
          backgroundColor: isOpen ? "var(--color-badge, #ceb0fa)" : "var(--heading-color, #18181b)",
        color: isOpen ? "var(--color-badge, #6366f1)" : "var(--heading-color, #18181b)",
          transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
        }}
      />
      <span
        className="absolute h-0.5 w-3.5 rounded-full transition-all duration-300 ease-[cubic-bezier(0.65,0,0.35,1)]"
        style={{
          backgroundColor: isOpen ? "var(--color-badge, #ceb0fa)" : "var(--heading-color, #18181b)",
        color: isOpen ? "var(--color-badge, #6366f1)" : "var(--heading-color, #18181b)",
          transform: isOpen ? "rotate(180deg) scale(0)" : "rotate(90deg) scale(1)",
          opacity: isOpen ? 0 : 1,
        }}
      />
    </span>
  );
}

function FaqSection() {
  const [openIndex, setOpenIndex] = useState<number | null>(0);

  const toggle = (index: number) => {
    setOpenIndex((prev) => (prev === index ? null : index));
  };

  return (
    <div className="mt-8 space-y-4 sm:mt-10">
      {faq.map((item, index) => {
        const isOpen = openIndex === index;

        return (
          <div
            key={item.question}
            className={`
              relative group rounded-xl glass p-4
              transition-[transform,box-shadow] duration-300 ease-out
              ${isOpen ? "shadow-md" : "shadow-none"}
            `}
            style={{
              transform: isOpen ? "translateY(-1px)" : "translateY(0)",
            }}
          >
            <button
              type="button"
              onClick={() => toggle(index)}
              aria-expanded={isOpen}
              className="
                flex w-full cursor-pointer items-center gap-4 text-left font-heading text-lg font-normal text-heading
                sm:gap-5 xl:text-xl
                before:content-['']
                before:absolute
                before:h-full
                before:w-full
                before:top-0
                before:left-0
              "
            >
              <ToggleIcon isOpen={isOpen} />
              <span className="transition-colors duration-300">{item.question}</span>
            </button>

            <div
              className={`
                grid overflow-hidden transition-all duration-500 ease-in-out
                ${isOpen ? "mt-2.5 grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}
              `}
            >
              <div className="overflow-hidden">
                <p
                  className="
                    pl-11 font-body text-base leading-7 text-text sm:pl-12 sm:text-lg
                    transition-transform duration-500 ease-out
                  "
                  style={{
                    transform: isOpen ? "translateY(0)" : "translateY(-6px)",
                  }}
                >
                  {item.answer}
                </p>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

export default FaqSection;