"use client"

import { NextPage } from 'next'
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
import Layout from '@/hoc/Layout'

const FaqPage: NextPage = () => {
    const faqData = [
        {
            question: "ثبت نام به عنوان فروشنده در دیجی کالا به چه معناست؟",
            answer: "با تکمیل ثبت نام پنل آنلاین فروشگاهی از دیجی کالا دریافت میکنید که میتوانید کالاهای خود را به صورت آنلاین به تمام نقاط ایران به فروش برسانید کار با این پنل بسیار ساده است و اصلا نیاز به تخصص خاصی ندارد."
        },
        {
            question: "در مراحل ثبت نام خطای تکراری بودن شماره ملی را دریافت میکنم",
            answer: "این خطا معمولاً زمانی رخ می‌دهد که شماره ملی قبلاً در سیستم ثبت شده است. در صورت اطمینان از صحت اطلاعات، با پشتیبانی تماس بگیرید."
        },
        {
            question: "برای ثبت نام در سندس کالا به چه مدارکی نیاز است؟",
            answer: "برای ثبت نام در سندس کالا نیاز به مدارک شناسایی، مجوزهای کسب و کار و اطلاعات بانکی معتبر دارید."
        },
        {
            question: "نام تجاری به چه معناست ؟",
            answer: "نام تجاری نامی است که کسب و کار شما با آن شناخته می‌شود و می‌تواند متفاوت از نام قانونی شرکت باشد."
        },
        {
            question: "در مراحل ثبت نام پس از وارد کردن شماره شبا خطا دریافت میکنم",
            answer: "اطمینان حاصل کنید که شماره شبا به درستی وارد شده و متعلق به حساب بانکی معتبر است."
        },
        {
            question: "در مورد بندهای قرارداد سوال دارم",
            answer: "برای دریافت اطلاعات دقیق در مورد بندهای قرارداد، لطفاً با بخش حقوقی یا پشتیبانی تماس بگیرید."
        }
    ]

    return (
        <Layout>
            <div className="min-h-screen bg-white py-12 px-20">
                <div className="">
                    {/* Header Section */}
                    <div className=" mb-12">
                        <h1 className="text-xl font-bold text-gray-800 mb-2">
                            سوالات متداول
                        </h1>
                        <p className="text-gray-600 text-base leading-relaxed mx-auto">
                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است
                        </p>
                    </div>

                    {/* FAQ Section */}
                    <div className="space-y-4 max-w-4xl mx-auto">
                        <Accordion type="single" collapsible className="w-full">
                            {faqData.map((item, index) => (
                                <AccordionItem
                                    key={index}
                                    value={`item-${index}`}
                                    className="bg-gray-50 mt-4 rounded-lg border-0"
                                >
                                    <AccordionTrigger className="px-6 py-5 text-right hover:no-underline">
                                        <span className="text-[#333333] font-light text-base">
                                            {item.question}
                                        </span>
                                    </AccordionTrigger>
                                    <AccordionContent className="px-6 pb-5">
                                        <p className="text-[#5D5D5D] font-light leading-relaxed text-sm">
                                            {item.answer}
                                        </p>
                                    </AccordionContent>
                                </AccordionItem>
                            ))}
                        </Accordion>
                    </div>
                </div>
            </div>
        </Layout>
    )
}

export default FaqPage