import { ContactForm } from "@/app/components/contact-form";
import { site } from "@/lib/site-data";

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

const branches = [
  {
    index: "۰۱",
    city: "Tehran",
    cityFa: "تهران",
    title: "شعبه مرکزی",
    lines: ["شهرک غرب", "مجتمع تجاری پلاتین، طبقه چهارم", "مبلمان هومت"],
    mapQuery: "تهران شهرک غرب مجتمع تجاری پلاتین مبلمان هومت",
  },
  {
    index: "۰۲",
    city: "Qom",
    cityFa: "قم",
    title: "نماینده فروش قم",
    lines: ["بازار مبل گنجوی", "بلوار نظامی گنجوی، بین کوی ۵ و ۷", "مبلمان هومت"],
    mapQuery: "قم بازار مبل گنجوی بلوار نظامی گنجوی مبلمان هومت",
  },
  {
    index: "۰۳",
    city: "Qom",
    cityFa: "قم",
    title: "کارخانه شعبه قم",
    lines: ["بلوار حضرت معصومه، کوی ۳۵", "جنب قالیشویی امیرکبیر", "کارخانه مبلمان هومت"],
    mapQuery: "قم بلوار حضرت معصومه کوی 35 کارخانه مبلمان هومت",
  },
];

function MapPinIcon() {
  return (
    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" aria-hidden="true">
      <path
        d="M12 21s6.5-5.2 6.5-10.2A6.5 6.5 0 0 0 12 4a6.5 6.5 0 0 0-6.5 6.8C5.5 15.8 12 21 12 21Z"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinejoin="round"
      />
      <circle cx="12" cy="10.6" r="2.2" stroke="currentColor" strokeWidth="1.6" />
    </svg>
  );
}

export default function ContactPage() {
  return (
    <main className="container">
      <section className="page-hero">
        <p className="eyebrow">Contact Us</p>
        <h1>با مــــــــــا در ارتبـــــــــاط باشید</h1>
        <p>
          جهت انتخاب پارچه می‌توانید با شماره تماس‌های زیر در واتس‌اپ یا تلگرام
          با هومت در تماس باشید.
        </p>
      </section>

      <section className="content-grid">
        <article className="contact-card">
          <p className="eyebrow">Contact Hoomat</p>
          <h2>ساعات پاسخگویی: 10 صبح الی 20 شب</h2>
          <ul className="contact-list">
            <li>
              واتس‌اپ / تلگرام:{" "}
              <span className="ltr-number" dir="ltr" lang="en">
                {site.whatsapp} _ {site.mobile}
              </span>
            </li>
            <li>
              شماره تماس:{" "}
              <span className="ltr-number" dir="ltr" lang="en">
                {site.phone}
              </span>
            </li>
            <li>شعبه مرکزی: مجتمع تجاری پلاتین، طبقه چهارم، مبلمان هومت</li>
          </ul>
        </article>

        <article className="contact-card">
          <p className="eyebrow">Have a Question?</p>
          <h2>با ما درمیان بگذارید ...</h2>
          <ContactForm />
        </article>
      </section>

      <section className="section locations-section">
        <div className="locations-header">
          <p className="eyebrow">Our Locations</p>
          <h2>شعب و نمایندگی‌ها</h2>
          <p>از نمایشگاه تهران تا کارخانه قم، نزدیک‌ترین نقطه هومت را پیدا کنید.</p>
        </div>
        <div className="locations-grid">
          {branches.map((branch) => (
            <article className="location-card" key={branch.title}>
              <div className="location-card-top">
                <span className="location-index" aria-hidden="true">
                  {branch.index}
                </span>
                <span className="location-pin">
                  <MapPinIcon />
                </span>
              </div>
              <p className="location-city">
                <span className="location-city-en">{branch.city}</span>
                <span>{branch.cityFa}</span>
              </p>
              <h3>{branch.title}</h3>
              <ul className="location-lines">
                {branch.lines.map((line) => (
                  <li key={line}>{line}</li>
                ))}
              </ul>
              <a
                className="location-map-link"
                href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(branch.mapQuery)}`}
                target="_blank"
                rel="noopener noreferrer"
              >
                مسیریابی در نقشه
                <span aria-hidden="true">‹</span>
              </a>
            </article>
          ))}
        </div>
      </section>
    </main>
  );
}