صفحهٔ فرود

"use client"

import * as React from "react"

import {
  ArrowUpIcon,
  AvatarGenderIcon,
  BarChartIcon,
  BellIcon,
  CalendarIcon,
  ChevronLeftIcon,
  QuoteIcon,
  StarIcon,
  FileTextIcon,
  ReceiptIcon,
  ShieldCheckIcon,
  SparklesIcon,
  UsersIcon,
  WalletIcon,
} from "@/components/icons"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { Avatar, AvatarGroup } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Footer,
  FooterBottom,
  FooterBrand,
  FooterColumn,
  FooterColumns,
  FooterColumnTitle,
  FooterContent,
  FooterLink,
  FooterLinkList,
} from "@/components/ui/footer"
import { CountUp } from "@/components/ui/count-up"
import { StatTileChart, StatTileTrend } from "@/components/ui/stat-tile"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Reveal } from "@/components/ui/reveal"
import { formatNumber, toFaDigits } from "@/lib/persian"
import { stockImages } from "@/lib/stock-images"

const LOGOS = ["digipay", "asan-pardakht", "blu", "day", "caspian", "bim"]
const FEATURES = [
  { icon: <ReceiptIcon />, title: "فاکتور در یک دقیقه", text: "فاکتورِ رسمی با مالیات، آمادهٔ ارسال برای مشتری." },
  { icon: <WalletIcon />, title: "پرداختِ آنلاین", text: "لینکِ پرداخت بفرست و وضعیت را لحظه‌ای ببین." },
  { icon: <UsersIcon />, title: "مشتریان و بدهکاران", text: "پرونده و ماندهٔ هر مشتری در یک صفحه." },
  { icon: <ShieldCheckIcon />, title: "امنیت و پشتیبان‌گیری", text: "سرورِ داخلِ ایران و نسخهٔ پشتیبانِ روزانه." },
]
const INTEGRATIONS = [<WalletIcon key="w" />, <ReceiptIcon key="r" />, <BellIcon key="b" />, <CalendarIcon key="c" />, <FileTextIcon key="f" />, <BarChartIcon key="g" />, <UsersIcon key="u" />, <ShieldCheckIcon key="s" />]
const FAQ = [
  { q: "برای شروع کارتِ بانکی لازم است؟", a: "نه؛ ۱۴ روز رایگان امتحان کن، بدون کارتِ بانکی." },
  { q: "اطلاعاتم کجا نگه‌داری می‌شود؟", a: "روی سرورهای داخلِ ایران با پشتیبان‌گیری روزانه." },
  { q: "می‌توانم پلن را بعداً عوض کنم؟", a: "هر وقت خواستی؛ مبلغ به نسبتِ روزهای باقی‌مانده حساب می‌شود." },
]
// «+» به عدد می‌چسبد («۵۰+ هزار»)، نه به انتهای واحد.
const STATS = [
  { value: 50, suffix: "+ هزار", label: "کاربرِ فعال" },
  { value: 12, suffix: "+ هزار", label: "کسب‌وکار" },
  { value: 98, suffix: "٪", label: "رضایتِ کاربران" },
]

/** کارتِ شیشه‌ای کوچکِ تصویرِ قهرمان؛ قابِ دوگانهٔ ظریف مثلِ پنجره‌های محصول. */
function HeroCard({ className, children }: { className?: string; children: React.ReactNode }) {
  return (
    <div className={`rounded-xl border border-border bg-[color-mix(in_oklab,var(--muted)_60%,var(--background))] p-1.5 ${className ?? ""}`}>
      <div className="rounded-lg border border-border bg-card p-5">{children}</div>
    </div>
  )
}

export default function LandingBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
    <div className="flex min-h-svh flex-col bg-background">
      <header className="sticky top-0 z-10 border-b border-border bg-background">
        <nav aria-label="ناوبری اصلی" className="mx-auto flex h-16 w-full max-w-6xl items-center gap-6 px-4 sm:px-6">
          <span className="flex items-center gap-2 font-bold">
            <span aria-hidden className="flex size-8 items-center justify-center rounded-lg bg-foreground text-background [&_svg]:size-4">
              <SparklesIcon />
            </span>
            حساب‌یار
          </span>
          <ul className="hidden items-center gap-6 text-sm text-muted-foreground md:flex">
            {["امکانات", "قیمت‌ها", "مشتریان", "تماس"].map((item) => (
              <li key={item}>
                <a href="#" className="transition-colors hover:text-foreground">
                  {item}
                </a>
              </li>
            ))}
          </ul>
          <div className="ms-auto flex items-center gap-2">
            <Button variant="ghost" className="max-sm:hidden">
              ورود
            </Button>
            <Button>درخواستِ دمو</Button>
          </div>
        </nav>
      </header>

      <main className="flex 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 gap-8">
            <a href="#" className="flex w-fit items-center gap-2 rounded-full border border-border bg-card py-1 ps-1 pe-3 text-sm">
              <Badge color="warning" className="gap-1">
                <span aria-hidden className="size-1.5 rounded-full bg-current" />
                تازه
              </Badge>
              گزارش‌گیری با هوش مصنوعی
              <ChevronLeftIcon aria-hidden className="size-4 text-muted-foreground ltr:rotate-180" />
            </a>
            <div className="flex flex-col gap-5">
              <h1 className="text-4xl leading-[1.25] font-black sm:text-6xl sm:leading-[1.2]">
                حساب‌وکتابِ کسب‌وکار،{" "}
                <span className="bg-[linear-gradient(90deg,var(--brand-secondary-500),var(--brand-secondary-700))] bg-clip-text text-transparent">
                  بی‌دردسر
                </span>
              </h1>
              <p className="max-w-lg text-lg leading-8 text-muted-foreground">
                فاکتور، پرداخت و گزارشِ فروش در یک داشبوردِ ساده؛ هر روز می‌دانی کجا ایستاده‌ای.
              </p>
            </div>
            <div className="flex flex-wrap gap-3">
              <Button>۱۴ روز رایگان امتحان کن</Button>
              <Button variant="outline">
                ببین چطور کار می‌کند
                <ChevronLeftIcon className="ltr:rotate-180" />
              </Button>
            </div>
            <div className="flex items-center gap-3 text-sm text-muted-foreground">
              <AvatarGroup>
                <Avatar size="sm" alt="مهسا" src={stockImages.personWoman1.src} icon={<AvatarGenderIcon gender="female" />} className="ring-2 ring-background" />
                <Avatar size="sm" alt="کیان" src={stockImages.personMan1.src} icon={<AvatarGenderIcon gender="male" />} className="ring-2 ring-background" />
                <Avatar size="sm" alt="نیلوفر" src={stockImages.personWoman2.src} icon={<AvatarGenderIcon gender="female" />} className="ring-2 ring-background" />
              </AvatarGroup>
              <span>
                <strong className="font-semibold text-foreground">{formatNumber(12_000)}+</strong> کسب‌وکار به ما اعتماد کرده‌اند
              </span>
            </div>
          </div>

          <div aria-hidden className="relative flex flex-col gap-4 rounded-xl border border-dashed border-border p-4 sm:p-8">
            <HeroCard>
              <div className="flex items-center gap-4">
                <AvatarGroup>
                  <Avatar alt="" icon={<AvatarGenderIcon gender="male" />} className="ring-2 ring-card" />
                  <Avatar alt="" src={stockImages.personWoman3.src} icon={<AvatarGenderIcon gender="female" />} className="ring-2 ring-card" />
                  <Avatar alt="" src={stockImages.personWoman1.src} icon={<AvatarGenderIcon gender="female" />} className="ring-2 ring-card" />
                </AvatarGroup>
                <p className="text-sm leading-6">
                  مشتریانِ تازهٔ فروشگاه <strong className="text-success">+{toFaDigits("15,400")}</strong> نفر شد
                </p>
              </div>
            </HeroCard>
            <HeroCard>
              <div className="flex flex-col gap-5">
                <Tabs defaultValue="overview">
                  <TabsList className="w-full">
                    <TabsTrigger value="overview">نمای کلی</TabsTrigger>
                    <TabsTrigger value="sales">فروش</TabsTrigger>
                    <TabsTrigger value="orders">سفارش</TabsTrigger>
                  </TabsList>
                </Tabs>
                <div className="flex items-end justify-between gap-4">
                  <div className="flex min-w-0 flex-col gap-2">
                    <span className="flex items-baseline gap-2">
                      <span className="text-3xl font-bold tabular-nums">{formatNumber(8_458)}</span>
                      <StatTileTrend value={12} formatValue={() => "+۱٬۱۲۴"} appearance="text" />
                    </span>
                    <span className="text-sm leading-6 text-muted-foreground">فروشِ این ماه حدودِ ٪۵۸ بیشتر شد</span>
                  </div>
                  <StatTileChart
                    className="h-24 w-28 shrink-0 sm:w-40"
                    color="var(--success)"
                    data={[
                      { label: "تیر", value: 52 },
                      { label: "مرداد", value: 44 },
                      { label: "شهریور", value: 38 },
                      { label: "مهر", value: 70 },
                    ]}
                  />
                </div>
              </div>
            </HeroCard>
            <HeroCard>
              <div className="flex items-center justify-between gap-4">
                <div className="flex flex-col gap-1">
                  <span className="text-sm text-muted-foreground">درآمدِ کل</span>
                  <span className="text-2xl font-bold tabular-nums">۱۰۸٫۵ میلیون</span>
                </div>
                <Button tabIndex={-1}>
                  <FileTextIcon />
                  خروجی اکسل
                </Button>
              </div>
            </HeroCard>
          </div>
        </section>

        {/* اعتماد: لوگوهای خاکستری در یک ردیف. */}
        <section aria-label="مشتریان" className="mx-auto flex w-full max-w-6xl flex-col items-center gap-6 px-4 pb-20 sm:px-6">
          <p className="text-sm text-muted-foreground">کسب‌وکارهایی که هر روز با ما کار می‌کنند</p>
          <ul className="flex flex-wrap items-center justify-center gap-x-10 gap-y-6">
            {LOGOS.map((logo) => {
              const folder = logo === "digipay" || logo === "asan-pardakht" ? "fintech" : "banks"
              return (
                <li key={logo}>
                  {/* eslint-disable-next-line @next/next/no-img-element -- لوگوی کوچکِ ثابت */}
                  <img src={`/logos/${folder}/${logo}.svg`} alt="" className="h-9 w-auto grayscale" />
                </li>
              )
            })}
          </ul>
        </section>

        {/* امکانات: عنوانِ بخش، سپس بنتو با پیش‌نمایشِ کوچکِ رابط. */}
        <section className="bg-muted py-20">
          <div className="mx-auto flex w-full max-w-6xl flex-col gap-12 px-4 sm:px-6">
            <div className="mx-auto flex max-w-2xl flex-col items-center gap-3 text-center">
              <Badge variant="soft">امکانات</Badge>
              <h2 className="text-3xl leading-snug font-bold sm:text-4xl">هرچه برای حساب‌وکتاب لازم داری</h2>
              <p className="leading-7 text-muted-foreground">بدونِ نرم‌افزارهای جداجدا و فایل‌های اکسلِ بی‌پایان.</p>
            </div>
            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
              <article className="flex flex-col gap-6 rounded-xl border border-border bg-card p-6 md:col-span-2 md:flex-row md:items-center">
                <div className="flex flex-1 flex-col gap-3">
                  <h3 className="text-xl font-bold">داشبوردِ زنده</h3>
                  <p className="leading-7 text-muted-foreground">فروش، سود و بدهکاران را لحظه‌ای ببین؛ همان چیزی که هر صبح لازم داری، اولِ صفحه.</p>
                  <Button variant="outline" className="mt-2 w-fit">
                    دیدنِ داشبورد
                  </Button>
                </div>
                <div className="flex-1 rounded-xl border border-border bg-muted p-5">
                  <StatTileChart
                    className="h-40"
                    color="var(--brand-secondary)"
                    data={[
                      { label: "فروردین", value: 30 },
                      { label: "اردیبهشت", value: 42 },
                      { label: "خرداد", value: 36 },
                      { label: "تیر", value: 64 },
                      { label: "مرداد", value: 48 },
                      { label: "شهریور", value: 58 },
                    ]}
                    highlight={3}
                  />
                </div>
              </article>
              <article className="flex flex-col gap-5 rounded-xl border border-border bg-card p-6">
                <div className="flex flex-col gap-2">
                  <h3 className="text-xl font-bold">اعلانِ به‌موقع</h3>
                  <p className="leading-7 text-muted-foreground">سررسیدِ چک، پرداختِ مشتری و موجودی کم، قبل از این‌که دیر شود.</p>
                </div>
                <ul className="flex flex-col divide-y divide-border rounded-xl border border-border">
                  {[
                    ["پرداختِ تازه", true],
                    ["سررسیدِ چک", true],
                    ["گزارشِ هفتگی", false],
                  ].map(([label, on]) => (
                    <li key={String(label)} className="flex items-center justify-between px-4 py-3 text-sm">
                      {label}
                      <Switch defaultChecked={Boolean(on)} aria-label={String(label)} />
                    </li>
                  ))}
                </ul>
              </article>
              <article className="flex flex-col gap-5 rounded-xl border border-border bg-card p-6">
                <div className="flex flex-col gap-2">
                  <h3 className="text-xl font-bold">همه‌چیز در یک جا</h3>
                  <p className="leading-7 text-muted-foreground">از صدورِ فاکتور تا پیگیری بدهی، بی‌جابه‌جایی بینِ ابزارها.</p>
                </div>
                <ul className="grid grid-cols-2 gap-3">
                  {FEATURES.map((feature, index) => (
                    <Reveal asChild key={feature.title} delay={index * 100}>
                      <li className="flex flex-col gap-2 rounded-xl border border-border p-4">
                        <span aria-hidden className="flex size-9 items-center justify-center rounded-xl bg-muted [&_svg]:size-4">
                          {feature.icon}
                        </span>
                        <span className="text-sm font-semibold">{feature.title}</span>
                        <span className="text-xs leading-5 text-muted-foreground">{feature.text}</span>
                      </li>
                    </Reveal>
                  ))}
                </ul>
              </article>
            </div>
          </div>
        </section>

        {/* یکپارچگی: بخشِ تیره با کاشی‌های آیکون. */}
        <section className="px-4 py-20 sm:px-6">
          <div className="mx-auto flex w-full max-w-6xl flex-col items-center gap-10 rounded-xl bg-inverse px-6 py-16 text-center text-[var(--dig-white)] [--muted-foreground:var(--dig-graphite-300)]">
            <div className="flex max-w-xl flex-col items-center gap-3">
              <h2 className="text-3xl leading-snug font-bold">جایگزین نکن، وصل کن</h2>
              <p className="leading-7 text-muted-foreground">به درگاه، بانک و ابزارهایی که همین حالا استفاده می‌کنی وصل می‌شود.</p>
            </div>
            <ul className="grid grid-cols-4 gap-3 sm:grid-cols-8">
              {INTEGRATIONS.map((icon, index) => (
                <li
                  key={index}
                  className="flex size-14 items-center justify-center rounded-xl bg-[var(--dig-white)] text-[var(--dig-graphite-900)] [&_svg]:size-6"
                >
                  {icon}
                </li>
              ))}
            </ul>
          </div>
        </section>

        {/* نظرِ مشتری: کارتِ دوبخشی؛ نقل‌قول با متنِ متعادل و کنارش نتیجهٔ عددی همان مشتری. */}
        <section className="mx-auto w-full max-w-6xl px-4 py-12 sm:px-6">
          <figure className="grid grid-cols-1 overflow-hidden rounded-xl border border-border bg-card lg:grid-cols-[1.5fr_1fr]">
            <div className="flex flex-col gap-6 p-8 sm:p-10">
              <div className="flex items-center justify-between gap-4">
                <QuoteIcon aria-hidden className="size-8 text-brand-secondary" />
                <span className="flex gap-0.5 text-[var(--dig-amber-500)]" role="img" aria-label="امتیاز ۵ از ۵">
                  {[0, 1, 2, 3, 4].map((star) => (
                    <StarIcon key={star} aria-hidden className="size-4 fill-current" />
                  ))}
                </span>
              </div>
              <blockquote className="text-lg leading-9 font-medium sm:text-xl sm:leading-10">
                «حساب‌وکتابِ ماهانه‌مان از سه روز به یک ساعت رسید؛ حالا وقتمان صرفِ فروش می‌شود، نه اکسل.»
              </blockquote>
              <figcaption className="mt-auto flex items-center gap-3 border-t border-border pt-6">
                <Avatar alt="سارا محمدی" src={stockImages.personWoman2.src} icon={<AvatarGenderIcon gender="female" />} />
                <span className="flex flex-col">
                  <span className="font-semibold">سارا محمدی</span>
                  <span className="text-sm text-muted-foreground">مدیرِ فروشگاهِ آنلاین</span>
                </span>
              </figcaption>
            </div>
            {/* نتیجه: قبل و بعد، تا ادعا با عدد دیده شود. */}
            <div className="flex flex-col justify-center gap-6 bg-muted p-8 sm:p-10">
              <span className="text-sm font-medium text-muted-foreground">زمانِ بستنِ حساب‌های ماه</span>
              <div className="flex items-end gap-4">
                <span className="flex flex-col gap-1">
                  <span className="text-2xl font-bold text-muted-foreground">۳ روز</span>
                  <span className="text-xs text-muted-foreground">قبل</span>
                </span>
                <ArrowUpIcon aria-hidden className="mb-7 size-5 -rotate-90 text-muted-foreground" />
                <span className="flex flex-col gap-1">
                  <span className="text-5xl font-black text-success">۱ ساعت</span>
                  <span className="text-xs text-muted-foreground">با حساب‌یار</span>
                </span>
              </div>
              <span className="text-sm leading-7 text-muted-foreground">۹۶٪ کاهش زمان، با همان تیمِ دو نفره.</span>
            </div>
          </figure>
        </section>
        <section aria-label="آمار" className="mx-auto w-full max-w-6xl px-4 pb-20 sm:px-6">
          <ul className="grid grid-cols-1 gap-6 rounded-xl bg-muted p-8 text-center sm:grid-cols-3">
            {STATS.map((stat) => (
              <li key={stat.label} className="flex flex-col gap-1">
                <CountUp value={stat.value} suffix={stat.suffix} className="text-4xl font-bold" />
                <span className="text-sm text-muted-foreground">{stat.label}</span>
              </li>
            ))}
          </ul>
        </section>

        <section className="mx-auto w-full max-w-2xl px-4 pb-20 sm:px-6" aria-labelledby="landing-faq">
          <h2 id="landing-faq" className="mb-4 text-center text-3xl font-bold">
            سؤال‌های پرتکرار
          </h2>
          <Accordion type="single" collapsible>
            {FAQ.map((item) => (
              <AccordionItem key={item.q} value={item.q}>
                <AccordionTrigger>{item.q}</AccordionTrigger>
                <AccordionContent className="text-muted-foreground">{item.a}</AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </section>

        {/* دعوتِ پایانی */}
        <section className="bg-inverse px-4 py-14 text-[var(--dig-white)] sm:px-6 [--muted-foreground:var(--dig-graphite-300)] [--primary-foreground:var(--dig-graphite-950)] [--primary:var(--dig-white)]">
          <div className="mx-auto flex w-full max-w-6xl flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
            <div className="flex flex-col gap-2">
              <h2 className="text-3xl leading-snug font-bold">امروز شروع کن، ۱۴ روز رایگان</h2>
              <p className="text-muted-foreground">بدونِ کارتِ بانکی؛ هر وقت خواستی لغو کن.</p>
            </div>
            <div className="flex flex-wrap gap-3">
              <Button>شروعِ رایگان</Button>
              <Button variant="outline" className="border-inverse-border bg-inverse text-[var(--dig-white)] hover:bg-inverse-raised hover:text-[var(--dig-white)]">
                درخواستِ دمو
              </Button>
            </div>
          </div>
        </section>
      </main>

      <Footer>
        <FooterContent>
          <FooterBrand>
            <span className="text-lg font-bold">حساب‌یار</span>
            <p className="text-sm text-muted-foreground">نرم‌افزارِ حسابداری ابری برای کسب‌وکارهای کوچک.</p>
          </FooterBrand>
          <FooterColumns>
            <FooterColumn>
              <FooterColumnTitle>محصول</FooterColumnTitle>
              <FooterLinkList>
                <FooterLink href="#">امکانات</FooterLink>
                <FooterLink href="#">قیمت‌ها</FooterLink>
              </FooterLinkList>
            </FooterColumn>
            <FooterColumn>
              <FooterColumnTitle>شرکت</FooterColumnTitle>
              <FooterLinkList>
                <FooterLink href="#">دربارهٔ ما</FooterLink>
                <FooterLink href="#">تماس با ما</FooterLink>
              </FooterLinkList>
            </FooterColumn>
          </FooterColumns>
        </FooterContent>
        <FooterBottom>
          <span>© {toFaDigits(1405)} حساب‌یار</span>
        </FooterBottom>
      </Footer>
    </div>
    </ControlSizeProvider>
  )
}