import type { Metadata } from "next";
import { Camera, Clock3, MapPin, MessageCircle, Phone } from "lucide-react";
import { ContactForm } from "@/components/contact-form";
import { PageHero, SectionHeading } from "@/components/sections";
import { contact } from "@/data/site";

export const metadata: Metadata = {
  title: "تماس با ما",
  description: "شماره تماس، آدرس کارخانه و فرم ارسال پیام مستقیم به تیم آینه هوشمند گلسموند.",
  alternates: { canonical: "/contact" },
  openGraph: {
    title: "تماس با گلسموند",
    description: "راه‌های ارتباط مستقیم با تیم فروش و پشتیبانی گلسموند.",
    url: "/contact",
    images: ["/images/hero.jpg"],
  },
};

export default function ContactPage() {
  return (
    <>
      <PageHero englishTitle="CONTACT US" title="با ما تماس بگیرید" />

      <section className="contact-section">
        <div className="container">
          <SectionHeading
            eyebrow=""
            englishTitle="CONTACT INFO"
            title="اطلاعات تماس با ما"
            description="هفت روز هفته می‌توانید از راه‌های زیر با تیم گلسموند در ارتباط باشید."
          />

          <div className="contact-cards">
            <article>
              <span><Phone /></span>
              <h3>شماره تماس</h3>
              <a href={contact.mobileHref}>{contact.mobile}</a>
            </article>
            <article>
              <span><MapPin /></span>
              <h3>آدرس کارخانه</h3>
              <p>{contact.address}</p>
            </article>
            <article>
              <span><Clock3 /></span>
              <h3>زمان پاسخ‌گویی</h3>
              <p>هفت روز هفته</p>
            </article>
          </div>

          <div className="contact-main">
            <div className="form-panel">
              <SectionHeading
                eyebrow=""
                englishTitle="SEND A MESSAGE"
                title="پیامی برای ما ارسال کنید"
                description="فرم را تکمیل کنید تا پیام شما مستقیم برای تیم گلسموند ثبت شود."
                align="start"
              />
              <ContactForm />
            </div>

            <aside className="contact-aside">
              <h3>در شبکه‌های اجتماعی همراه ما باشید</h3>
              <p>نمونه محصولات تازه، خبرها و پروژه‌های اجراشده گلسموند را ببینید.</p>
              <a href={contact.instagram} target="_blank" rel="noreferrer">
                <Camera />
                اینستاگرام گلسموند
              </a>
              <a href={contact.whatsapp} target="_blank" rel="noreferrer">
                <MessageCircle />
                گفت‌وگو در واتساپ
              </a>
            </aside>
          </div>
        </div>
      </section>

      <section className="map-section" aria-label="موقعیت گلسموند روی نقشه">
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3282.943383616102!2d50.85739!3d34.630871!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3f93bb7deb55b5fb%3A0xc59744e996908549!2z2YXYrNiq2YXYuSDYqtis2KfYsduMINmF2LPaqdmI2YbbjCDZgdix2K_ZiNiz!5e0!3m2!1sfa!2s!4v1704776476571!5m2!1sfa!2s"
          width="100%"
          height="480"
          style={{ border: 0 }}
          allowFullScreen
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
          title="موقعیت کارخانه گلسموند"
        />
      </section>
    </>
  );
}