فوترِ اپ و تماس

"use client"

import { DownloadIcon, EnvelopeIcon, PhoneIcon } from "@/components/icons"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { Footer, FooterBottom, FooterBottomLinks, FooterColumn, FooterColumnTitle, FooterLink, FooterLinkList } from "@/components/ui/footer"
import { toFaDigits } from "@/lib/persian"

/**
 * فوترِ اپ و خدمات: برند با دکمه‌های دانلود از فروشگاه‌های ایرانی، راه‌های تماسِ مستقیم
 * (تلفن و ایمیل با جهتِ چپ‌به‌راست)، دو ستونِ لینک و نمادِ اعتماد در ردیفِ پایین.
 */
export default function FooterAppBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <Footer>
        <div className="mx-auto grid w-full max-w-6xl grid-cols-1 gap-12 px-4 py-14 sm:px-6 md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)_minmax(0,1fr)]">
          <div className="flex flex-col gap-5">
            <span className="flex items-center gap-2 text-lg font-black">
              <span aria-hidden className="size-3 rounded-sm bg-[var(--dig-violet-500)]" />
              آوند
            </span>
            <p className="max-w-sm text-sm leading-7 text-muted-foreground">حساب‌وکتابِ کسب‌وکار، روی وب و موبایل.</p>
            <div className="flex flex-wrap gap-2">
              {["کافه‌بازار", "مایکت", "دانلودِ مستقیم"].map((store) => (
                <Button key={store} variant="outline">
                  <DownloadIcon />
                  {store}
                </Button>
              ))}
            </div>
          </div>
          <FooterColumn>
            <FooterColumnTitle>تماس</FooterColumnTitle>
            <ul className="flex flex-col gap-3 text-sm">
              <li>
                <a href="tel:02191001234" className="flex items-center gap-2 text-muted-foreground hover:text-foreground">
                  <PhoneIcon aria-hidden className="size-4" />
                  <bdi dir="ltr">{toFaDigits("021-91001234")}</bdi>
                </a>
              </li>
              <li>
                <a href="mailto:hello@avand.example" className="flex items-center gap-2 text-muted-foreground hover:text-foreground">
                  <EnvelopeIcon aria-hidden className="size-4" />
                  <bdi dir="ltr">hello@avand.example</bdi>
                </a>
              </li>
              <li className="text-muted-foreground">شنبه تا چهارشنبه، ۹ تا ۱۸</li>
            </ul>
          </FooterColumn>
          <FooterColumn>
            <FooterColumnTitle>آوند</FooterColumnTitle>
            <FooterLinkList>
              <FooterLink href="#">امکانات</FooterLink>
              <FooterLink href="#">قیمت‌ها</FooterLink>
              <FooterLink href="#">راهنما</FooterLink>
              <FooterLink href="#">درباره ما</FooterLink>
            </FooterLinkList>
          </FooterColumn>
        </div>
        <FooterBottom>
          <span>© {toFaDigits(1405)} آوند · دارای نمادِ اعتمادِ الکترونیکی</span>
          <FooterBottomLinks>
            <a href="#" className="hover:text-foreground">
              حریمِ خصوصی
            </a>
            <a href="#" className="hover:text-foreground">
              شرایطِ استفاده
            </a>
          </FooterBottomLinks>
        </FooterBottom>
      </Footer>
    </ControlSizeProvider>
  )
}