فراخوانِ دانلودِ اپ

"use client"

import * as React from "react"

import { CheckIcon, DownloadIcon, StarIcon } from "@/components/icons"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { TextField } from "@/components/ui/text-field"
import { isValidMobile } from "@/lib/persian"
import { stockImages } from "@/lib/stock-images"

const STORES = ["کافه‌بازار", "مایکت", "دانلود مستقیم"]

/**
 * فراخوانِ دانلودِ اپ: کارتِ بنفش با گوشی واقعی‌نما (عکسِ اپ در قاب)، امتیاز، دکمه‌های
 * فروشگاه‌های ایرانی و ارسالِ لینک با پیامک برای کسی که روی دسکتاپ است.
 */
export default function AppDownloadBlock() {
  const [sent, setSent] = React.useState(false)

  return (
    <ControlSizeProvider size="xl" asChild>
      <section className="mx-auto w-full max-w-6xl px-4 py-24 sm:px-6">
        <div className="grid grid-cols-1 items-center gap-10 overflow-hidden rounded-xl bg-[var(--dig-violet-700)] px-6 pt-12 text-[var(--dig-white)] [--border:var(--dig-violet-500)] [--input:var(--dig-violet-400)] [--muted-foreground:var(--dig-violet-100)] [--primary-foreground:var(--dig-violet-800)] [--primary:var(--dig-white)] sm:px-12 md:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)] md:pt-0">
          <div className="flex flex-col gap-6 md:py-14">
            <span className="flex items-center gap-2 text-sm text-muted-foreground">
              <StarIcon aria-hidden className="size-4 fill-[var(--dig-orange-400)] text-[var(--dig-orange-400)]" />
              امتیازِ ۴٫۸ از ۱۲ هزار نظر
            </span>
            <h2 className="text-3xl leading-snug font-black text-balance sm:text-4xl">آوند در جیبت؛ هر جا، هر وقت</h2>
            <p className="max-w-md leading-8 text-muted-foreground">فاکتور بفرست، هزینه ثبت کن و گزارشِ امروز را ببین، حتی بدونِ لپ‌تاپ.</p>
            <div className="flex flex-wrap gap-3">
              {STORES.map((store, index) => (
                <Button key={store} variant={index === 0 ? "default" : "outline"} className={index === 0 ? "" : "bg-[var(--dig-violet-700)] text-[var(--dig-white)] hover:bg-[var(--dig-violet-800)]"}>
                  <DownloadIcon />
                  {store}
                </Button>
              ))}
            </div>
            <div className="flex flex-col gap-2 border-t border-border pt-6">
              <span className="text-sm text-muted-foreground">روی کامپیوتری؟ لینک را پیامک می‌کنیم.</span>
              {sent ? (
                <p role="status" className="flex items-center gap-2 text-sm font-medium">
                  <CheckIcon aria-hidden className="size-4 text-[var(--dig-green-300)]" />
                  لینکِ دانلود پیامک شد.
                </p>
              ) : (
                <form
                  className="flex flex-col gap-2 sm:flex-row sm:items-start"
                  onSubmit={(event) => {
                    event.preventDefault()
                    setSent(true)
                  }}
                >
                  <TextField
                    aria-label="شماره موبایل"
                    name="mobile"
                    type="tel"
                    dir="ltr"
                    maxLength={11}
                    placeholder="09121234567"
                    required
                    validate={(value) => (isValidMobile(value) ? undefined : "شماره موبایل باید با ۰۹ شروع شود و ۱۱ رقم باشد.")}
                    className="flex-1 [&_input]:bg-[var(--dig-violet-800)]"
                  />
                  <Button type="submit" variant="outline" className="bg-[var(--dig-violet-700)] text-[var(--dig-white)] hover:bg-[var(--dig-violet-800)]">
                    ارسالِ لینک
                  </Button>
                </form>
              )}
            </div>
          </div>
          <div aria-hidden className="mx-auto w-64 self-end overflow-hidden rounded-t-[2.5rem] border-8 border-b-0 border-[var(--dig-graphite-900)] bg-inverse sm:w-72">
            {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
            <img src={stockImages.projectMobileApp.src} alt="" className="aspect-[9/14] w-full rounded-t-[2rem] object-cover" />
          </div>
        </div>
      </section>
    </ControlSizeProvider>
  )
}