لندینگِ ابزارِ خودکارسازی

"use client"

import { ArrowUpIcon, BarChartIcon, BoltIcon, CheckIcon, FlashIcon, GridIcon, ShieldCheckIcon, SparklesIcon, StarIcon } from "@/components/icons"
import { Avatar, AvatarGroup } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { CountUp } from "@/components/ui/count-up"
import { Progress } from "@/components/ui/progress"
import { Reveal } from "@/components/ui/reveal"
import { toFaDigits } from "@/lib/persian"
import { stockImages } from "@/lib/stock-images"

const GRADIENT = "bg-[linear-gradient(135deg,var(--dig-orange-400),var(--dig-red-500))]"
const BENEFITS = [
  { title: "زمان تا ارزش، کوتاه‌تر", text: "گردش‌کارهای آماده از روزِ اول؛ بدونِ ماه‌ها پیاده‌سازی.", icon: <FlashIcon />, metric: "۳ روز", label: "تا اولین خودکارسازی" },
  { title: "ظرفیتی که بزرگ می‌شود", text: "تیم بزرگ می‌شود، فرایند همان می‌ماند؛ بی‌استخدامِ اضافه.", icon: <GridIcon />, metric: "۴×", label: "حجمِ کار با همان تیم" },
  { title: "تمرکز روی تصمیم", text: "کارهای تکراری خودکار، ذهنِ تیم برای کارهای مهم آزاد.", icon: <SparklesIcon />, metric: "۱۲ ساعت", label: "صرفه‌جویی در هفته" },
  { title: "چابکی با داده", text: "هر گردش‌کار گزارشِ خودش را دارد؛ گلوگاه‌ها پیداست.", icon: <BarChartIcon />, metric: "٪۹۸", label: "دقتِ گزارش" },
]
const STATS = [
  { value: 80, suffix: "+ هزار", text: "تیمی که کارهای روزانه‌شان را خودکار کرده‌اند" },
  { value: 50, suffix: "+", text: "یکپارچگیِ آماده با ابزارهای ایرانی و جهانی" },
  { value: 120, suffix: " میلیارد", text: "تومان صرفه‌جوییِ مشتریان در سالِ گذشته" },
]
const CASES = [
  { title: "بهره‌وریِ بیشتر برای فین‌تکِ آوند", metric: "٪۶۰", label: "تراکنشِ پردازش‌شده بی‌دخالتِ دستی", photo: "coverFinanceDesk" as const },
  { title: "پشتیبانیِ سریع‌تر برای فروشگاهِ نیکا", metric: "٪۷۴", label: "کاهشِ زمانِ پاسخ", photo: "projectDashboard" as const },
  { title: "ثبت‌نامِ خودکار برای آموزشگاهِ مهر", metric: "۹ ساعت", label: "صرفه‌جویی در هر روز", photo: "classroom" as const },
]

/**
 * لندینگِ ابزارِ خودکارسازی، گرم و نارنجی روی کرم: هیرو با اعتمادِ اجتماعی و نوارِ سه کارت
 * (عکس، کارتِ داشبورد، کارتِ گرادیانی)، چهار مزیت با پیش‌نمایشِ نارنجی، بخشِ ارزش با عکس و
 * نقل‌قول، سه آمارِ شمارنده، مطالعه‌های موردیِ تیره، و فراخوانِ پایانی در کارتِ روشن.
 */
export default function LandingAutomationBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <main className="flex w-full flex-col bg-[var(--dig-orange-50)] dark:bg-[var(--dig-graphite-950)]">
        <section className="flex flex-col items-center gap-6 px-4 pt-20 pb-12 text-center sm:px-6">
          <span className="flex items-center gap-2 text-sm">
            <AvatarGroup max={3} size="sm">
              <Avatar src={stockImages.personWoman1.src} alt="" />
              <Avatar src={stockImages.personMan2.src} alt="" />
              <Avatar src={stockImages.personWoman3.src} alt="" />
            </AvatarGroup>
            <span className="flex flex-col items-start">
              <span className="flex text-[var(--dig-orange-500)]">
                {Array.from({ length: 5 }, (_, index) => (
                  <StarIcon key={index} aria-hidden className="size-3.5 fill-current" />
                ))}
              </span>
              <span className="text-xs text-muted-foreground">مورد اعتمادِ ۲۰ هزار تیم</span>
            </span>
          </span>
          <h1 className="max-w-3xl text-4xl leading-tight font-black text-balance sm:text-6xl sm:leading-tight">کارها را خودکار کن، تیم را رها کن</h1>
          <p className="max-w-xl text-lg leading-8 text-muted-foreground">کارهای تکراری را به گردش‌کارهای هوشمند بسپارید و وقتِ تیم را برای تصمیم‌های مهم آزاد کنید.</p>
          <div className="flex flex-wrap justify-center gap-3">
            <Button>
              کشفِ امکانات
              <ArrowUpIcon aria-hidden className="-rotate-45" />
            </Button>
            <Button variant="outline">درخواستِ دمو</Button>
          </div>
        </section>

        <div className="grid w-full grid-cols-1 gap-4 px-4 sm:grid-cols-3 sm:px-0">
          {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
          <img src={stockImages.manLaptopStreet.src} alt="" className="hidden h-72 w-full rounded-xl object-cover sm:block sm:rounded-s-none" />
          <div className="flex h-72 items-center justify-center rounded-xl bg-[linear-gradient(160deg,var(--dig-orange-300),var(--dig-orange-500))] p-6">
            <div className="flex w-full max-w-64 flex-col gap-3 rounded-xl bg-card p-4 shadow-xl">
              <span className="text-xs text-muted-foreground">گردش‌کارِ فاکتور</span>
              <span className="text-2xl font-black tabular-nums">۱٬۲۴۸ اجرا</span>
              <Progress value={82} aria-label="پیشرفتِ ماه" />
              <span className="flex justify-between text-xs text-muted-foreground">
                <span>هدفِ ماه</span>
                <span>٪۸۲</span>
              </span>
            </div>
          </div>
          <div className={`flex h-72 flex-col items-center justify-center gap-3 rounded-xl ${GRADIENT} p-6 text-center text-[var(--dig-white)] sm:rounded-e-none`}>
            <span aria-hidden className="flex size-14 items-center justify-center rounded-full bg-[var(--dig-white)] text-[var(--dig-orange-700)]">
              <BoltIcon className="size-7" />
            </span>
            <span className="text-lg font-bold">گزارشِ خودکار فرستاده شد</span>
            <span className="text-sm text-[var(--dig-orange-100)]">به ۱۲ نفر، دوشنبه ساعت ۹</span>
          </div>
        </div>

        <ul aria-label="مشتریان" className="mx-auto flex w-full max-w-6xl flex-wrap items-center justify-between gap-x-10 gap-y-4 px-4 py-14 text-muted-foreground sm:px-6">
          <li className="max-w-40 text-sm leading-6 text-foreground">افتخارِ همکاری با سازمان‌های پیشرو</li>
          {["لوتوس", "مدار", "کیمیا", "سیمرغ", "آرمان"].map((name) => (
            <li key={name} className="flex items-center gap-2 text-lg font-black">
              <SparklesIcon aria-hidden className="size-5" />
              {name}
            </li>
          ))}
        </ul>

        <section aria-labelledby="la-benefits" className="mx-auto flex w-full max-w-6xl flex-col gap-10 px-4 py-16 sm:px-6">
          <div className="mx-auto flex max-w-xl flex-col items-center gap-3 text-center">
            <span className="rounded-full bg-card px-3 py-1 text-xs font-semibold text-[var(--dig-orange-700)] dark:text-[var(--dig-orange-400)]">• مزیت‌ها</span>
            <h2 id="la-benefits" className="text-3xl font-black sm:text-4xl">
              مزیت‌هایی برای جهشِ کسب‌وکار
            </h2>
          </div>
          <ul className="grid grid-cols-1 gap-6 md:grid-cols-2">
            {BENEFITS.map((item, index) => (
              <Reveal asChild key={item.title} delay={(index % 2) * 120}>
                <li className="flex flex-col gap-4 rounded-xl bg-card p-3 pb-6 shadow-sm">
                  <div className={`rounded-lg ${GRADIENT} p-5 sm:p-8`}>
                    <div className="flex flex-col gap-4 rounded-lg bg-card p-4 shadow-lg">
                      <span className="flex items-center gap-2 text-sm font-bold">
                        <span aria-hidden className="flex size-8 items-center justify-center rounded-lg bg-[var(--dig-orange-100)] text-[var(--dig-orange-700)] dark:bg-[var(--dig-orange-950)] dark:text-[var(--dig-orange-300)] [&>svg]:size-4">
                          {item.icon}
                        </span>
                        {item.title}
                      </span>
                      <div className="flex items-end justify-between gap-4">
                        <span className="flex flex-col">
                          <span className="text-2xl font-black">{item.metric}</span>
                          <span className="text-xs text-muted-foreground">{item.label}</span>
                        </span>
                        <Button size="sm" className="[--primary-foreground:var(--dig-white)] [--primary:var(--dig-orange-700)]">
                          ببینید
                        </Button>
                      </div>
                    </div>
                  </div>
                  <div className="flex flex-col gap-1.5 px-3">
                    <h3 className="text-lg font-bold">{item.title}</h3>
                    <p className="leading-7 text-muted-foreground">{item.text}</p>
                  </div>
                </li>
              </Reveal>
            ))}
          </ul>
        </section>

        <section aria-labelledby="la-value" className="mx-auto grid w-full max-w-6xl grid-cols-1 items-center gap-10 px-4 py-16 sm:px-6 lg:grid-cols-2">
          <div className="relative">
            {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
            <img src={stockImages.teamReviewingDocs.src} alt={stockImages.teamReviewingDocs.alt} className="aspect-[4/3] w-full rounded-xl object-cover" />
            <figure className="absolute inset-x-4 bottom-4 flex flex-col gap-2 rounded-xl bg-[color-mix(in_oklab,var(--dig-graphite-950)_70%,transparent)] p-4 text-sm leading-6 text-[var(--dig-white)] backdrop-blur-md">
              <blockquote>«از وقتی گزارش‌ها خودکار شد، جلسهٔ دوشنبه‌ها نصف شد و تصمیم‌ها دو برابر.»</blockquote>
              <figcaption className="text-xs text-[var(--dig-neutral-300)]">پریسا جهانی، مدیرِ عملیات</figcaption>
            </figure>
          </div>
          <div className="flex flex-col items-start gap-6">
            <span className="rounded-full bg-card px-3 py-1 text-xs font-semibold text-[var(--dig-orange-700)] dark:text-[var(--dig-orange-400)]">• چرا ما</span>
            <h2 id="la-value" className="text-3xl font-black sm:text-4xl">
              ارزشی که پشتِ کار است
            </h2>
            <ul className="flex flex-col gap-5">
              {[
                ["عملیاتِ یکپارچه", "داده‌ها و ابزارها در یک جریان؛ دیگر کپی بینِ برنامه‌ها نیست."],
                ["ساخته‌شده برای رشد", "از ده اجرا در روز تا ده هزار؛ بدونِ تغییرِ معماری."],
                ["امنیتِ قابلِ اعتماد", "رمزگذاری، دسترسیِ نقش‌محور و گزارشِ کاملِ تغییرات."],
              ].map(([title, text], index) => (
                <li key={title} className="flex gap-4">
                  <span aria-hidden className={`flex size-10 shrink-0 items-center justify-center rounded-lg ${GRADIENT} text-[var(--dig-white)]`}>
                    {[<CheckIcon key="a" className="size-5" />, <BarChartIcon key="b" className="size-5" />, <ShieldCheckIcon key="c" className="size-5" />][index]}
                  </span>
                  <span className="flex flex-col gap-1">
                    <span className="font-bold">{title}</span>
                    <span className="leading-7 text-muted-foreground">{text}</span>
                  </span>
                </li>
              ))}
            </ul>
            <Button>دیدنِ امکانات</Button>
          </div>
        </section>

        <section aria-label="آمار" className="mx-auto grid w-full max-w-6xl grid-cols-1 gap-4 px-4 py-12 sm:grid-cols-3 sm:px-6">
          {STATS.map((stat, index) => (
            <Reveal key={stat.text} delay={index * 100} className="flex flex-col gap-3 rounded-xl bg-card p-6 shadow-sm">
              <span aria-hidden className="flex size-10 items-center justify-center rounded-lg bg-[var(--dig-orange-100)] text-[var(--dig-orange-700)] dark:bg-[var(--dig-orange-950)] dark:text-[var(--dig-orange-300)]">
                <SparklesIcon className="size-5" />
              </span>
              <span className="text-4xl font-black tabular-nums">
                <CountUp value={stat.value} />
                {stat.suffix}
              </span>
              <span className="text-sm leading-6 text-muted-foreground">{stat.text}</span>
            </Reveal>
          ))}
        </section>

        <section aria-labelledby="la-cases" className="flex w-full flex-col gap-8 py-16">
          <div className="mx-auto flex w-full max-w-6xl flex-col gap-3 px-4 sm:px-6">
            <span className="text-xs font-semibold text-[var(--dig-orange-700)] dark:text-[var(--dig-orange-400)]">• مطالعهٔ موردی</span>
            <h2 id="la-cases" className="max-w-md text-3xl leading-snug font-black sm:text-4xl">
              اثرِ واقعی با مدیریتِ کارها
            </h2>
          </div>
          <ul className="mx-auto flex w-full max-w-6xl snap-x snap-mandatory gap-4 overflow-x-auto px-4 pb-2 [scrollbar-width:none] sm:px-6 [&::-webkit-scrollbar]:hidden">
            {CASES.map((item) => (
              <li key={item.title} className="grid w-[85%] shrink-0 snap-start grid-cols-1 overflow-hidden rounded-xl bg-[var(--dig-graphite-900)] text-[var(--dig-white)] sm:w-[70%] sm:grid-cols-2 lg:w-[48%]">
                {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
                <img src={stockImages[item.photo].src} alt="" className="aspect-[4/3] size-full object-cover grayscale sm:aspect-auto" />
                <div className="flex flex-col justify-between gap-8 p-6">
                  <h3 className="text-lg leading-8 font-bold">{item.title}</h3>
                  <div className="flex items-end justify-between gap-4">
                    <span className="flex flex-col">
                      <span className="text-3xl font-black">{item.metric}</span>
                      <span className="text-xs text-[var(--dig-neutral-400)]">{item.label}</span>
                    </span>
                    <Button size="sm" className="[--primary-foreground:var(--dig-graphite-950)] [--primary:var(--dig-white)]">
                      خواندن
                    </Button>
                  </div>
                </div>
              </li>
            ))}
          </ul>
        </section>

        <section className="bg-[var(--dig-graphite-950)] px-4 py-16 sm:px-6">
          <div className="mx-auto flex w-full max-w-4xl flex-col items-center gap-5 rounded-xl bg-card px-6 py-16 text-center">
            <span className="rounded-full bg-[var(--dig-orange-100)] px-3 py-1 text-xs font-semibold text-[var(--dig-orange-700)] dark:bg-[var(--dig-orange-950)] dark:text-[var(--dig-orange-300)]">• شروع کنید</span>
            <h2 className="text-3xl font-black sm:text-4xl">تیمت را رشد بده، کسب‌وکارت را</h2>
            <p className="max-w-md leading-7 text-muted-foreground">گردش‌کارها را ساده کن، بهره‌وری را بالا ببر و به تیمت ابزارِ درست بده.</p>
            <Button>
              شروعِ رایگان
              <ArrowUpIcon aria-hidden className="-rotate-45" />
            </Button>
            <span className="text-xs text-muted-foreground">{toFaDigits(14)} روز رایگان، بدونِ کارتِ بانکی</span>
          </div>
        </section>
      </main>
    </ControlSizeProvider>
  )
}