لندینگِ کسب‌وکارِ خدماتی

"use client"

import { CalendarIcon, ClockIcon, GlobeIcon, PhoneIcon, StarIcon } from "@/components/icons"
import { Avatar } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { Reveal } from "@/components/ui/reveal"
import { formatCurrency, toFaDigits } from "@/lib/persian"
import { stockImages, type StockImageName } from "@/lib/stock-images"

const SERVICES = [
  { title: "معاینهٔ عمومی", time: 30, price: 450_000 },
  { title: "جرم‌گیری و بروساژ", time: 45, price: 1_200_000 },
  { title: "ترمیمِ دندان", time: 60, price: 1_800_000 },
  { title: "سفیدکردن", time: 90, price: 3_500_000 },
]
const TEAM: { name: string; role: string; photo: StockImageName }[] = [
  { name: "دکتر نگار احمدی", role: "دندان‌پزشکِ عمومی", photo: "personWoman3" },
  { name: "دکتر علی کاظمی", role: "متخصصِ ترمیمی", photo: "personMan2" },
]

/**
 * لندینگِ کسب‌وکارِ خدماتی محلی (کلینیک، سالن، آموزشگاه): هیرو با عکسِ واقعی فضا و رزروِ
 * نوبت، خدمات با زمان و قیمت، تیم با عکس، امتیاز و نشانی با ساعتِ کار.
 */
export default function LandingServiceBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <main className="flex w-full flex-col">
        <section className="mx-auto grid w-full max-w-6xl grid-cols-1 items-center gap-12 px-4 py-16 sm:px-6 lg:grid-cols-2 lg:py-24">
          <div className="flex flex-col items-start gap-6">
            <span className="flex items-center gap-2 text-sm">
              <StarIcon aria-hidden className="size-4 fill-[var(--dig-orange-400)] text-[var(--dig-orange-400)]" />
              ۴٫۹ از ۸۴۰ نظر
            </span>
            <h1 className="text-4xl leading-snug font-black text-balance sm:text-5xl sm:leading-snug">لبخندت را به آدم‌های مطمئن بسپار</h1>
            <p className="max-w-lg text-lg leading-8 text-muted-foreground">کلینیکِ دندان‌پزشکی مهر، از ۱۳۹۰ در ونک؛ نوبتِ آنلاین، بدونِ انتظار.</p>
            <div className="mt-2 flex flex-wrap gap-3">
              <Button>
                <CalendarIcon />
                رزروِ نوبت
              </Button>
              <Button variant="outline" asChild>
                <a href="tel:02188001234">
                  <PhoneIcon />
                  <bdi dir="ltr">{toFaDigits("021-88001234")}</bdi>
                </a>
              </Button>
            </div>
          </div>
          {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
          <img src={stockImages.clinicRoom.src} alt={stockImages.clinicRoom.alt} className="aspect-[4/3] w-full rounded-xl object-cover" />
        </section>

        <section aria-labelledby="ls-services" className="bg-subtle py-20">
          <div className="mx-auto flex w-full max-w-6xl flex-col gap-10 px-4 sm:px-6">
            <h2 id="ls-services" className="text-3xl font-black">
              خدمات
            </h2>
            <ul className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              {SERVICES.map((service, index) => (
                <Reveal asChild key={service.title} delay={index * 80}>
                  <li className="flex items-center justify-between gap-4 rounded-xl bg-card p-5">
                    <span className="flex flex-col gap-1">
                      <span className="font-bold">{service.title}</span>
                      <span className="flex items-center gap-1.5 text-sm text-muted-foreground">
                        <ClockIcon aria-hidden className="size-4" />
                        {toFaDigits(service.time)} دقیقه
                      </span>
                    </span>
                    <span className="font-bold tabular-nums">{formatCurrency(service.price)}</span>
                  </li>
                </Reveal>
              ))}
            </ul>
          </div>
        </section>

        <section aria-labelledby="ls-team" className="mx-auto grid w-full max-w-6xl grid-cols-1 gap-12 px-4 py-20 sm:px-6 lg:grid-cols-2">
          <div className="flex flex-col gap-8">
            <h2 id="ls-team" className="text-3xl font-black">
              پزشکان
            </h2>
            <ul className="flex flex-col gap-4">
              {TEAM.map((person) => (
                <li key={person.name} className="flex items-center gap-4">
                  <Avatar size="lg" alt="" src={stockImages[person.photo].src} className="size-16" />
                  <span className="flex flex-col">
                    <span className="font-bold">{person.name}</span>
                    <span className="text-sm text-muted-foreground">{person.role}</span>
                  </span>
                </li>
              ))}
            </ul>
          </div>
          <div className="flex flex-col gap-5 rounded-xl bg-inverse p-6 text-[var(--dig-white)] [--muted-foreground:var(--dig-neutral-400)] [--primary-foreground:var(--dig-graphite-950)] [--primary:var(--dig-white)] sm:p-8">
            <h2 className="text-xl font-bold">نشانی و ساعتِ کار</h2>
            <p className="flex items-start gap-3 leading-7">
              <GlobeIcon aria-hidden className="mt-1 size-5 shrink-0 text-muted-foreground" />
              تهران، ونک، خیابان ملاصدرا، پلاک ۲۴، طبقهٔ ۲
            </p>
            <p className="flex items-center gap-3">
              <ClockIcon aria-hidden className="size-5 text-muted-foreground" />
              شنبه تا پنجشنبه، ۹ تا ۲۰
            </p>
            <Button className="mt-4 self-start">رزروِ نوبت</Button>
          </div>
        </section>
      </main>
    </ControlSizeProvider>
  )
}