"use client";

import { useState } from "react";

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

const faqs: FaqItem[] = [
    {
        question: "What bills can I pay on Coast?",
        answer:
            "You can pay for everyday services like airtime & data, electricity bills, cable TV subscriptions, sport & games. Everything is available in one place for quick and easy payments.",
    },
    {
        question: "How do I pay a bill on Coast?",
        answer:
            "Simply open the app, select “Recharge” under Quick Action on the Home tab, choose the service category (e.g., electricity, data), enter your details, and confirm payment. Your transaction is processed instantly.",
    },
    {
        question: "Are bill payments instant?",
        answer:
            "Yes, most bill payments are processed instantly or within a few minutes depending on the provider.",
    },
    {
        question: "Will I receive confirmation after payment?",
        answer:
            "Yes, you’ll get an in-app notification and receipt once your payment is successful.",
    },
    {
        question: "What happens if my payment fails?",
        answer:
            "If a payment fails, your money will not be deducted, or it will be automatically reversed. You can also contact support for assistance.",
    },
    {
        question: "Is there a fee for paying bills?",
        answer:
            "Some services may include small processing fees, which will always be shown before you confirm payment.",
    },
    {
        question: "Is it safe to pay bills on Coast?",
        answer:
            "Yes. All transactions are secured with industry-standard encryption to keep your payments safe.",
    },
];

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