'use client'

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
import { Container } from '@/components/container'
import Link from 'next/link'
import { layout } from '@/lib/layout'
import { type, typeMeasure } from '@/lib/typography'
import { cn } from '@/lib/utils'

export default function FAQsFour() {
    const faqItems = [
        {
            id: 'item-1',
            question: 'طراحی سایت چقدر زمان می‌برد؟',
            answer:
                'بسته به پیچیدگی پروژه، معمولاً بین ۲ تا ۶ هفته. پس از جلسه مشاوره اولیه، زمان‌بندی دقیق و مراحل کار را شفاف اعلام می‌کنیم.',
        },
        {
            id: 'item-2',
            question: 'هزینه طراحی سایت و سئو چگونه محاسبه می‌شود؟',
            answer:
                'هزینه بر اساس دامنه پروژه، تعداد صفحات، امکانات اختصاصی و سطح سئو تعیین می‌شود. مشاوره اولیه رایگان است و پیشنهاد قیمت شفاف ارائه می‌دهیم.',
        },
        {
            id: 'item-3',
            question: 'آیا بعد از تحویل سایت پشتیبانی دارید؟',
            answer:
                'بله. بسته‌های پشتیبانی ماهانه شامل به‌روزرسانی، رفع باگ، پشتیبان‌گیری و بهبودهای جزئی است تا سایت همیشه پایدار بماند.',
        },
        {
            id: 'item-4',
            question: 'سئو از چه زمانی نتیجه می‌دهد؟',
            answer:
                'معمولاً پس از ۲ تا ۴ ماه اولین نشانه‌های بهبود دیده می‌شود. نتیجه پایدار به کیفیت محتوا، رقابت کلمات کلیدی و استمرار بهینه‌سازی بستگی دارد.',
        },
        {
            id: 'item-5',
            question: 'آیا سایت برای موبایل و سرعت بهینه می‌شود؟',
            answer:
                'بله. تمام پروژه‌ها واکنش‌گرا طراحی می‌شوند و روی سرعت بارگذاری، تجربه کاربری و استانداردهای فنی گوگل تمرکز داریم.',
        },
    ]

    return (
        <section className={cn("section-shell bg-section-canvas", layout.sectionY)}>
            <Container>
                <div className={cn("mx-auto text-start", typeMeasure.narrow)}>
                    <h2 className={type.h2}>سؤالات متداول</h2>
                    <p className={cn(type["section-intro"], "mt-4")}>
                        پاسخ‌های کوتاه به پرسش‌های رایج درباره طراحی سایت، سئو و پشتیبانی در امین رایان.
                    </p>
                </div>

                <div className={cn("mx-auto mt-12", typeMeasure.narrow)}>
                    <Accordion
                        type="single"
                        collapsible
                        className="bg-muted dark:bg-muted/50 w-full rounded-2xl p-1">
                        {faqItems.map((item) => (
                            <div
                                className="group"
                                key={item.id}>
                                <AccordionItem
                                    value={item.id}
                                    className="data-[state=open]:bg-card dark:data-[state=open]:bg-muted peer rounded-xl border-none px-7 py-1 data-[state=open]:border-none data-[state=open]:shadow-sm">
                                    <AccordionTrigger className={cn(type["list-title"], "cursor-pointer hover:no-underline")}>{item.question}</AccordionTrigger>
                                    <AccordionContent>
                                        <p className={type.body}>{item.answer}</p>
                                    </AccordionContent>
                                </AccordionItem>
                                <hr className="mx-7 border-dashed group-last:hidden peer-data-[state=open]:opacity-0" />
                            </div>
                        ))}
                    </Accordion>

                    <p className={cn(type.body, "text-muted-foreground mt-6 px-8")}>
                        پاسخ سؤال‌تان را پیدا نکردید؟ با{' '}
                        <Link
                            href="#contact"
                            className="font-medium text-primary hover:underline">
                            تیم مشاوره
                        </Link>
                        {' '}تماس بگیرید.
                    </p>
                </div>
            </Container>
        </section>
    )
}