خدمات در بنتوی تیره

"use client"

import { BarChartIcon, CheckCircleIcon, DashboardIcon, GridIcon, SparklesIcon, TableIcon } from "@/components/icons"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { Reveal } from "@/components/ui/reveal"
import { cn } from "@/lib/utils"

const SERVICES = [
  { title: "طراحیِ رابط", text: "رابط‌هایی که سریع خوانده می‌شوند و راحت پیمایش می‌شوند؛ از اولین اسکیس تا نسخهٔ نهایی.", icon: <GridIcon />, area: "lg:col-span-2 lg:row-span-2" },
  { title: "توسعهٔ وب", text: "تبدیلِ طرح به سایتی سریع، دسترس‌پذیر و آسان برای به‌روزرسانی.", icon: <DashboardIcon />, area: "lg:col-span-4" },
  { title: "کتابخانهٔ کامپوننت", text: "قطعه‌های قابلِ استفادهٔ دوباره که تیم با آن یک‌دست می‌سازد.", icon: <TableIcon />, area: "lg:col-span-2" },
  { title: "هویتِ برند", text: "رنگ، حروف و لحن که همه‌جا یک صدا دارند.", icon: <SparklesIcon />, area: "lg:col-span-2" },
  { title: "استراتژیِ محصول", text: "اینکه چه بسازیم، به چه ترتیب، و چرا؛ پیش از نوشتنِ اولین خطِ کد.", icon: <BarChartIcon />, area: "lg:col-span-2" },
  { title: "آزمون و تحویل", text: "آزمونِ کاربردپذیری و مستنداتِ دقیق برای تیمِ مهندسی.", icon: <CheckCircleIcon />, area: "lg:col-span-2" },
]

/**
 * خدمات در بنتوی تیره: قابِ بزرگِ گرد با درخششِ نقره‌ای پشتش، تیترِ وسط‌چین با کلمه‌های
 * پررنگ در توضیح، و شش کاشیِ هم‌خانواده با اندازه‌های متفاوت؛ هر کاشی نمادِ براقِ بزرگ در
 * گوشه، تیتر و یک جمله دارد. همیشه تیره است.
 */
export default function ServicesBentoBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <section aria-labelledby="sb-title" className="w-full bg-[radial-gradient(ellipse_at_top,var(--dig-neutral-400),var(--dig-graphite-950)_55%)] px-4 py-16 sm:px-6 sm:py-24">
        <div className="mx-auto flex w-full max-w-6xl flex-col gap-10 rounded-xl border border-[var(--dig-graphite-800)] bg-[var(--dig-graphite-950)] p-4 text-[var(--dig-white)] shadow-2xl sm:p-8">
          <div className="mx-auto flex max-w-xl flex-col items-center gap-3 pt-6 text-center">
            <h2 id="sb-title" className="bg-[linear-gradient(180deg,var(--dig-white),var(--dig-neutral-400))] bg-clip-text text-3xl font-black text-transparent sm:text-5xl">
              چطور کمکتان می‌کنم
            </h2>
            <p className="leading-7 text-[var(--dig-neutral-400)]">
              طراحی‌ای که <strong className="text-[var(--dig-white)]">کسب‌وکار</strong> را جلو می‌برد، برای{" "}
              <strong className="text-[var(--dig-white)]">آدم‌هایی که از آن استفاده می‌کنند</strong>، و{" "}
              <strong className="text-[var(--dig-white)]">چیزی که بشود سنجید</strong>.
            </p>
          </div>
          <ul className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:auto-rows-[minmax(11rem,auto)] lg:grid-cols-8">
            {SERVICES.map((service, index) => (
              <Reveal asChild key={service.title} delay={(index % 3) * 80}>
                <li
                  className={cn(
                    "group relative flex min-h-44 flex-col gap-2 overflow-hidden rounded-xl border border-[var(--dig-graphite-700)] bg-[linear-gradient(160deg,var(--dig-graphite-800),var(--dig-graphite-900)_70%)] p-5 transition-colors hover:border-[var(--dig-graphite-500)]",
                    service.area
                  )}
                >
                  <span
                    aria-hidden
                    className="mb-auto flex size-16 items-center justify-center self-end rounded-2xl bg-[linear-gradient(135deg,var(--dig-neutral-200),var(--dig-neutral-600)_50%,var(--dig-neutral-300))] text-[var(--dig-graphite-900)] shadow-[0_20px_40px_-12px_var(--dig-graphite-950)] transition-transform duration-500 group-hover:-rotate-6 group-hover:scale-110 [&>svg]:size-8"
                  >
                    {service.icon}
                  </span>
                  <h3 className="mt-6 text-lg font-bold">{service.title}</h3>
                  <p className="max-w-sm text-sm leading-6 text-[var(--dig-neutral-400)]">{service.text}</p>
                </li>
              </Reveal>
            ))}
          </ul>
        </div>
      </section>
    </ControlSizeProvider>
  )
}