فهرستِ خدمات

"use client"

import { ArrowUpIcon, BoltIcon, FlashIcon, SunIcon, ShieldCheckIcon } from "@/components/icons"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { Reveal } from "@/components/ui/reveal"
import { stockImages } from "@/lib/stock-images"

const SERVICES = [
  { title: "ذخیره‌سازِ انرژی", text: "باتری‌هایی که برقِ روز را برای شب و قطعی‌ها نگه می‌دارند.", icon: <BoltIcon /> },
  { title: "سامانهٔ تجاری", text: "نیروگاهِ پشت‌بامی برای کارگاه، فروشگاه و ساختمانِ اداری.", icon: <FlashIcon /> },
  { title: "نصبِ پنلِ خورشیدی", text: "طراحی و نصبِ سفارشی، با بیشترین بهره از نورِ بام.", icon: <SunIcon /> },
  { title: "ارتقای سامانهٔ خانگی", text: "افزودنِ پنل یا باتری به سامانهٔ فعلی، بدونِ تعویضِ همه‌چیز.", icon: <ShieldCheckIcon /> },
]

/**
 * خدمات در دو ستون: سمتی تیتر و دکمهٔ «همهٔ خدمات» با دو عکسِ کنارِ هم، سمتِ دیگر فهرستِ
 * خدمات با آیکون، تیتر، یک جمله و پیکانِ پیوند که با هاور پر می‌شود.
 */
export default function ServicesListBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <section aria-labelledby="sl-title" className="mx-auto grid w-full max-w-6xl grid-cols-1 gap-12 px-4 py-24 sm:px-6 lg:grid-cols-2">
        <div className="flex flex-col items-start gap-6">
          <span className="rounded-full border border-border px-3 py-1 text-sm font-semibold">خدمات</span>
          <h2 id="sl-title" className="text-3xl leading-snug font-black text-balance sm:text-4xl">
            انرژیِ پاک برای آیندهٔ سبزتر
          </h2>
          <Button>همهٔ خدمات</Button>
          <div className="mt-4 grid w-full grid-cols-2 gap-3">
            {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
            <img src={stockImages.studioSunlit.src} alt={stockImages.studioSunlit.alt} className="aspect-[4/3] w-full rounded-xl object-cover" />
            {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
            <img src={stockImages.coverMinimalRoom.src} alt={stockImages.coverMinimalRoom.alt} className="aspect-[4/3] w-full rounded-xl object-cover" />
          </div>
        </div>
        <ul className="flex flex-col divide-y divide-border">
          {SERVICES.map((service, index) => (
            <Reveal asChild key={service.title} delay={index * 80}>
              <li>
                <a href="#" className="group flex items-start gap-4 py-6 outline-none first:pt-0 focus-visible:bg-muted">
                  <span aria-hidden className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-[var(--dig-blue-100)] text-[var(--dig-blue-700)] dark:bg-[var(--dig-blue-950)] dark:text-[var(--dig-blue-300)] [&>svg]:size-5">
                    {service.icon}
                  </span>
                  <span className="flex flex-1 flex-col gap-1">
                    <span className="text-lg font-bold">{service.title}</span>
                    <span className="leading-7 text-muted-foreground">{service.text}</span>
                  </span>
                  <span aria-hidden className="flex size-10 shrink-0 items-center justify-center rounded-full border border-border transition-colors group-hover:border-foreground group-hover:bg-foreground group-hover:text-background">
                    <ArrowUpIcon className="size-4 -rotate-45" />
                  </span>
                </a>
              </li>
            </Reveal>
          ))}
        </ul>
      </section>
    </ControlSizeProvider>
  )
}