"use client";

import { ArrowUpRight } from "lucide-react";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { cn } from "@/lib/utils";

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

interface ProfileInfo {
  name: string;
  title: string;
  image: string;
}

interface Faq17Props {
  heading?: string;
  profileInfo?: ProfileInfo;
  contactSection?: {
    title: string;
    description: string;
    linkText: string;
    className?: string;
  };
  items?: FaqItem[];
  showBottomButtons?: boolean;
  className?: string;
}

const Faq17 = ({
  heading = "پرسش‌های راه‌اندازی سامانه مدیریت ارتباط با مشتری",
  profileInfo = {
    name: "سارا احمدی",
    title: "مدیر موفقیت مشتری",
    image:
      "/block-media/shadcnblocks/block/avatar-3.webp",
  },
  contactSection = {
    title: "برای شروع پیاده‌سازی آماده‌اید؟",
    description:
      "اگر مسیر پیاده‌سازی یا انتقال داده مبهم است، جلسه کشف نیاز را رزرو کنید تا محدوده پروژه شفاف شود.",
    linkText: "رزرو جلسه کشف نیاز",
  },
  items = [
    {
      question: "چه چیزی در بسته پیاده‌سازی سامانه مدیریت ارتباط با مشتری هست؟",
      answer:
        "طراحی قیف، نگاشت فیلد، اتوماسیون پیگیری، آموزش تیم فروش و داشبورد مدیریت—همه متناسب با فرایند شما.",
    },
    {
      question: "همکاری از کجا شروع می‌شود؟",
      answer:
        "درخواست را ثبت کنید؛ پس از جلسه کشف نیاز، برنامه فازبندی و مالکیت تحویل با شما هماهنگ می‌شود.",
    },
    {
      question: "هزینه چطور محاسبه می‌شود؟",
      answer:
        "بر اساس تعداد کاربر، پیچیدگی یکپارچه‌سازی و سطح آموزش؛ پیشنهاد شفاف قبل از شروع کار ارسال می‌شود.",
    },
    {
      question: "بعد از تحویل هم همراهتان هستید؟",
      answer:
        "بله. پشتیبانی دوره تثبیت، بهینه‌سازی اتوماسیون و بازبینی قیف در پلن نگهداری گنجانده می‌شود.",
    },
    {
      question: "تفاوت شما با راه‌اندازی داخلی چیست؟",
      answer:
        "الگوهای اثبات‌شده فروش B2B، کاهش ریسک پیکربندی اشتباه و رسیدن سریع‌تر به گزارش‌های قابل اتکا برای مدیریت.",
    },
  ],
  className,
}: Faq17Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container mx-auto max-w-5xl">
        <div className="grid grid-cols-1 gap-8 lg:grid-cols-5 lg:gap-12 xl:grid-cols-12 xl:gap-16">
          <div className="flex flex-col justify-between text-start lg:col-span-2 xl:col-span-4">
            <div>
              <div className="mb-8 flex items-start gap-3 sm:gap-4 lg:mb-12">
                <div className="h-12 w-12 shrink-0 overflow-hidden rounded-xl sm:h-16 sm:w-16">
                  <img
                    src={profileInfo.image}
                    alt={profileInfo.name}
                    className="h-full w-full object-cover"
                  />
                </div>
                <div className="min-w-0">
                  <h2 className="mb-1 text-lg leading-tight font-semibold sm:text-xl">
                    {profileInfo.name}
                  </h2>
                  <p className="text-sm sm:text-base">{profileInfo.title}</p>
                </div>
              </div>

              <div className="space-y-4 lg:space-y-6">
                <h3 className="text-lg leading-tight font-semibold sm:text-xl">
                  {contactSection.title}
                </h3>
                <p className="text-sm leading-relaxed text-muted-foreground sm:text-base">
                  {contactSection.description}
                </p>
              </div>
            </div>
            <div className="py-4">
              <div className="group flex h-auto p-0 text-start text-base font-medium hover:bg-transparent sm:text-xl">
                <span className="border-b-2 border-border pb-0.5 transition-colors">
                  {contactSection.linkText}
                </span>
                <ArrowUpRight className="ms-1 h-6 w-5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 rtl:rotate-180" />
              </div>
            </div>
          </div>

          <div className="lg:col-span-3 xl:col-span-8">
            <div className="mb-8 text-center lg:mb-16 lg:text-start">
              <h1 className="text-xl leading-none font-medium tracking-tight sm:text-2xll">
                {heading}
              </h1>
            </div>
            <div className="max-w-none">
              <Accordion
                type="single"
                collapsible
                defaultValue="item-0"
                className="space-y-0 text-start"
              >
                {items.map((item, index) => (
                  <AccordionItem
                    key={index}
                    value={`item-${index}`}
                    className={cn(
                      "border-0",
                      index !== items.length - 1 && "border-b border-border",
                    )}
                  >
                    <AccordionTrigger className="justify-between py-6 text-start text-lg font-semibold hover:no-underline sm:text-xl lg:py-8 lg:text-xl">
                      <span className="ps-4">{item.question}</span>
                    </AccordionTrigger>
                    <AccordionContent className="pt-0 pb-6 ps-8 text-sm leading-relaxed text-muted-foreground sm:text-base lg:pb-8">
                      {item.answer}
                    </AccordionContent>
                  </AccordionItem>
                ))}
              </Accordion>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Faq17 };