import type { Metadata } from "next";
import { ContactForm } from "@/components/ContactForm";
import { PageHero } from "@/components/PageHero";
import { IconInstagram, IconPhone, IconPin, IconTelegram, IconWhatsapp } from "@/components/Icons";
import { SITE } from "@/lib/site";

export const metadata: Metadata = {
  title: `تماس با ما | ${SITE.nameFa}`,
  description: `تماس با فروشگاه لوازم ورزشی سالار استور — ${SITE.address}`,
  alternates: { canonical: "/contactus" },
};

const contacts = [
  {
    href: `tel:${SITE.phone}`,
    label: SITE.phoneDisplay,
    dir: "ltr" as const,
    numeric: true,
    icon: IconPhone,
  },
  {
    href: SITE.whatsapp,
    label: SITE.phoneDisplay,
    dir: "ltr" as const,
    numeric: true,
    icon: IconWhatsapp,
  },
  {
    href: SITE.instagram,
    label: SITE.instagramHandle,
    dir: "ltr" as const,
    numeric: false,
    icon: IconInstagram,
  },
  {
    href: SITE.telegram,
    label: SITE.telegramHandle,
    dir: "ltr" as const,
    numeric: false,
    icon: IconTelegram,
  },
  {
    href: undefined,
    label: SITE.address,
    dir: undefined,
    numeric: false,
    icon: IconPin,
  },
];

export default function ContactPage() {
  return (
    <>
      <PageHero title="تماس با ما" english="Contact Us" />
      <section className="container-site py-10 md:py-14">
        <div className="grid gap-8 lg:grid-cols-[280px_1fr] items-start">
          <div className="rounded-2xl border border-black/5 divide-y divide-black/5">
            {contacts.map((item) => {
              const Icon = item.icon;
              const content = (
                <>
                  <span className="grid place-items-center size-10 rounded-full bg-zinc-50 text-brand shrink-0">
                    <Icon className="w-5 h-5" />
                  </span>
                  <span dir={item.dir} className={item.numeric ? "font-oswald tracking-wide" : ""}>
                    {item.label}
                  </span>
                </>
              );

              if (!item.href) {
                return (
                  <div key={item.label} className="flex items-center gap-3 px-4 py-4 text-sm">
                    {content}
                  </div>
                );
              }

              return (
                <a
                  key={item.href + item.label}
                  href={item.href}
                  className="flex items-center gap-3 px-4 py-4 text-sm hover:text-brand"
                >
                  {content}
                </a>
              );
            })}
          </div>
          <ContactForm />
        </div>
      </section>
    </>
  );
}