import type { Metadata } from "next";
import { ContentPageShell } from "@/components/ContentPageShell";
import { ContactForm } from "@/components/ContactForm";
import { site, socials } from "@/data/home";

export const metadata: Metadata = {
  title: "تماس با ما",
  description:
    "با تیم مشکی در تماس باشید — فرم تماس، تلفن، ایمیل و آدرس دفتر قم.",
  alternates: { canonical: "/contact" },
};

export default function ContactPage() {
  return (
    <ContentPageShell flushTop>
      <section>
        <div className="page-title-band">
          <div className="relative mx-auto max-w-7xl px-5 pb-9 pt-[calc(var(--header-height)+0.15rem)] lg:px-8 lg:pb-12 lg:pt-[calc(var(--header-height)+0.3rem)]">
            <p
              aria-hidden
              className="latin pointer-events-none absolute inset-x-5 top-[calc(var(--header-height)+0.5rem)] z-0 text-[clamp(1.75rem,5.5vw,3.75rem)] font-light uppercase leading-none tracking-[0.05em] text-ink/[0.07] lg:inset-x-8 lg:top-[calc(var(--header-height)+0.65rem)]"
            >
              Contact
            </p>
            <div className="reveal relative z-10 max-w-2xl">
              <h1 className="whitespace-normal text-[clamp(1.35rem,3.6vw,2.75rem)] font-normal leading-tight tracking-tight text-ink">
                تماس با ما
              </h1>
              <p className="mt-1 text-sm leading-6 text-muted md:text-base">
                سوالی دارید یا می‌خواهید پروژه‌تان را شروع کنید؟ با تیم مشکی در
                تماس باشید.
              </p>
            </div>
          </div>
        </div>

        <div className="relative flex min-h-[calc(100svh-var(--header-height)-7.5rem)] items-center overflow-hidden bg-[linear-gradient(180deg,#fafafa_0%,#eef1f5_45%,#f3f5f7_100%)] py-16 lg:py-20">
          <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_80%_20%,rgba(196,77,184,0.1),transparent_50%)]" />

          <div className="relative mx-auto grid w-full max-w-7xl items-center gap-14 px-5 lg:grid-cols-[1fr_1.1fr] lg:gap-16 lg:px-8">
            <div className="reveal flex min-w-0 flex-col gap-8">
              <div className="grid grid-cols-[auto_minmax(0,1fr)] items-baseline gap-x-4 gap-y-6">
                <span className="text-sm text-muted">شماره تماس</span>
                <a
                  href={site.phoneHref}
                  className="latin link-hover justify-self-start text-lg font-medium tracking-tight text-ink md:text-xl"
                  dir="ltr"
                >
                  {site.phone}
                </a>

                <span className="text-sm text-muted">ایمیل</span>
                <a
                  href={`mailto:${site.email}`}
                  className="latin link-hover justify-self-start text-sm text-ink-soft md:text-base"
                  dir="ltr"
                >
                  {site.email}
                </a>

                <span className="text-sm text-muted">آدرس</span>
                <a
                  href={site.mapUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="link-hover justify-self-start text-start text-sm leading-7 text-ink-soft md:text-base md:leading-8"
                >
                  {site.address}
                </a>

                <span className="pt-1 text-sm text-muted">شبکه‌های اجتماعی</span>
                <div className="flex flex-wrap items-center justify-start gap-3 pt-1">
                  {socials.map((social) => (
                    <a
                      key={social.label}
                      href={social.href}
                      target="_blank"
                      rel="noopener noreferrer"
                      aria-label={social.label}
                      title={social.label}
                      className="flex h-11 w-11 items-center justify-center rounded-full border border-line/70 bg-white/60 text-ink-soft shadow-[0_8px_20px_rgba(14,17,22,0.04)] backdrop-blur-sm transition hover:border-ink/20 hover:text-ink"
                    >
                      <svg
                        viewBox="0 0 24 24"
                        fill="currentColor"
                        className="h-4 w-4"
                        aria-hidden
                      >
                        <path d={social.icon} />
                      </svg>
                    </a>
                  ))}
                </div>
              </div>

              <div className="relative overflow-hidden rounded-[1.5rem] border border-line/70 bg-white/50 shadow-[0_16px_40px_rgba(14,17,22,0.05)] backdrop-blur-sm">
                <div className="relative aspect-[16/10] w-full overflow-hidden sm:aspect-[2/1]">
                  <iframe
                    title="موقعیت دفتر مشکی روی نقشه"
                    src={`https://maps.google.com/maps?q=${site.mapLat},${site.mapLng}&z=16&hl=fa&output=embed`}
                    className="absolute inset-0 h-full w-full border-0"
                    loading="lazy"
                    referrerPolicy="no-referrer-when-downgrade"
                    allowFullScreen
                  />
                </div>
                <a
                  href={site.mapUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="absolute bottom-3 inset-inline-3 inline-flex max-w-max items-center gap-2 rounded-full border border-white/70 bg-white/90 px-3.5 py-2 text-sm text-ink shadow-sm backdrop-blur-md transition hover:bg-white"
                >
                  <svg
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    className="h-4 w-4 shrink-0 text-accent"
                    aria-hidden
                  >
                    <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z" />
                  </svg>
                  مشاهده روی نقشه
                </a>
              </div>
            </div>

            <div className="reveal reveal-delay-1 relative min-w-0 overflow-hidden rounded-[1.75rem] border border-white/70 bg-white/45 p-5 shadow-[0_20px_50px_rgba(14,17,22,0.06)] backdrop-blur-xl sm:p-6 md:p-8">
              <div
                aria-hidden
                className="pointer-events-none absolute inset-0 bg-[linear-gradient(145deg,rgba(255,255,255,0.75)_0%,rgba(255,255,255,0.2)_40%,transparent_70%)]"
              />
              <div className="relative">
                <h2 className="mb-2 text-xl font-normal text-ink md:text-2xl">
                  فرم تماس
                </h2>
                <p className="mb-8 text-sm text-muted">
                  ما همیشه دنبال دوستای جدید هستیم.
                </p>

                <ContactForm variant="light" />
              </div>
            </div>
          </div>
        </div>
      </section>
    </ContentPageShell>
  );
}