"use client";

import { useState } from "react";

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

const faqs: FaqItem[] = [
    {
        question: "How do I sell crypto on Coast?",
        answer:
            "Simply open the Coast app, go to Trade Crypto, and select the coin you want to sell. Choose the right network, copy your wallet address, and send the amount you want to trade to that wallet address. Once confirmed, your payout is processed instantly.",
    },
    {
        question: "How long does it take to receive my payment?",
        answer:
            "As soon as your transaction is confirmed on the blockchain, your funds are credited instantly based on your selected settlement option. This takes seconds.",
    },
    {
        question: "Where will I receive my funds?",
        answer:
            "You can choose your preferred settlement option: Bank Account – funds are sent directly to your bank. Wallet Balance – funds are credited to your Coast wallet.",
    },
    {
        question: "What is the minimum amount I can trade?",
        answer:
            "The minimum trade amount is $5 per transaction.",
    },
    {
        question: "Are your crypto rates competitive?",
        answer:
            "Yes. Coast offers competitive, real-time rates so you always get great value when you trade.",
    },
    {
        question: "What cryptocurrencies can I trade?",
        answer:
            "You can trade popular cryptocurrencies like Bitcoin (BTC), Ethereum (ETH), USDT, and USDC directly on the app.",
    },
];

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 FAQCrypto() {
    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>
    );
}