درباره ما، مأموریت

"use client"

import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { CountUp } from "@/components/ui/count-up"
import { Reveal } from "@/components/ui/reveal"
import { stockImages } from "@/lib/stock-images"

const STATS = [
  { value: 12, suffix: " هزار", label: "کسب‌وکار" },
  { value: 38, suffix: " نفر", label: "تیم" },
  { value: 4, label: "شهر" },
  { value: 98, prefix: "٪", label: "رضایت" },
]
const PRINCIPLES = [
  { title: "ساده، حتی وقتی سخت است", text: "هر قابلیت را آن‌قدر کوچک می‌کنیم که یک صاحبِ کافه بی‌آموزش بفهمد." },
  { title: "پولِ مشتری، امانتِ ماست", text: "امنیت و شفافیت پیش از سرعت؛ هیچ هزینهٔ پنهانی نداریم." },
  { title: "کنارِ مشتری، نه بالای سرش", text: "پشتیبانی را آدم‌هایی جواب می‌دهند که محصول را ساخته‌اند." },
]

/**
 * درباره ما با تمرکز بر مأموریت: جملهٔ مأموریتِ بزرگ روی سطحِ تیره، چهار عددِ شمارنده،
 * سه اصلِ کاری با شماره‌های درشت که نرم وارد می‌شوند، و عکسِ تیم با دعوت به همکاری.
 */
export default function AboutMissionBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <main className="flex w-full flex-col">
        <section className="bg-inverse px-4 py-24 text-[var(--dig-white)] [--muted-foreground:var(--dig-neutral-400)] sm:px-6">
          <div className="mx-auto flex max-w-4xl flex-col gap-8">
            <span className="text-sm font-semibold text-muted-foreground">مأموریتِ ما</span>
            <h1 className="text-3xl leading-snug font-black text-balance sm:text-5xl sm:leading-snug">می‌خواهیم هیچ کسب‌وکارِ کوچکی به‌خاطرِ ندانستنِ عددهایش ورشکست نشود.</h1>
            <dl className="mt-6 grid grid-cols-2 gap-6 border-t border-[var(--inverse-border)] pt-10 sm:grid-cols-4">
              {STATS.map((stat) => (
                <div key={stat.label} className="flex flex-col gap-1">
                  <dd className="text-3xl font-black tabular-nums sm:text-4xl">
                    <CountUp value={stat.value} prefix={stat.prefix} suffix={stat.suffix} />
                  </dd>
                  <dt className="text-sm text-muted-foreground">{stat.label}</dt>
                </div>
              ))}
            </dl>
          </div>
        </section>
        <section aria-labelledby="am-principles" className="mx-auto flex w-full max-w-4xl flex-col gap-12 px-4 py-24 sm:px-6">
          <h2 id="am-principles" className="text-3xl font-black">
            چطور کار می‌کنیم
          </h2>
          <ol className="flex flex-col gap-10">
            {PRINCIPLES.map((item, index) => (
              <Reveal asChild key={item.title} delay={index * 100}>
                <li className="grid grid-cols-[4rem_minmax(0,1fr)] gap-6">
                  <span aria-hidden className="text-5xl leading-none font-black text-[var(--dig-graphite-300)] dark:text-[var(--inverse-border)]">
                    {"۰۱۰۲۰۳".slice(index * 2, index * 2 + 2)}
                  </span>
                  <span className="flex flex-col gap-2">
                    <span className="text-xl font-bold">{item.title}</span>
                    <span className="text-lg leading-8 text-muted-foreground">{item.text}</span>
                  </span>
                </li>
              </Reveal>
            ))}
          </ol>
        </section>
        <section className="mx-auto grid w-full max-w-6xl grid-cols-1 items-center gap-10 px-4 pb-24 sm:px-6 lg:grid-cols-2">
          {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
          <img src={stockImages.coverWorkspace.src} alt={stockImages.coverWorkspace.alt} loading="lazy" className="aspect-[4/3] w-full rounded-xl object-cover" />
          <div className="flex flex-col items-start gap-5">
            <h2 className="text-3xl font-black">با ما بساز</h2>
            <p className="text-lg leading-8 text-muted-foreground">دنبالِ آدم‌هایی هستیم که از ساده‌کردنِ چیزهای پیچیده لذت می‌برند.</p>
            <Button>فرصت‌های شغلی</Button>
          </div>
        </section>
      </main>
    </ControlSizeProvider>
  )
}