ویژگی‌ها، گریدِ تیره

"use client"

import { ControlSizeProvider } from "@/components/ui/control-size"
import { Reveal } from "@/components/ui/reveal"
import { cn } from "@/lib/utils"

const CHROME = "bg-[linear-gradient(135deg,var(--dig-neutral-100),var(--dig-neutral-500)_45%,var(--dig-neutral-200)_55%,var(--dig-neutral-700))]"

const FEATURES = [
  {
    title: "به شکلِ کارِ شما",
    text: "فرم‌ها، مرحله‌ها و برچسب‌ها را خودتان می‌چینید؛ لازم نیست کارتان را به شکلِ ابزار دربیاورید.",
    art: (
      <div className="relative size-28 [perspective:600px]">
        <span className={cn("absolute inset-0 rounded-xl [transform:rotateX(55deg)_rotateZ(-35deg)] shadow-[0_30px_40px_-10px_var(--dig-graphite-950)]", CHROME)} />
        <span className={cn("absolute inset-0 translate-y-[-14px] rounded-xl [transform:rotateX(55deg)_rotateZ(-35deg)]", CHROME)} />
      </div>
    ),
  },
  {
    title: "آرام، به‌طورِ پیش‌فرض",
    text: "هر اعلان یک دلیل دارد. بقیه در گزارشِ آخرِ روز جمع می‌شوند.",
    art: (
      <div className="relative flex size-32 items-center justify-center">
        <span className="absolute size-32 rounded-full bg-[radial-gradient(circle,var(--dig-neutral-200),transparent_60%)] blur-md" />
        <span className="size-3 rounded-full bg-[var(--dig-white)] shadow-[0_0_30px_10px_var(--dig-neutral-300)]" />
        <span className="absolute h-px w-40 bg-[linear-gradient(90deg,transparent,var(--dig-neutral-300),transparent)]" />
        <span className="absolute h-40 w-px bg-[linear-gradient(180deg,transparent,var(--dig-neutral-300),transparent)]" />
      </div>
    ),
  },
  {
    title: "پیشرفت، بدونِ جلسهٔ پیگیری",
    text: "وضعیتِ هر کار از روی خودِ کار خوانده می‌شود، نه از پیامِ «به کجا رسید؟».",
    art: (
      <div className="flex -skew-x-12 gap-2">
        {[10, 16, 22].map((height, index) => (
          <span key={height} className={cn("w-6 rounded-md", CHROME)} style={{ height: `${height * 4}px`, marginTop: `${(2 - index) * 12}px` }} />
        ))}
      </div>
    ),
  },
  {
    title: "تشریفات کمتر، تحویلِ بیشتر",
    text: "بدونِ جلسهٔ روزانه، بدونِ بلیتِ اضافه. کار را بسازید، بقیه را بسپارید.",
    wide: true,
    art: (
      <div className="relative h-24 w-56">
        <span className={cn("absolute inset-x-0 bottom-0 h-10 rounded-[50%] [transform:rotateX(60deg)]", CHROME)} />
        <span className="absolute inset-x-6 bottom-8 h-px bg-[linear-gradient(90deg,transparent,var(--dig-white),transparent)]" />
        <span className={cn("absolute start-1/2 bottom-6 h-16 w-3 -translate-x-1/2 rounded-full rtl:translate-x-1/2", CHROME)} />
      </div>
    ),
  },
  {
    title: "چیزی در حالتِ انتظار نمی‌ماند",
    text: "هر کارِ معوق خودش بالا می‌آید و به آدمِ درست می‌رسد، پیش از آنکه دیر شود.",
    wide: true,
    art: (
      <div className="relative flex size-32 items-center justify-center">
        {[32, 24, 16].map((size) => (
          <span key={size} className="absolute rounded-full border border-[var(--dig-neutral-600)]" style={{ width: `${size * 4}px`, height: `${size * 4}px` }} />
        ))}
        <span className={cn("size-12 rounded-full shadow-[0_10px_30px_var(--dig-graphite-950)]", CHROME)} />
        {Array.from({ length: 8 }, (_, index) => (
          <span key={index} className="absolute h-1 w-1 rounded-full bg-[var(--dig-neutral-300)]" style={{ transform: `rotate(${index * 45}deg) translateX(64px)` }} />
        ))}
      </div>
    ),
  },
]

/**
 * ویژگی‌ها روی سطحِ تیره با اشیای کرومیِ انتزاعی: تیترِ دوبخشی (بخشِ دوم کم‌رنگ‌تر)،
 * سه کارت در ردیفِ اول و دو کارتِ پهن در ردیفِ دوم؛ هر کارت یک شیءِ براقِ ساخته‌شده با
 * گرادیان و یک تیتر و یک جمله دارد. همیشه تیره است، در هر حالتِ تم.
 */
export default function FeaturesDarkGridBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <section aria-labelledby="fdg-title" className="w-full bg-[var(--dig-graphite-950)] py-24 text-[var(--dig-white)]">
        <div className="mx-auto flex w-full max-w-6xl flex-col gap-12 px-4 sm:px-6">
          <div className="flex max-w-2xl flex-col gap-4">
            <span className="flex items-center gap-2 text-sm text-[var(--dig-neutral-400)]">
              <span aria-hidden className="size-1.5 rounded-full bg-[var(--dig-neutral-300)]" />
              ویژگی‌ها
            </span>
            <h2 id="fdg-title" className="text-3xl leading-snug font-black text-balance sm:text-5xl sm:leading-tight">
              هر جزء جای خودش را به دست آورده
              <span className="block text-[var(--dig-neutral-500)]">هیچ چیزِ اضافه‌ای نیست.</span>
            </h2>
            <p className="leading-7 text-[var(--dig-neutral-400)]">ابزارِ کمتر، توقفِ کمتر، و هرچه برای پیش‌رفتنِ کار لازم است.</p>
          </div>
          <ul className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-6">
            {FEATURES.map((feature, index) => (
              <Reveal asChild key={feature.title} delay={(index % 3) * 100}>
                <li
                  className={cn(
                    "group flex flex-col gap-6 overflow-hidden rounded-xl border border-[var(--dig-graphite-800)] bg-[linear-gradient(180deg,var(--dig-graphite-900),var(--dig-graphite-950))] p-6 transition-colors hover:border-[var(--dig-graphite-700)]",
                    feature.wide ? "lg:col-span-3" : "lg:col-span-2"
                  )}
                >
                  <div aria-hidden className="flex h-44 items-center justify-center transition-transform duration-700 group-hover:scale-105">
                    {feature.art}
                  </div>
                  <div className="flex flex-col gap-2">
                    <h3 className="font-bold">{feature.title}</h3>
                    <p className="text-sm leading-6 text-[var(--dig-neutral-400)]">{feature.text}</p>
                  </div>
                </li>
              </Reveal>
            ))}
          </ul>
        </div>
      </section>
    </ControlSizeProvider>
  )
}