"use client";

import localFont from "next/font/local";
import { useState } from "react";

const figtree = localFont({
    src: [
        {
            path: '../../../public/Fonts/figtree/figtree.ttf',
        },
    ],
})

interface FAQItem {
    question: string;
    answer: string;
}

const faqData: FAQItem[] = [
    {
        question: "How does PakStay work?",
        answer: "The first step is to get in touch with us. They'll discuss with you what the best options are and proceed to calculate your potential earnings. If you're happy the next steps depend on whether you have a running set-up or starting from 0. We're familiar with both. Have a look at the onboarding process."
    },
    {
        question: "What makes PakStay the right partner?",
        answer: "Managing a vacation rental isn't easy. It's a balance of hosting, analyzing & managing a home that requires a lot of attention. We're there to take away that hassle for you because we're doing it anyways and we simply love what we're doing. We're set out on a mission to make vacation rental owners happy. Really happy."
    },
    {
        question: "What happens if I'm not happy with PakStay's service?",
        answer: ""
    },
    {
        question: "How does the onboarding process work?",
        answer: ""
    },
    {
        question: "Do I have to sign a long-term contract?",
        answer: ""
    },
    {
        question: "Do I need a running business already?",
        answer: ""
    },
    {
        question: "What about legality? Isn't short-term rental illegal?",
        answer: ""
    },
    {
        question: "I dont own my apartments, I rent them. Does that work too?",
        answer: ""
    },
    {
        question: "Do I have a personal contact at PakStay?",
        answer: ""
    },
    {
        question: "Do you really guarantee customer satisfaction? How does that work?",
        answer: ""
    },
    {
        question: "I have apartments in a city you're not operating yet.",
        answer: ""
    }
];

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

    const toggleFAQ = (index: number) => {
        setOpenIndex(openIndex === index ? null : index);
    };

    return (
        <div className="w-full bg-gray-50 py-16 px-6">
            <div className="max-w-4xl mx-auto">
                <h1 className={`${figtree.className} text-4xl md:text-5xl font-bold text-center mb-12 text-gray-900`}>
                    FAQs
                </h1>
                
                <div className="space-y-4">
                    {faqData.map((faq, index) => (
                        <div 
                            key={index}
                            className="bg-white border-2 border-gray-900 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow"
                        >
                            <button
                                onClick={() => toggleFAQ(index)}
                                className="w-full flex items-center justify-between p-6 text-left focus:outline-none hover:bg-gray-50 transition-colors"
                            >
                                <span className={`${figtree.className} text-lg font-medium text-gray-900 pr-4`}>
                                    {faq.question}
                                </span>
                                <span className={`flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center transition-all duration-200 ${
                                    openIndex === index 
                                        ? 'bg-red-500 text-white rotate-180' 
                                        : 'bg-lime-400 text-gray-900'
                                }`}>
                                    <svg 
                                        className="w-5 h-5" 
                                        fill="none" 
                                        stroke="currentColor" 
                                        viewBox="0 0 24 24"
                                    >
                                        {openIndex === index ? (
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 15l7-7 7 7" />
                                        ) : (
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M19 9l-7 7-7-7" />
                                        )}
                                    </svg>
                                </span>
                            </button>
                            
                            {openIndex === index && faq.answer && (
                                <div className="px-6 pb-6">
                                    <p className={`${figtree.className} text-gray-600 leading-relaxed`}>
                                        {faq.answer}
                                    </p>
                                </div>
                            )}
                        </div>
                    ))}
                </div>
            </div>
        </div>
    )
}

export default FAQs;