هیروی دوستونه

"use client"

import { CheckIcon, PlayIcon } from "@/components/icons"
import { Avatar, AvatarGroup } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { toFaDigits } from "@/lib/persian"
import { stockImages } from "@/lib/stock-images"

/**
 * هیروی دوستونه: برچسبِ تازه، تیترِ جسور، توضیح، دو دکمه (اصلی و ثانویه) و اعتمادِ
 * اجتماعی با عکسِ آدم‌ها؛ عکسِ واقعی در ستونِ دیگر با کارتِ شناورِ یک عدد.
 */
export default function HeroSplitBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <section className="mx-auto grid grid-cols-1 w-full max-w-6xl 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">
          <Badge variant="soft" color="violet">
            تازه: گزارشِ خودکارِ ماهانه
          </Badge>
          <h1 className="text-4xl leading-snug font-black text-balance sm:text-6xl 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>شروعِ رایگان</Button>
            <Button variant="outline">
              <PlayIcon />
              دیدنِ دمو
            </Button>
          </div>
          <div className="mt-4 flex items-center gap-3">
            <AvatarGroup>
              {[stockImages.personWoman1, stockImages.personMan1, stockImages.personWoman2, stockImages.personMan2].map((photo) => (
                <Avatar key={photo.src} alt="" src={photo.src} />
              ))}
            </AvatarGroup>
            <span className="text-sm text-muted-foreground">
              بیش از <span className="font-semibold text-foreground">{toFaDigits("12,000")}</span> کسب‌وکار
            </span>
          </div>
        </div>
        <div className="relative">
          {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
          <img src={stockImages.coverFinanceDesk.src} alt={stockImages.coverFinanceDesk.alt} className="aspect-[4/5] w-full rounded-xl object-cover sm:aspect-[4/3] lg:aspect-[4/5]" />
          <div className="absolute start-4 bottom-4 flex items-center gap-3 rounded-xl bg-card p-4 shadow-card sm:-start-6 sm:bottom-10">
            <span aria-hidden className="flex size-10 items-center justify-center rounded-lg bg-success-subtle text-success [&>svg]:size-5">
              <CheckIcon />
            </span>
            <span className="flex flex-col">
              <span className="text-xs text-muted-foreground">صرفه‌جویی در زمان</span>
              <span className="text-lg font-black tabular-nums">۹ ساعت در هفته</span>
            </span>
          </div>
        </div>
      </section>
    </ControlSizeProvider>
  )
}