import PageHero from "@/components/PageHero";
import ContactForm from "./ContactForm";
import styles from "./contact.module.css";

export const metadata = {
  title: "تماس با ما",
  description:
    "راه‌های ارتباطی کلینیک دندانپزشکی نگین در قم: آدرس بلوار امین، تلفن ۰۲۵-۳۲۹۴۵۰۷۷ و فرم تماس آنلاین.",
};

const INFO = [
  {
    en: "Address",
    fa: "آدرس",
    value: "قم، بلوار امین، کوچه ۲۱، شماره ۵ (روبروی صدا و سیما)",
    icon: (
      <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.8">
        <path d="M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11z" />
        <circle cx="12" cy="10" r="2.6" />
      </svg>
    ),
  },
  {
    en: "Phone",
    fa: "تلفن تماس",
    value: "۰۲۵ - ۳۲۹۴۵۰۷۷",
    href: "tel:+982532945077",
    ltr: true,
    icon: (
      <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.8">
        <path d="M4 5c0-.6.4-1 1-1h3l2 5-2.5 1.5a12 12 0 0 0 5.5 5.5L18 18l5 2v3c0 .6-.4 1-1 1A17 17 0 0 1 4 5z" />
      </svg>
    ),
  },
  {
    en: "Email",
    fa: "آدرس الکترونیکی",
    value: "info@negindentalclinic.ir",
    href: "mailto:info@negindentalclinic.ir",
    icon: (
      <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.8">
        <rect x="3" y="5" width="18" height="14" rx="2" />
        <path d="m4 7 8 6 8-6" />
      </svg>
    ),
  },
];

export default function ContactPage() {
  return (
    <>
      <PageHero
        en="Contact Us"
        fa="ارتباط با ما"
        lead="نظرات خود را با ما در میان بگذارید…"
      />

      <section className="section">
        <div className="container">
          <h2 className="visually-hidden">راه‌های ارتباطی</h2>
          <div className={styles.infoGrid}>
            {INFO.map((i) => (
              <article key={i.en} className={styles.infoCard}>
                <span className={styles.infoIcon}>{i.icon}</span>
                <span className="card__en">{i.en}</span>
                <h3>{i.fa}</h3>
                {i.href ? (
                  <a href={i.href} dir={i.ltr ? "ltr" : undefined}>
                    {i.value}
                  </a>
                ) : (
                  <p dir={i.ltr ? "ltr" : undefined}>{i.value}</p>
                )}
              </article>
            ))}
          </div>

          <div className={styles.formWrap}>
            <div className="sec-head" style={{ marginBottom: 32 }}>
              <span className="sec-head__en">Share your comments with us</span>
              <h2 className="sec-head__fa">ارسال پیام</h2>
            </div>
            <ContactForm />
          </div>
        </div>
      </section>

      <section className={styles.mapSection}>
        <iframe
          title="نقشه کلینیک دندانپزشکی نگین"
          src="https://www.google.com/maps?q=%D8%A8%D9%84%D9%88%D8%A7%D8%B1%20%D8%A7%D9%85%DB%8C%D9%86%20%D9%82%D9%85&output=embed"
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
        />
      </section>
    </>
  );
}