تماسِ ساده

"use client"

import { ChatIcon, EnvelopeIcon, PhoneIcon, TelegramLogo } from "@/components/icons"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { toFaDigits } from "@/lib/persian"

const CHANNELS = [
  { icon: <ChatIcon />, title: "گفت‌وگوی آنلاین", text: "سریع‌ترین راه؛ معمولاً زیرِ ۱۰ دقیقه.", action: "شروعِ گفت‌وگو", primary: true },
  { icon: <PhoneIcon />, title: "تلفن", text: toFaDigits("021-91001234"), action: "تماس", ltr: true },
  { icon: <EnvelopeIcon />, title: "ایمیل", text: "hello@avand.example", action: "نوشتنِ ایمیل", ltr: true },
  { icon: <TelegramLogo />, title: "تلگرام", text: "@avand_support", action: "پیام در تلگرام", ltr: true },
]

/**
 * تماسِ ساده: بدونِ فرم، فقط کانال‌ها. هر کارت آیکون، عنوان، مقدار (شماره و ایمیل با
 * جهتِ چپ‌به‌راست) و یک اقدامِ مستقیم دارد؛ سریع‌ترین راه با دکمهٔ اصلی برجسته است.
 */
export default function ContactSimpleBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <main className="mx-auto flex w-full max-w-4xl flex-col gap-12 px-4 py-20 sm:px-6">
        <header className="mx-auto flex max-w-xl flex-col items-center gap-3 text-center">
          <h1 className="text-4xl font-black">چطور کمکت کنیم؟</h1>
          <p className="text-lg leading-8 text-muted-foreground">هر راهی که راحت‌تری؛ آدمِ واقعی جواب می‌دهد.</p>
        </header>
        <ul className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          {CHANNELS.map((channel) => (
            <li key={channel.title} className="flex flex-col gap-5 rounded-xl border border-border bg-card p-6">
              <span aria-hidden className="flex size-12 items-center justify-center rounded-xl bg-subtle text-brand-secondary [&>svg]:size-6">
                {channel.icon}
              </span>
              <div className="flex flex-col gap-1">
                <span className="font-bold">{channel.title}</span>
                {channel.ltr ? (
                  <bdi dir="ltr" className="text-start text-muted-foreground">
                    {channel.text}
                  </bdi>
                ) : (
                  <span className="text-muted-foreground">{channel.text}</span>
                )}
              </div>
              <Button variant={channel.primary ? "default" : "outline"} className="mt-auto self-start">
                {channel.action}
              </Button>
            </li>
          ))}
        </ul>
      </main>
    </ControlSizeProvider>
  )
}