import type { Metadata } from "next";
import { site } from "@/data/site";
import { PageHeader } from "@/components/ui/PageHeader";
import { Container } from "@/components/ui/Container";
import { ContactForm } from "@/components/contact/ContactForm";
import { MailIcon, MapPinIcon, PhoneIcon } from "@/components/icons";

const mapQuery = encodeURIComponent(site.address);
const mapEmbedSrc = `https://maps.google.com/maps?q=${mapQuery}&hl=fa&z=${site.map.zoom}&output=embed`;
const mapLink = `https://www.google.com/maps/search/?api=1&query=${mapQuery}`;

export const metadata: Metadata = {
  title: "تماس با ما",
  description: `${site.address} — تلفن ${site.phones.join(" و ")}`,
  alternates: { canonical: "/contact" },
};

export default function ContactPage() {
  return (
    <>
      <PageHeader
        title="تماس با ما"
        titleEn="CONTACT US"
        description="در دسترس هستیم. در صورت نیاز به کمک سریع با ما تماس بگیرید."
      />
      <Container className="grid gap-8 py-10 lg:grid-cols-2">
        <div className="rounded-xl border border-line bg-white p-6">
          <h2 className="mb-5 text-lg font-extrabold text-navy">اطلاعات تماس</h2>
          <ul className="space-y-5 text-[15px] leading-8">
            <li className="flex gap-3">
              <span className="mt-1 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-navy text-white">
                <MapPinIcon className="h-4 w-4" />
              </span>
              <div>
                <p className="text-xs font-bold text-navy">آدرس</p>
                <p className="text-muted">{site.address}</p>
              </div>
            </li>
            <li className="flex gap-3">
              <span className="mt-1 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-navy text-white">
                <PhoneIcon className="h-4 w-4" />
              </span>
              <div>
                <p className="text-xs font-bold text-navy">تلفن</p>
                <p className="text-navy">{site.phones.join(" — ")}</p>
                <p className="text-sm text-muted">فکس: {site.fax}</p>
              </div>
            </li>
            <li className="flex gap-3">
              <span className="mt-1 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-navy text-white">
                <MailIcon className="h-4 w-4" />
              </span>
              <div>
                <p className="text-xs font-bold text-navy">ایمیل</p>
                <div className="space-y-0.5 font-display text-sm tracking-wide">
                  {site.emails.map((email) => (
                    <p key={email}>
                      <a href={`mailto:${email}`} className="text-muted hover:text-navy">
                        {email}
                      </a>
                    </p>
                  ))}
                </div>
              </div>
            </li>
          </ul>
        </div>
        <ContactForm />
      </Container>
      <Container className="pb-14">
        <div className="overflow-hidden rounded-xl border border-line">
          <iframe
            title="موقعیت شرکت فنی مهندسی سپهر صنعت"
            src={mapEmbedSrc}
            className="h-[240px] w-full border-0 sm:h-[380px]"
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
          />
        </div>
        <a
          href={mapLink}
          target="_blank"
          rel="noreferrer"
          className="mt-3 inline-flex items-center gap-2 text-sm font-bold text-brand hover:text-navy"
        >
          <MapPinIcon className="h-4 w-4" />
          مشاهده در نقشه
        </a>
      </Container>
    </>
  );
}