ویژگی‌ها با زبانه

"use client"

import * as React from "react"

import { CheckIcon } from "@/components/icons"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
import { stockImages, type StockImageName } from "@/lib/stock-images"

const TABS: { value: string; label: string; title: string; text: string; points: string[]; image: StockImageName }[] = [
  { value: "invoice", label: "فاکتور", title: "فاکتورِ رسمی در یک دقیقه", text: "قالبِ آماده با لوگوی تو، شمارهٔ خودکار و مالیاتِ حساب‌شده.", points: ["ارسالِ پیامکی با لینکِ پرداخت", "یادآورِ فاکتورهای معوق"], image: "coverCalculator" },
  { value: "reports", label: "گزارش", title: "سود و زیان، هر روز", text: "نمودارها خودشان به‌روز می‌شوند؛ این ماه را با ماهِ قبل مقایسه کن.", points: ["دسته‌بندی خودکارِ هزینه‌ها", "خروجی PDF برای حسابدار"], image: "coverFinanceDesk" },
  { value: "team", label: "تیم", title: "همه روی یک دفتر", text: "حسابدار، مدیر و فروشنده هر کدام دسترسی خودشان را دارند.", points: ["نقش‌ها و مجوزهای جدا", "تاریخچهٔ هر تغییر"], image: "coverWorkspace" },
]

/**
 * ویژگی‌ها با زبانه: یک سگمنت بالای بخش، و با انتخابِ هر زبانه متن، نکته‌ها و عکسِ همان
 * قابلیت عوض می‌شود. برای وقتی که سه یا چهار قابلیتِ اصلی هر کدام توضیحِ بیشتری می‌خواهند.
 */
export default function FeaturesTabsBlock() {
  const [tab, setTab] = React.useState(TABS[0].value)
  const active = TABS.find((item) => item.value === tab) ?? TABS[0]

  return (
    <ControlSizeProvider size="xl" asChild>
      <section aria-labelledby="ft-title" className="mx-auto flex w-full max-w-6xl flex-col items-center gap-12 px-4 py-24 sm:px-6">
        <div className="flex max-w-2xl flex-col items-center gap-3 text-center">
          <span className="text-sm font-semibold text-brand-secondary">امکانات</span>
          <h2 id="ft-title" className="text-3xl leading-snug font-black text-balance sm:text-4xl">
            یک ابزار، سه کارِ اصلی
          </h2>
        </div>
        <div className="max-w-full overflow-x-auto">
          <ToggleGroup type="single" variant="segmented" value={tab} onValueChange={(value) => value && setTab(value as string)} aria-label="قابلیت">
            {TABS.map((item) => (
              <ToggleGroupItem key={item.value} value={item.value} className="px-6">
                {item.label}
              </ToggleGroupItem>
            ))}
          </ToggleGroup>
        </div>
        <div aria-live="polite" className="grid w-full grid-cols-1 items-center gap-10 rounded-xl bg-subtle p-6 sm:p-10 lg:grid-cols-2">
          <div className="flex flex-col items-start gap-5">
            <h3 className="text-2xl font-bold">{active.title}</h3>
            <p className="text-lg leading-8 text-muted-foreground">{active.text}</p>
            <ul className="flex flex-col gap-3">
              {active.points.map((point) => (
                <li key={point} className="flex items-center gap-3">
                  <span aria-hidden className="flex size-6 items-center justify-center rounded-full bg-success-subtle text-success [&>svg]:size-3.5">
                    <CheckIcon />
                  </span>
                  {point}
                </li>
              ))}
            </ul>
          </div>
          {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
          <img key={active.image} src={stockImages[active.image].src} alt={stockImages[active.image].alt} className="aspect-[4/3] w-full rounded-xl object-cover" />
        </div>
      </section>
    </ControlSizeProvider>
  )
}