فوتر با خبرنامه

"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, FooterColumn, FooterColumns, FooterColumnTitle, FooterLink, FooterLinkList, FooterSocialLink, FooterSocialLinks } from "@/components/ui/footer"
import { TextField } from "@/components/ui/text-field"
import { isValidEmail, toFaDigits } from "@/lib/persian"

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

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

  return (
    <ControlSizeProvider size="xl" asChild>
      <Footer className="bg-subtle">
        <div className="mx-auto flex w-full max-w-6xl flex-col gap-12 px-4 py-16 sm:px-6">
          <div className="grid grid-cols-1 items-end gap-8 border-b border-border pb-12 lg:grid-cols-2">
            <div className="flex flex-col gap-3">
              <h2 className="text-3xl font-black text-balance">هر پنجشنبه، یک نامهٔ کوتاه</h2>
              <p className="leading-8 text-muted-foreground">تازه‌های محصول و یک نکتهٔ مالی؛ بدونِ تبلیغ.</p>
            </div>
            {done ? (
              <p role="status" className="rounded-lg bg-success-subtle p-4 font-medium text-success-subtle-foreground">
                عضو شدی؛ پنجشنبه می‌بینیمت.
              </p>
            ) : (
              <form
                className="flex flex-col gap-3 sm:flex-row sm:items-start"
                onSubmit={(event) => {
                  event.preventDefault()
                  setDone(true)
                }}
              >
                <TextField aria-label="ایمیل" name="email" type="email" dir="ltr" placeholder="name@example.com" required validate={(value) => (isValidEmail(value) ? undefined : "ایمیل معتبر نیست.")} className="flex-1" />
                <Button type="submit">عضویت</Button>
              </form>
            )}
          </div>
          <FooterColumns className="grid-cols-2 sm:grid-cols-4">
            {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>
        <FooterBottom>
          <span>© {toFaDigits(1405)} آوند</span>
          <FooterSocialLinks>
            <FooterSocialLink href="#" aria-label="اینستاگرام">
              <InstagramLogo />
            </FooterSocialLink>
            <FooterSocialLink href="#" aria-label="تلگرام">
              <TelegramLogo />
            </FooterSocialLink>
            <FooterSocialLink href="#" aria-label="لینکدین">
              <LinkedInLogo />
            </FooterSocialLink>
          </FooterSocialLinks>
        </FooterBottom>
      </Footer>
    </ControlSizeProvider>
  )
}