درباره ما

"use client"

import * as React from "react"

import { HeartIcon, ShieldCheckIcon, SparklesIcon, UsersIcon } from "@/components/icons"
import { Badge } from "@/components/ui/badge"
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 { toFaDigits } from "@/lib/persian"
import { stockImages } from "@/lib/stock-images"

const VALUES = [
  { icon: <HeartIcon />, tone: "pink", title: "سادگی برای همه", text: "حساب‌وکتاب نباید فقط کارِ حسابدار باشد؛ هر صاحب‌کسب‌وکاری باید بفهمد." },
  { icon: <ShieldCheckIcon />, tone: "green", title: "امانت‌داری", text: "داده‌های مالی مشتری امانت است؛ نه می‌فروشیم، نه بی‌اجازه نگاه می‌کنیم." },
  { icon: <UsersIcon />, tone: "blue", title: "کنارِ مشتری", text: "هر عضوِ تیم هفته‌ای یک ساعت پشتیبانی می‌دهد تا صدای مشتری را بشنود." },
  { icon: <SparklesIcon />, tone: "violet", title: "بهترشدنِ مداوم", text: "هر دو هفته یک نسخهٔ تازه؛ کوچک، ولی همیشه رو به جلو." },
]

const TIMELINE = [
  { year: 1398, text: "سه نفر در یک اتاقِ کوچک؛ اولین فاکتورساز برای کافه‌ها." },
  { year: 1400, text: "هزارمین کسب‌وکار و اولین جذبِ سرمایه." },
  { year: 1402, text: "اپِ موبایل و گزارشِ هوشمند؛ تیم به ۳۰ نفر رسید." },
  { year: 1405, text: "بیش از ۱۲ هزار کسب‌وکار در سراسرِ ایران." },
]

const TEAM = [
  { name: "سارا محمدی", role: "هم‌بنیان‌گذار و مدیرعامل", photo: stockImages.personWoman3 },
  { name: "نیما رضایی", role: "مدیرِ فنی", photo: stockImages.personMan1 },
  { name: "مهسا کریمی", role: "مدیرِ محصول", photo: stockImages.personWoman1 },
  { name: "آرش نوری", role: "مدیرِ طراحی", photo: stockImages.personMan2 },
]

/**
 * درباره ما: هیرو با تیتر و عکسِ دفتر، آمارِ شمارنده، داستان با خطِ زمانی، ارزش‌ها با
 * کاشی رنگی، تیمِ مدیریت با عکس، و دعوت به همکاری.
 */
export default function AboutBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <main className="flex flex-col">
        <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 gap-6">
            <Badge variant="soft" className="self-start">
              درباره ما
            </Badge>
            <h1 className="text-4xl leading-snug font-black sm:text-5xl sm:leading-snug">حساب‌وکتاب را برای همه ساده می‌کنیم</h1>
            <p className="text-lg leading-8 text-muted-foreground">
              از سالِ ۱۳۹۸ کنارِ کسب‌وکارهای کوچک و متوسطیم تا به‌جای جدول و کاغذ، روی رشدشان تمرکز کنند.
            </p>
          </div>
          {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
          <img src={stockImages.studioSunlit.src} alt={stockImages.studioSunlit.alt} className="aspect-[4/3] w-full rounded-xl object-cover" />
        </section>

        <section aria-label="آمار" className="border-y border-border bg-subtle">
          <dl className="mx-auto grid w-full max-w-6xl grid-cols-2 gap-8 px-4 py-12 sm:px-6 lg:grid-cols-4">
            {[
              { value: 12, suffix: "+ هزار", label: "کسب‌وکار" },
              { value: 64, label: "عضوِ تیم" },
              { value: 31, label: "استان" },
              { value: 98, suffix: "٪", label: "رضایتِ مشتری" },
            ].map((stat) => (
              <div key={stat.label} className="flex flex-col gap-1">
                <dt className="order-2 text-sm text-muted-foreground">{stat.label}</dt>
                <dd className="text-4xl font-black">
                  <CountUp value={stat.value} suffix={stat.suffix} />
                </dd>
              </div>
            ))}
          </dl>
        </section>

        <section aria-labelledby="about-story" className="mx-auto grid grid-cols-1 w-full max-w-6xl gap-12 px-4 py-24 sm:px-6 lg:grid-cols-2">
          <div className="flex flex-col gap-3">
            <h2 id="about-story" className="text-3xl font-black sm:text-4xl">
              داستانِ ما
            </h2>
            <p className="text-lg leading-8 text-muted-foreground">
              یک کافه‌دار از دفترِ حسابش خسته شده بود. ابزاری که برایش ساختیم، امروز ابزارِ هزاران کسب‌وکار است.
            </p>
          </div>
          <ol className="flex flex-col">
            {TIMELINE.map((item, index) => (
              <Reveal asChild key={item.year} delay={index * 100}>
                <li className="relative flex gap-6 pb-10 last:pb-0">
                  {index < TIMELINE.length - 1 && <span aria-hidden className="absolute start-[1.1rem] top-10 bottom-0 w-px bg-border" />}
                  <span className="flex size-9 shrink-0 items-center justify-center rounded-full bg-[color-mix(in_oklab,var(--brand-secondary)_12%,var(--background))] text-xs font-bold text-brand-secondary">
                    {toFaDigits(String(item.year).slice(2))}
                  </span>
                  <div className="flex flex-col gap-1 pt-1.5">
                    <span className="font-bold tabular-nums">{toFaDigits(item.year)}</span>
                    <span className="leading-7 text-muted-foreground">{item.text}</span>
                  </div>
                </li>
              </Reveal>
            ))}
          </ol>
        </section>

        <section aria-labelledby="about-values" className="bg-muted py-24">
          <div className="mx-auto flex w-full max-w-6xl flex-col gap-12 px-4 sm:px-6">
            <div className="flex max-w-2xl flex-col gap-3">
              <h2 id="about-values" className="text-3xl font-black sm:text-4xl">
                چیزهایی که به آن‌ها پایبندیم
              </h2>
              <p className="text-lg leading-8 text-muted-foreground">هر تصمیمِ محصول و هر استخدام با همین چهار اصل سنجیده می‌شود.</p>
            </div>
            <ul className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
              {VALUES.map((value, index) => (
                <Reveal asChild key={value.title} delay={index * 100}>
                  <li className="flex flex-col gap-4 rounded-xl bg-card p-6">
                    <span
                      aria-hidden
                      className="flex size-11 items-center justify-center rounded-xl [&>svg]:size-5"
                      style={{ background: `color-mix(in oklab, var(--dig-${value.tone}-500) 12%, var(--card))`, color: `var(--dig-${value.tone}-600)` }}
                    >
                      {value.icon}
                    </span>
                    <span className="font-bold">{value.title}</span>
                    <span className="text-sm leading-7 text-muted-foreground">{value.text}</span>
                  </li>
                </Reveal>
              ))}
            </ul>
          </div>
        </section>

        <section aria-labelledby="about-team" className="mx-auto flex w-full max-w-6xl flex-col gap-12 px-4 py-24 sm:px-6">
          <div className="flex max-w-2xl flex-col gap-3">
            <h2 id="about-team" className="text-3xl font-black sm:text-4xl">
              تیمِ مدیریت
            </h2>
            <p className="text-lg leading-8 text-muted-foreground">کسانی که هر روز مسئولِ این قول‌ها هستند.</p>
          </div>
          <ul className="grid grid-cols-2 gap-4 lg:grid-cols-4">
            {TEAM.map((person, index) => (
              <Reveal asChild key={person.name} delay={index * 100}>
                <li className="group flex flex-col gap-4">
                  <div className="aspect-square overflow-hidden rounded-xl bg-muted">
                    {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
                    <img src={person.photo.src} alt={`عکسِ ${person.name}`} loading="lazy" className="size-full object-cover object-top transition-transform duration-500 group-hover:scale-105" />
                  </div>
                  <div className="flex flex-col gap-0.5">
                    <span className="font-bold">{person.name}</span>
                    <span className="text-sm text-muted-foreground">{person.role}</span>
                  </div>
                </li>
              </Reveal>
            ))}
          </ul>
        </section>

        <section className="mx-auto w-full max-w-6xl px-4 pb-24 sm:px-6">
          <div className="flex flex-col items-start gap-6 rounded-xl bg-inverse p-8 text-[var(--dig-white)] sm:flex-row sm:items-center sm:justify-between sm:p-12 [--muted-foreground:var(--dig-neutral-400)] [--primary-foreground:var(--dig-graphite-950)] [--primary:var(--dig-white)]">
            <div className="flex flex-col gap-2">
              <h2 className="text-3xl font-black">با ما کار کن</h2>
              <p className="text-muted-foreground">۶ موقعیتِ باز در فنی، محصول و فروش.</p>
            </div>
            <Button>دیدنِ موقعیت‌ها</Button>
          </div>
        </section>
      </main>
    </ControlSizeProvider>
  )
}