شروع در سه قدم

"use client"

import { CalendarIcon, CheckIcon, ShareIcon } from "@/components/icons"
import { Avatar } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { Reveal } from "@/components/ui/reveal"
import { Switch } from "@/components/ui/switch"
import { toFaDigits } from "@/lib/persian"
import { stockImages } from "@/lib/stock-images"

/**
 * شروع در سه قدم: هر قدم کارتی با شمارهٔ درشت، تیتر و توضیح، و یک پیش‌نمایشِ کوچکِ واقعی
 * از همان قدم (اتصالِ تقویم، چیدنِ برنامه، اشتراکِ زمانِ آزاد)؛ خطِ نقطه‌چین قدم‌ها را
 * در دسکتاپ به هم وصل می‌کند.
 */
export default function ProcessStepsBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <section aria-labelledby="ps-title" className="w-full bg-[linear-gradient(180deg,var(--background),var(--subtle))] py-24">
        <div className="mx-auto flex w-full max-w-6xl flex-col gap-14 px-4 sm:px-6">
          <div className="mx-auto flex max-w-2xl flex-col items-center gap-3 text-center">
            <span className="text-sm font-semibold text-brand-secondary">شروعِ سریع</span>
            <h2 id="ps-title" className="text-3xl leading-snug font-black text-balance sm:text-4xl">
              در سه قدم راه بیفتید
            </h2>
            <p className="leading-7 text-muted-foreground">تقویمِ فعلی‌تان را نگه دارید؛ ساعت فقط رویش سوار می‌شود.</p>
          </div>

          <ol className="relative grid grid-cols-1 gap-6 md:grid-cols-3">
            <span aria-hidden className="absolute inset-x-[16%] top-5 hidden border-t-2 border-dashed border-border md:block" />

            <Reveal asChild>
              <li className="relative flex flex-col gap-5">
                <StepHead n={1} title="تقویم را وصل کنید" text="با حسابِ کاری وارد شوید؛ رویدادهای قبلی همان‌جا می‌مانند." />
                <div className="flex flex-col gap-3 rounded-xl border border-border bg-card p-4 shadow-sm">
                  <Button variant="outline" fullWidth>
                    <CalendarIcon />
                    ادامه با تقویمِ کاری
                  </Button>
                  <ul className="flex flex-col gap-2 text-sm">
                    {["کار", "شخصی", "خانواده"].map((name, index) => (
                      <li key={name} className="flex items-center justify-between">
                        <span className="flex items-center gap-2">
                          <span aria-hidden className={["size-2.5 rounded-full bg-[var(--dig-blue-500)]", "size-2.5 rounded-full bg-[var(--dig-green-500)]", "size-2.5 rounded-full bg-[var(--dig-orange-500)]"][index]} />
                          {name}
                        </span>
                        <span className="flex items-center gap-1 text-success">
                          <CheckIcon aria-hidden className="size-4" />
                          همگام
                        </span>
                      </li>
                    ))}
                  </ul>
                </div>
              </li>
            </Reveal>

            <Reveal asChild delay={120}>
              <li className="relative flex flex-col gap-5">
                <StepHead n={2} title="هفته را بچینید" text="کارها را روی روزها بکشید؛ زمانِ خالی خودش پیدا می‌شود." />
                <div aria-hidden className="grid grid-cols-3 gap-2 rounded-xl border border-border bg-card p-4 shadow-sm">
                  {["شنبه", "یکشنبه", "دوشنبه"].map((day, index) => (
                    <div key={day} className="flex flex-col gap-1.5">
                      <span className="text-xs text-muted-foreground">{day}</span>
                      <span className="h-8 rounded-md bg-[var(--dig-blue-100)] dark:bg-[var(--dig-blue-900)]" />
                      {index === 1 ? (
                        <span className="flex h-14 items-start rounded-md border-s-4 border-[var(--dig-violet-500)] bg-[var(--dig-violet-100)] p-1.5 text-xs font-semibold dark:bg-[var(--dig-violet-900)]">نوشتنِ گزارش</span>
                      ) : (
                        <span className="h-14 rounded-md bg-muted" />
                      )}
                      <span className="h-6 rounded-md bg-[var(--dig-orange-100)] dark:bg-[var(--dig-orange-900)]" />
                    </div>
                  ))}
                </div>
              </li>
            </Reveal>

            <Reveal asChild delay={240}>
              <li className="relative flex flex-col gap-5">
                <StepHead n={3} title="زمانِ آزاد را بفرستید" text="لینکِ رزرو بسازید؛ دیگران فقط ساعت‌های خالی را می‌بینند." />
                <div className="flex flex-col gap-3 rounded-xl border border-border bg-card p-4 shadow-sm">
                  <div className="flex items-center gap-3">
                    <Avatar src={stockImages.personWoman2.src} alt="" />
                    <span className="flex flex-1 flex-col">
                      <span className="text-sm font-bold">جلسهٔ آشنایی</span>
                      <span className="text-xs text-muted-foreground">{toFaDigits(30)} دقیقه، تماسِ تصویری</span>
                    </span>
                    <Switch defaultChecked aria-label="فعال بودنِ لینک" size="sm" />
                  </div>
                  <Button variant="secondary" fullWidth>
                    <ShareIcon />
                    کپیِ لینکِ رزرو
                  </Button>
                </div>
              </li>
            </Reveal>
          </ol>
        </div>
      </section>
    </ControlSizeProvider>
  )
}

function StepHead({ n, title, text }: { n: number; title: string; text: string }) {
  return (
    <div className="flex flex-col gap-3">
      <span aria-hidden className="relative flex size-10 items-center justify-center rounded-full bg-foreground font-bold text-background ring-8 ring-background tabular-nums">
        {toFaDigits(n)}
      </span>
      <h3 className="text-xl font-bold">{title}</h3>
      <p className="leading-7 text-muted-foreground">{text}</p>
    </div>
  )
}