فوترِ تیره

"use client"

import * as React from "react"

import { InstagramLogo, LinkedInLogo, TelegramLogo } from "@/components/icons"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import {
  Footer,
  FooterBottom,
  FooterBottomLinks,
  FooterBrand,
  FooterColumn,
  FooterColumns,
  FooterColumnTitle,
  FooterContent,
  FooterLink,
  FooterLinkList,
  FooterSocialLink,
  FooterSocialLinks,
} from "@/components/ui/footer"
import { TextField } from "@/components/ui/text-field"
import { toast } from "@/components/ui/toast"
import { isValidEmail, toFaDigits } from "@/lib/persian"

const COLUMNS = [
  { title: "محصول", links: ["امکانات", "قیمت‌ها", "تازه‌ها", "اپ موبایل"] },
  { title: "شرکت", links: ["درباره ما", "فرصت‌های شغلی", "مجله", "تماس"] },
  { title: "منابع", links: ["راهنما", "API", "وضعیتِ سرویس", "امنیت"] },
]

/**
 * فوترِ تیرهٔ کامل: برند با جملهٔ کوتاه و شبکه‌های اجتماعی، سه ستونِ لینک و خبرنامه در
 * ردیفِ بالا؛ کپی‌رایت و لینک‌های حقوقی در ردیفِ پایین. رنگ‌ها با بازتعریفِ متغیرها.
 */
export default function FooterDarkBlock() {
  const [done, setDone] = React.useState(false)

  return (
    <ControlSizeProvider size="xl" asChild>
      <Footer className="border-inverse-border bg-inverse text-[var(--dig-white)] [--background:var(--inverse)] [--border:var(--inverse-border)] [--foreground:var(--dig-white)] [--input:var(--inverse-border)] [--muted-foreground:var(--dig-neutral-400)] [--primary-foreground:var(--dig-graphite-950)] [--primary:var(--dig-white)]">
        <FooterContent className="gap-12 lg:flex-row">
          <FooterBrand className="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="text-sm leading-7 text-muted-foreground">حساب‌وکتابِ ساده برای کسب‌وکارهای کوچک و متوسط.</p>
            <FooterSocialLinks>
              <FooterSocialLink href="#" aria-label="اینستاگرام">
                <InstagramLogo />
              </FooterSocialLink>
              <FooterSocialLink href="#" aria-label="تلگرام">
                <TelegramLogo />
              </FooterSocialLink>
              <FooterSocialLink href="#" aria-label="لینکدین">
                <LinkedInLogo />
              </FooterSocialLink>
            </FooterSocialLinks>
          </FooterBrand>
          <FooterColumns className="flex-1 sm:grid-cols-3">
            {COLUMNS.map((column) => (
              <FooterColumn key={column.title}>
                <FooterColumnTitle>{column.title}</FooterColumnTitle>
                <FooterLinkList>
                  {column.links.map((link) => (
                    <FooterLink key={link} href="#">
                      {link}
                    </FooterLink>
                  ))}
                </FooterLinkList>
              </FooterColumn>
            ))}
          </FooterColumns>
          <div className="flex flex-col gap-3 lg:w-72">
            <span className="text-sm font-semibold">خبرنامه</span>
            {done ? (
              <p role="status" className="text-sm text-[var(--dig-green-400)]">
                عضو شدی؛ پنجشنبه می‌بینیمت.
              </p>
            ) : (
              <form
                className="flex flex-col gap-2"
                onSubmit={(event) => {
                  event.preventDefault()
                  setDone(true)
                  toast.success("عضویت ثبت شد.")
                }}
              >
                <TextField
                  aria-label="ایمیل"
                  name="email"
                  type="email"
                  dir="ltr"
                  placeholder="name@example.com"
                  required
                  validate={(value) => (isValidEmail(value) ? undefined : "ایمیل معتبر نیست.")}
                  className="[&_input]:bg-inverse-raised"
                />
                <Button type="submit">عضویت</Button>
              </form>
            )}
          </div>
        </FooterContent>
        <FooterBottom>
          <span>© {toFaDigits(1405)} آوند. همهٔ حقوق محفوظ است.</span>
          <FooterBottomLinks>
            <a href="#" className="hover:text-foreground">
              حریم خصوصی
            </a>
            <a href="#" className="hover:text-foreground">
              شرایط استفاده
            </a>
          </FooterBottomLinks>
        </FooterBottom>
      </Footer>
    </ControlSizeProvider>
  )
}