aragrp/components/footer.tsx

import {
  Facebook,
  Instagram,
  Linkedin,
  Twitter,
} from "lucide-react";
import Link from "next/link";

import { Container } from "@/components/container";
import { Logo } from "@/components/logo";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { type } from "@/lib/typography";
import { cn } from "@/lib/utils";

const aboutText =
  "شرکت امین رایان اسپادان از سال ۹۱ فعالیت خود را شروع کرده و از شرکت‌های با سابقه و خوشنام طراحی سایت در اصفهان است. از جمله خدمات امین رایان، طراحی سایت، سئو، پشتیبانی فنی سایت و محتوایی سایت، پشتیبانی لینکدین و سامانه ارسال انبوه پیامک می‌باشد.";

const navigation = [
  {
    title: "صفحات",
    links: [
      { name: "صفحه اصلی", href: "/" },
      { name: "خدمات", href: "/#services" },
      { name: "نقشه راه", href: "/#roadmap" },
      { name: "وبلاگ", href: "/#blog" },
    ],
  },
  {
    title: "خدمات",
    links: [
      { name: "طراحی سایت در اصفهان", href: "#" },
      { name: "سئو در اصفهان", href: "#" },
      { name: "پشتیبانی سایت در اصفهان", href: "#" },
      { name: "ارسال انبوه در اصفهان", href: "#" },
      { name: "پشتیبانی لینکدین", href: "/#services" },
    ],
  },
];

const contactItems = [
  {
    label: "آدرس",
    value: "اصفهان، خیابان چهارباغ عباسی",
  },
  {
    label: "تلفن ثابت",
    value: "03132208628",
    href: "tel:+983132208628",
  },
  {
    label: "تلفن",
    value: "09135502791",
    href: "tel:+989135502791",
  },
  {
    label: "ایمیل",
    value: "info@aragrp.com",
    href: "mailto:info@aragrp.com",
  },
] as const;

const socialLinks = [
  { icon: Instagram, href: "https://instagram.com", label: "اینستاگرام" },
  { icon: Linkedin, href: "https://linkedin.com", label: "لینکدین" },
  { icon: Twitter, href: "https://x.com", label: "ایکس" },
  { icon: Facebook, href: "https://facebook.com", label: "فیسبوک" },
];

interface FooterSectionProps {
  className?: string;
}

export default function FooterSection({ className }: FooterSectionProps) {
  return (
    <footer
      className={cn(
        "section-shell border-t border-surface bg-section-canvas py-10 md:py-12",
        className,
      )}
    >
      <Container className="section-content">
        <div className="mb-8 border-b border-surface pb-8">
          <div className="grid grid-cols-1 gap-10 lg:grid-cols-2">
            <div>
              <h3 className={cn(type.h3, "mb-2")}>در ارتباط بمانید</h3>
              <p className={cn(type["body-sm"], "max-w-md text-muted-foreground")}>
                برای دریافت تازه‌ترین نکات طراحی سایت، سئو و رشد آنلاین، در
                خبرنامه ما عضو شوید.
              </p>
            </div>
            <form className="flex flex-col gap-3 sm:flex-row">
              <div className="relative grow">
                <Input
                  type="email"
                  placeholder="آدرس ایمیل شما"
                  className="h-[var(--btn-height-lg)]"
                />
              </div>
              <Button type="submit" size="lg" className="w-full sm:w-auto">
                عضویت
              </Button>
            </form>
          </div>
        </div>

        <nav className="grid grid-cols-1 gap-x-8 gap-y-10 border-b border-surface py-8 sm:grid-cols-2 lg:grid-cols-4 lg:gap-x-10 lg:py-10">
          <div className="sm:col-span-2 pe-0 sm:pe-6 lg:col-span-1 lg:pe-8">
            <h3 className={cn(type.h4, "mb-5")}>درباره ما</h3>
            <p
              className={cn(
                type["body-sm"],
                "text-justify text-muted-foreground [text-align-last:start]",
              )}
            >
              {aboutText}
            </p>
          </div>
          {navigation.map((section) => (
            <div key={section.title} className="text-start">
              <h3 className={cn(type.h4, "mb-5")}>{section.title}</h3>
              <ul className="m-0 list-none space-y-4 p-0">
                {section.links.map((link) => (
                  <li key={link.name}>
                    <Link
                      href={link.href}
                      className={cn(
                        type.link,
                        "block w-fit transition-colors duration-200 hover:text-primary",
                      )}
                    >
                      {link.name}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
          <div className="text-start">
            <h3 className={cn(type.h4, "mb-5")}>ارتباط با ما</h3>
            <ul className="m-0 list-none space-y-4 p-0">
              {contactItems.map((item) => (
                <li key={item.label} className={cn(type["body-sm"], "text-muted-foreground")}>
                  <span className="text-foreground">{item.label}</span>
                  {" : "}
                  {"href" in item && item.href ? (
                    <a
                      href={item.href}
                      className={cn(
                        type.link,
                        "inline transition-colors duration-200 hover:text-primary",
                      )}
                      dir="ltr"
                    >
                      {item.value}
                    </a>
                  ) : (
                    <span>{item.value}</span>
                  )}
                </li>
              ))}
            </ul>
          </div>
        </nav>

        <div className="mx-auto mt-4 py-5">
          <div className="flex flex-col items-center justify-between gap-5 text-center sm:flex-row sm:gap-6 sm:text-start">
            <Logo variant="text" uniColor />
            <p className={cn(type["body-sm"], "font-medium text-muted-foreground")}>
              © ۱۴۰۵ امین رایان، تمامی حقوق محفوظ است
            </p>
            <div className="flex items-center gap-6">
              {socialLinks.map((link) => (
                <a
                  aria-label={link.label}
                  key={link.label}
                  href={link.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-muted-foreground transition-colors duration-200 hover:text-primary"
                >
                  <link.icon
                    size={20}
                    className="transition-transform hover:scale-110"
                  />
                </a>
              ))}
            </div>
          </div>
        </div>
      </Container>
    </footer>
  );
}