"use client";

import { useState } from "react";

type FaqItem = {
    question: string;
    answer: string;
};

const faqs: FaqItem[] = [
    {
        question: "How do I trade my gift cards on Coast?",
        answer:
            "Select the gift card type, upload clear images or details of your card, and submit. Once verified, your payout is processed.",
    },
    {
        question: "How long does verification take?",
        answer:
            "Most gift cards are verified within minutes. In some cases, it may take slightly longer depending on the card type.",
    },
    {
        question: "When will I receive my payment?",
        answer:
            "Once your gift card is verified, your payment is processed instantly.",
    },
    {
        question: "What types of gift cards do you accept?",
        answer:
            "We support a wide range of popular gift cards, including iTunes (Apple), Steam, RazerGold, Amazon, Sephora, and more.",
    },
    {
        question: "Why are gift card rates different?",
        answer:
            "Rates depend on market demand, card type, and region. Coast ensures you always get competitive value.",
    },
    {
        question: "What happens if my card is invalid?",
        answer:
            "If your card cannot be verified, the transaction will be declined, and you’ll be notified immediately.",
    },
];

function Chevron({ open }: { open: boolean }) {
    return (
        <svg
            width="14"
            height="14"
            viewBox="0 0 14 14"
            fill="none"
            aria-hidden
            className={`transition-transform ${open ? "rotate-180" : ""}`}
        >
            <path
                d="M3 5L7 9L11 5"
                stroke="#1f5cff"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
            />
        </svg>
    );
}

function FaqRow({
    item,
    open,
    onToggle,
}: {
    item: FaqItem;
    open: boolean;
    onToggle: () => void;
}) {
    return (
        <div className="rounded-2xl bg-white shadow-[0_2px_10px_-4px_rgba(2,16,58,0.08)]">
            <button
                type="button"
                onClick={onToggle}
                aria-expanded={open}
                className="flex w-full items-center justify-between gap-6 px-6 py-5 text-left md:px-8 md:py-6"
            >
                <span className="text-[16px] font-bold text-coast-navy md:text-[18px]">
                    {item.question}
                </span>
                <span
                    className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-full transition ${open ? "bg-chevron-bg" : "bg-chevron-bg"
                        }`}
                >
                    <Chevron open={open} />
                </span>
            </button>
            <div
                className={`grid transition-all duration-300 ${open ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
                    }`}
            >
                <div className="overflow-hidden">
                    <p className="px-6 pb-6 text-[15px] leading-relaxed text-coast-navy/85 md:px-8 md:pb-7 md:text-base">
                        {item.answer}
                    </p>
                </div>
            </div>
        </div>
    );
}

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

    return (
        <section className="bg-[#F6F8FB]">
            <div className="mx-auto max-w-[860px] px-5 py-16 md:px-10 md:py-24">
                <h2 className="text-center text-[28px] font-bold text-coast-navy md:text-[36px]">
                    Frequently Asked Questions
                </h2>

                <div className="mt-10 flex flex-col gap-4 md:mt-12">
                    {faqs.map((item, i) => (
                        <FaqRow
                            key={i}
                            item={item}
                            open={openIndex === i}
                            onToggle={() => setOpenIndex(openIndex === i ? null : i)}
                        />
                    ))}
                </div>
            </div>
        </section>
    );
}