لندینگِ زیرساختِ مالی

"use client"

import { ArrowUpIcon, CreditCardIcon, GlobeIcon, ShieldCheckIcon, SparklesIcon, WalletIcon } from "@/components/icons"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { CountUp } from "@/components/ui/count-up"
import { Marquee, MarqueeItem } from "@/components/ui/marquee"
import { Reveal } from "@/components/ui/reveal"
import { cn } from "@/lib/utils"
import { stockImages, type StockImageName } from "@/lib/stock-images"

const PURPLE = "bg-[linear-gradient(160deg,var(--dig-violet-100),var(--dig-indigo-200))] dark:bg-[linear-gradient(160deg,var(--dig-violet-950),var(--dig-indigo-900))]"
const BRANDS = ["پرداختِ نو", "کیف‌پولِ آسا", "صرافیِ سپهر", "بیمهٔ آرمان", "بازارِ نوین", "اعتبارِ مهر", "سکهٔ پارس"]
const BARS = [30, 42, 38, 55, 48, 62, 58, 70, 66, 82, 76, 90]
const CASES: { brand: string; text: string; tone: string; photo: StockImageName }[] = [
  { brand: "پرداختِ نو", text: "پرداختِ حقوقِ کارکنانِ خارج از کشور با کارتِ متصل به کیف‌پول.", tone: "bg-[var(--dig-amber-200)] text-[var(--dig-graphite-950)]", photo: "manLaptopStreet" },
  { brand: "کیف‌پولِ آسا", text: "پس‌اندازِ ارزی برای کارکنان در سراسرِ کشور.", tone: "bg-[var(--dig-violet-200)] text-[var(--dig-graphite-950)]", photo: "womanLaptopSofa" },
  { brand: "صرافیِ سپهر", text: "معاملهٔ سریع و امن برای میلیون‌ها کاربر.", tone: "bg-[var(--dig-cyan-200)] text-[var(--dig-graphite-950)]", photo: "projectDashboard" },
  { brand: "بازارِ نوین", text: "کیف‌پولِ ساده و امن برای خریدارانِ فروشگاه.", tone: "bg-[var(--dig-pink-200)] text-[var(--dig-graphite-950)]", photo: "teamReviewingDocs" },
]

/**
 * لندینگِ زیرساختِ مالی، بنفش و روشن: هیروی دوستونه با تیترِ دوتُن و پنلِ بنفش با گوشیِ
 * صفحه‌کلیدِ مبلغ و کارتِ داشبورد، ردیفِ چرخانِ برندها، بنتوی شش محصول با تصویرسازیِ
 * گرادیانی، چهار آمارِ شمارنده، کارت‌های رنگیِ مشتری، بخشِ توسعه‌دهنده با آکاردئون و فراخوان.
 */
export default function LandingFintechBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <main className="flex w-full flex-col">
        <section className="grid w-full grid-cols-1 lg:grid-cols-2">
          <div className="flex flex-col justify-center gap-6 px-4 py-20 sm:px-10 lg:py-32">
            <h1 className="text-4xl leading-tight font-bold text-balance sm:text-5xl sm:leading-tight">
              محصولی بسازید که دارایی را نگه دارد، جابه‌جا کند و <span className="text-muted-foreground">رشد بدهد</span>
            </h1>
            <p className="max-w-md leading-8 text-muted-foreground">کیف‌پول بسازید، رمزارز و ریال نگه دارید و جابه‌جاییِ پول را از اولین تراکنش تا مقیاسِ ملی خودکار کنید.</p>
            <div className="flex gap-3">
              <Button radius="full">شروع کنید</Button>
              <Button radius="full" variant="outline">
                تماس با فروش
              </Button>
            </div>
          </div>
          <div aria-hidden className={cn("relative flex min-h-96 items-center justify-center gap-6 overflow-hidden p-8", PURPLE)}>
            <div className="flex w-48 flex-col gap-3 rounded-[2rem] border-4 border-[var(--dig-graphite-900)] bg-card p-4 shadow-2xl">
              <span className="text-center text-xs text-muted-foreground">خریدِ تتر</span>
              <span className="text-center text-3xl font-bold tabular-nums">۵۰ $</span>
              <div className="grid grid-cols-3 gap-1.5 text-center text-sm">
                {["۱", "۲", "۳", "۴", "۵", "۶", "۷", "۸", "۹", "", "۰", "←"].map((key, index) => (
                  <span key={index} className="rounded-md py-1.5 hover:bg-muted">
                    {key}
                  </span>
                ))}
              </div>
              <span className="rounded-full bg-[var(--dig-violet-600)] py-2 text-center text-xs font-semibold text-[var(--dig-white)]">ادامه</span>
            </div>
            <div className="hidden w-56 flex-col gap-3 rounded-xl bg-card p-4 shadow-xl sm:flex">
              <span className="text-xs text-muted-foreground">کیف‌پول‌ها</span>
              <span className="text-xl font-bold tabular-nums">۳۰٬۴۵۵٬۰۲۱ $</span>
              <div className="flex h-20 items-end gap-1">
                {BARS.map((value, index) => (
                  <span key={index} className="flex-1 rounded-sm bg-[var(--dig-violet-400)]" style={{ height: `${value}%` }} />
                ))}
              </div>
            </div>
          </div>
        </section>

        <div className="border-y border-border py-6">
          <Marquee fade pauseOnHover duration={35} gap={56}>
            {BRANDS.map((brand) => (
              <MarqueeItem key={brand} className="flex items-center gap-2 text-lg font-bold whitespace-nowrap text-muted-foreground">
                <SparklesIcon aria-hidden className="size-5" />
                {brand}
              </MarqueeItem>
            ))}
          </Marquee>
        </div>

        <section aria-labelledby="lf-products" className="mx-auto flex w-full max-w-6xl flex-col gap-10 px-4 py-24 sm:px-6">
          <h2 id="lf-products" className="max-w-xl text-3xl leading-snug font-bold sm:text-4xl">
            تجربهٔ مالیِ مدرن با <span className="text-muted-foreground">پولِ برنامه‌پذیر</span>
          </h2>
          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
            <Reveal className={cn("flex min-h-80 flex-col gap-2 overflow-hidden rounded-xl p-6 md:col-span-2", PURPLE)}>
              <h3 className="text-lg font-bold">دارایی برای همهٔ کاربران</h3>
              <p className="max-w-sm text-sm leading-6 text-muted-foreground">کاربرانِ سراسرِ کشور ریال و رمزارز را در همان اپی نگه دارند که می‌شناسند.</p>
              <div aria-hidden className="relative mt-auto h-40">
                <span className="absolute start-1/2 top-4 size-56 -translate-x-1/2 rounded-full bg-[radial-gradient(circle_at_35%_35%,var(--dig-white),var(--dig-violet-300)_45%,var(--dig-pink-300))] shadow-[0_30px_60px_-20px_var(--dig-violet-500)] rtl:translate-x-1/2" />
              </div>
            </Reveal>
            <Reveal delay={100} className="flex flex-col gap-2 rounded-xl bg-subtle p-6">
              <h3 className="text-lg font-bold">معاملهٔ پرسرعت</h3>
              <p className="text-sm leading-6 text-muted-foreground">اجرای کم‌تأخیر برای جریانِ معاملاتِ پرتکرار.</p>
              <div className="mt-auto flex flex-col gap-1 rounded-lg bg-card p-3 shadow-sm">
                <span className="text-xs text-muted-foreground">حجمِ معاملهٔ امروز</span>
                <span className="font-bold tabular-nums">۲٬۰۵۶٬۳۸۹ $</span>
                <span aria-hidden className="h-12 rounded-md bg-[linear-gradient(180deg,var(--dig-pink-300),transparent)] [clip-path:polygon(0_100%,0_70%,15%_60%,30%_75%,45%_40%,60%_55%,75%_20%,90%_35%,100%_10%,100%_100%)]" />
              </div>
            </Reveal>
            {[
              { title: "خزانه‌داریِ خودکار", text: "مسیریابیِ سرمایه با تأییدهای چندمرحله‌ای.", icon: <WalletIcon /> },
              { title: "کارتِ متصل به کیف‌پول", text: "خرجِ مستقیم از موجودی با کارتِ بانکی.", icon: <CreditCardIcon /> },
              { title: "سودِ موجودیِ بیکار", text: "موجودیِ بلااستفاده خودش سود می‌گیرد.", icon: <GlobeIcon /> },
            ].map((item, index) => (
              <Reveal key={item.title} delay={index * 100} className="flex flex-col gap-3 rounded-xl bg-subtle p-6">
                <span aria-hidden className="flex size-12 items-center justify-center rounded-xl bg-[linear-gradient(135deg,var(--dig-violet-500),var(--dig-pink-400))] text-[var(--dig-white)] [&>svg]:size-6">
                  {item.icon}
                </span>
                <h3 className="text-lg font-bold">{item.title}</h3>
                <p className="text-sm leading-6 text-muted-foreground">{item.text}</p>
              </Reveal>
            ))}
          </div>
        </section>

        <section aria-label="آمار" className="mx-auto grid w-full max-w-6xl grid-cols-2 gap-8 px-4 pb-24 text-center sm:px-6 md:grid-cols-4">
          {[
            [160, "میلیون+", "حسابِ کاربری"],
            [180, "+", "شهرِ تحتِ پوشش"],
            [15, " همت+", "تراکنشِ ماهانه"],
            [99, "٫۹۹٪", "پایداری"],
          ].map(([value, suffix, label]) => (
            <div key={String(label)} className="flex flex-col gap-1">
              <span className="text-3xl font-bold tabular-nums sm:text-4xl">
                <CountUp value={Number(value)} />
                {suffix}
              </span>
              <span className="text-sm text-muted-foreground">{label}</span>
            </div>
          ))}
        </section>

        <section aria-labelledby="lf-cases" className="mx-auto flex w-full max-w-6xl flex-col gap-8 px-4 pb-24 sm:px-6">
          <div className="flex items-end justify-between gap-4">
            <h2 id="lf-cases" className="text-3xl font-bold">
              ببینید چه چیزهایی ممکن است
            </h2>
            <a href="#" className="flex shrink-0 items-center gap-1 text-sm font-semibold hover:underline">
              همهٔ نمونه‌ها
              <ArrowUpIcon aria-hidden className="size-4 -rotate-45" />
            </a>
          </div>
          <ul className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {CASES.map((item) => (
              <li key={item.brand} className={cn("flex flex-col overflow-hidden rounded-xl", item.tone)}>
                <div className="flex flex-col gap-2 p-5">
                  <span className="text-lg font-black">{item.brand}</span>
                  <p className="text-sm leading-6">{item.text}</p>
                </div>
                {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
                <img src={stockImages[item.photo].src} alt="" className="mt-auto aspect-[4/3] w-full object-cover" />
              </li>
            ))}
          </ul>
        </section>

        <section aria-labelledby="lf-dev" className="mx-auto grid w-full max-w-6xl grid-cols-1 items-center gap-12 px-4 pb-24 sm:px-6 lg:grid-cols-2">
          <div aria-hidden className={cn("flex aspect-square items-center justify-center rounded-xl", PURPLE)}>
            <div className="relative size-48 [perspective:800px]">
              {[0, 1, 2].map((layer) => (
                <span
                  key={layer}
                  className="absolute inset-0 rounded-2xl bg-[linear-gradient(135deg,var(--dig-pink-300),var(--dig-violet-400),var(--dig-blue-300))] shadow-xl [transform:rotateX(60deg)_rotateZ(-45deg)]"
                  style={{ translate: `0 ${layer * -28}px` }}
                />
              ))}
            </div>
          </div>
          <div className="flex flex-col gap-6">
            <h2 id="lf-dev" className="text-3xl leading-snug font-bold sm:text-4xl">
              ساخته‌شده برای توسعه‌دهنده، <span className="text-muted-foreground">مورد اعتمادِ سازمان‌ها</span>
            </h2>
            <Accordion type="single" collapsible defaultValue="secure">
              {[
                ["secure", "امن از پایه", "کلیدها در سخت‌افزارِ ایزوله نگه‌داری می‌شوند و هر دسترسی لایه‌لایه کنترل می‌شود."],
                ["white", "برندِ شما، ماژولار", "رابط را با برندِ خودتان بسازید یا فقط API را بردارید."],
                ["scale", "مقیاس بدونِ گلوگاه", "از صد کاربر تا ده میلیون، با همان معماری."],
              ].map(([value, title, text]) => (
                <AccordionItem key={value} value={value}>
                  <AccordionTrigger>
                    <span className="flex items-center gap-2">
                      <ShieldCheckIcon aria-hidden className="size-4 text-[var(--dig-violet-600)] dark:text-[var(--dig-violet-400)]" />
                      {title}
                    </span>
                  </AccordionTrigger>
                  <AccordionContent>{text}</AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
        </section>

        <section className="flex flex-col items-center gap-5 border-t border-border px-4 py-24 text-center sm:px-6">
          <h2 className="text-3xl leading-snug font-bold sm:text-5xl sm:leading-tight">
            در چند دقیقه شروع کنید
            <span className="block text-muted-foreground">در چند ساعت منتشر کنید</span>
          </h2>
          <p className="max-w-md leading-7 text-muted-foreground">کیف‌پول بسازید، پول جابه‌جا کنید و جریانِ مالی را از اولین تراکنش خودکار کنید.</p>
          <div className="flex gap-3">
            <Button radius="full">شروع کنید</Button>
            <Button radius="full" variant="outline">
              تماس با فروش
            </Button>
          </div>
        </section>
      </main>
    </ControlSizeProvider>
  )
}