import type { Metadata } from "next";
import Container from "@/components/Container";
import PageBanner from "@/components/PageBanner";
import ContactInfo from "@/components/ContactInfo";
import ContactForm from "@/components/ContactForm";

export const metadata: Metadata = {
  title: "تماس با ما | آراد آریسمان",
  description:
    "راه‌های ارتباطی با شرکت آراد آریسمان؛ آدرس، تلفن تماس و فرم ارسال پیام.",
};

const mapQuery = encodeURIComponent(
  "قم، شهرک صنعتی شکوهیه، خیابان شهید بروجردی"
);

export default function ContactPage() {
  return (
    <>
      <PageBanner
        title="تماس با ما"
        subtitle="سوالات، پیشنهادات یا درخواست مشاوره خود را برای ما بفرستید؛ کارشناسان آراد آریسمان در اسرع وقت پاسخگوی شما خواهند بود."
        breadcrumb="تماس با ما"
      />

      <section className="py-16 sm:py-20">
        <Container>
          <ContactInfo />

          <div className="mt-14 grid grid-cols-1 lg:grid-cols-5 gap-10">
            <div className="lg:col-span-3 rounded-2xl border border-black/5 bg-white p-6 sm:p-8 shadow-sm">
              <h2 className="text-xl font-bold text-secondary">
                فرم ارسال پیام
              </h2>
              <p className="mt-2 text-sm text-foreground">
                فرم زیر را تکمیل کنید تا در اسرع وقت با شما تماس بگیریم.
              </p>
              <div className="mt-6">
                <ContactForm />
              </div>
            </div>

            <div className="lg:col-span-2 flex flex-col gap-5">
              <div className="relative flex-1 min-h-[280px] rounded-2xl overflow-hidden border border-black/5 shadow-sm">
                <iframe
                  title="نقشه آراد آریسمان"
                  src={`https://www.google.com/maps?q=${mapQuery}&output=embed`}
                  className="absolute inset-0 h-full w-full border-0"
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                />
              </div>

              <div className="rounded-2xl bg-secondary p-7 text-white">
                <h3 className="font-bold">ما را در شبکه‌های اجتماعی دنبال کنید</h3>
                <div className="mt-5 flex items-center gap-4">
                  <a
                    href="#"
                    aria-label="تلگرام"
                    className="flex h-10 w-10 items-center justify-center rounded-full bg-white/10 hover:bg-accent hover:text-secondary transition-colors"
                  >
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                      <path
                        d="M21.5 3.5 2.8 10.9c-1 .4-1 1.7.1 2l4.7 1.5 1.8 5.6c.2.6 1 .8 1.4.3l2.5-2.7 4.9 3.6c.6.5 1.6.1 1.8-.6l3-15.6c.2-1-.7-1.8-1.5-1.5z"
                        fill="currentColor"
                      />
                    </svg>
                  </a>
                  <a
                    href="#"
                    aria-label="واتساپ"
                    className="flex h-10 w-10 items-center justify-center rounded-full bg-white/10 hover:bg-accent hover:text-secondary transition-colors"
                  >
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                      <path
                        d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.4A10 10 0 1 0 12 2Zm0 18.2a8.1 8.1 0 0 1-4.2-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1-.2.2-.7.8-.8 1-.2.2-.3.2-.5.1a6.7 6.7 0 0 1-2-1.2 7.4 7.4 0 0 1-1.4-1.7c-.1-.2 0-.4.1-.5l.4-.4c.1-.2.2-.3.2-.5.1-.2 0-.4 0-.5-.1-.1-.6-1.5-.8-2-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.2.2-.9.9-.9 2.2s.9 2.6 1.1 2.8c.1.2 1.9 3 4.7 4.1.7.3 1.2.4 1.6.6.7.2 1.3.2 1.8.1.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.2-.3-.2-.5-.3Z"
                        fill="currentColor"
                      />
                    </svg>
                  </a>
                  <a
                    href="tel:09104067935"
                    aria-label="تماس تلفنی"
                    className="flex h-10 w-10 items-center justify-center rounded-full bg-white/10 hover:bg-accent hover:text-secondary transition-colors"
                  >
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                      <path
                        d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1L6.6 10.8z"
                        fill="currentColor"
                      />
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </Container>
      </section>
    </>
  );
}
