"use client";
import ContactForm from "@/components/contact/ContactForm";
import { useLocale, useTranslations } from "next-intl";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import React, { useState } from "react";
import { META_AR } from "@/seo/seo-ar";
import { META_EN } from "@/seo/seo-en";
import { DOMAIN, ROUTES } from "@/routes";

const page = () => {
  const t = useTranslations("Common");
  const locale = useLocale();
  const META = locale === "ar" ? META_AR : META_EN;
  const [imageError, setImageError] = useState(false);

  return (
    <>
      <Head>
        <title>{META.CONTACT_US.title}</title>
        <meta name="description" content={META.CONTACT_US.description} />
        {/* Canonical URL */}
        <link rel="canonical" href={`${DOMAIN}${ROUTES.CONTACT_US}`} />
        {/* Open Graph Meta Tags */}
        <meta property="og:title" content={META.CONTACT_US.title} />
        <meta property="og:description" content={META.CONTACT_US.description} />
        <meta property="og:type" content="website" />
        <meta property="og:url" content={`${DOMAIN}${ROUTES.CONTACT_US}`} />
        {/* Twitter Meta Tags */}
        <meta name="twitter:title" content={META.CONTACT_US.title} />
        <meta
          name="twitter:description"
          content={META.CONTACT_US.description}
        />
        {/* Keywords */}
        <meta name="keywords" content={META.CONTACT_US.keywords} />
      </Head>

      <div className="max-w-section m-auto pt-10 lg:pt-20">
        <div className="grid grid-cols-12 gap-4 mb-24 lg:mb-36">
          <div className="col-span-12 lg:col-span-6 !order-2 lg:!order-1">
            <h2 className="main-heading">{t("contact_h")}</h2>
            <p className="caption my-8">{t("contact_b")}</p>

            <ContactForm />
          </div>

          <div className="col-span-12 lg:col-span-6 order-1 lg:order-2">
            <Link
              href={"https://maps.app.goo.gl/uvGu22sCT3mSnXrs6?g_st=aw"}
              target="_blank"
              rel="noopener noreferrer"
            >
              <div className="relative w-full h-[400px] md:h-[500px]">
                {imageError ? (
                  <div className="w-full h-full bg-gray-200 flex items-center justify-center">
                    <span className="text-gray-500">Map image unavailable</span>
                  </div>
                ) : (
                  <Image
                    src={"/images/contact-us.png"}
                    alt="Map showing the location of our office in Saudi Arabia"
                    fill
                    className="object-cover mx-auto"
                    onError={() => setImageError(true)}
                    loading="lazy"
                    quality={80}
                  />
                )}
              </div>
            </Link>
          </div>
        </div>
      </div>
    </>
  );
};

export default page;
