import React, { useState } from 'react';
import { ChevronDown, ChevronUp, ArrowLeft } from 'lucide-react';

const MainFAQPage: React.FC<{ onBack: () => void }> = ({ onBack }) => {
    const [openIndex, setOpenIndex] = useState<number | null>(0);

    const faqs = [
        {
            question: "কিভাবে আমার স্টোর তৈরি করব?",
            answer: "ShophyFast এ স্টোর তৈরি করা খুব সহজ। সাইন আপ করার পর 'Create Store' এ ক্লিক করুন এবং আপনার স্টোরের নাম ও বিস্তারিত তথ্য দিন। কয়েক মিনিটের মধ্যেই আপনার স্টোর তৈরি হয়ে যাবে।"
        },
        {
            question: "আমি কি নিজের ডোমেইন ব্যবহার করতে পারব?",
            answer: "হ্যাঁ, আপনি আপনার নিজস্ব কাস্টম ডোমেইন (যেমন: yourdomain.com) আপনার ShophyFast স্টোরের সাথে যুক্ত করতে পারবেন।"
        },
        {
            question: "পেমেন্ট সিস্টেম কিভাবে কাজ করে?",
            answer: "আমাদের প্ল্যাটফর্মে বিকাশ, নগদ, রকেট সহ বিভিন্ন পেমেন্ট গেটওয়ে ইন্টিগ্রেট করা আছে। আপনি খুব সহজেই আপনার স্টোরের সাথে এগুলো যুক্ত করে পেমেন্ট গ্রহণ করতে পারবেন।"
        },
        {
            question: "AI Messenger Bot কিভাবে কাজ করে?",
            answer: "আমাদের AI Messenger Bot আপনার ফেসবুক পেজের মেসেঞ্জারে গ্রাহকদের স্বয়ংক্রিয়ভাবে রিপ্লাই দিতে পারে। এটি আপনার প্রোডাক্ট সম্পর্কে তথ্য দেওয়া এবং অর্ডার নেওয়ার কাজ সহজ করে দেয়।"
        },
        {
            question: "কেন ShophyFast বেছে নেবেন?",
            answer: "ShophyFast একটি সম্পূর্ণ ই-কমার্স সমাধান যা আপনার অনলাইন ব্যবসা পরিচালনা করা অত্যন্ত সহজ করে তোলে। আমাদের রয়েছে ইউজার ফ্রেন্ডলি ড্যাশবোর্ড, কাস্টমাইজেবল থিম, ইনভেন্টরি ম্যানেজমেন্ট এবং সার্বক্ষণিক সাপোর্ট।"
        }
    ];

    return (
        <div className="min-h-screen bg-slate-50 dark:bg-slate-900 pt-10 pb-20">
            <div className="max-w-3xl mx-auto px-4">
                <button
                    onClick={onBack}
                    className="flex items-center gap-2 text-slate-600 hover:text-indigo-600 font-medium mb-8 transition-colors"
                >
                    <ArrowLeft size={20} />
                    ফিরে যান
                </button>

                <div className="text-center mb-12">
                    <h1 className="text-3xl md:text-4xl font-bold text-slate-900 dark:text-white mb-4">
                        সাধারণ জিজ্ঞাসা
                    </h1>
                    <p className="text-slate-600 dark:text-slate-400">
                        শুরু করার জন্য আপনার যা জানা দরকার
                    </p>
                </div>

                <div className="space-y-4">
                    {faqs.map((faq, index) => (
                        <div
                            key={index}
                            className="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-700 overflow-hidden"
                        >
                            <button
                                className="w-full px-6 py-5 text-left flex justify-between items-center focus:outline-none"
                                onClick={() => setOpenIndex(openIndex === index ? null : index)}
                            >
                                <span className="font-semibold text-slate-900 dark:text-white text-lg">
                                    {faq.question}
                                </span>
                                {openIndex === index ? (
                                    <ChevronUp className="text-indigo-600 flex-shrink-0" />
                                ) : (
                                    <ChevronDown className="text-slate-400 flex-shrink-0" />
                                )}
                            </button>

                            {openIndex === index && (
                                <div className="px-6 pb-5 text-slate-600 dark:text-slate-300 leading-relaxed">
                                    {faq.answer}
                                </div>
                            )}
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
};

export default MainFAQPage;