import type { Metadata } from "next";
import { ContactForm } from "@/components/ContactForm";
import { SiteChrome } from "@/components/SiteChrome";
import { contactContent } from "@/data/site";

export const metadata: Metadata = {
  title: "تماس با ما | اُک",
  description: contactContent.intro,
};

export default function ContactPage() {
  return (
    <SiteChrome eyebrow="تماس با ما">
      <main className="page-main">
        <section className="page-hero">
          <p className="page-kicker" lang="en" dir="ltr">
            {contactContent.titleEn}
          </p>
          <h2 className="page-title">{contactContent.title}</h2>
          <p className="page-lead">{contactContent.intro}</p>
        </section>

        <section className="contact-details" aria-label="راه‌های ارتباطی">
          <a className="contact-line" href={contactContent.phoneHref}>
            <span className="contact-line__label">تلفن</span>
            <span className="contact-line__value">{contactContent.phone}</span>
          </a>
          <a className="contact-line" href={contactContent.emailHref}>
            <span className="contact-line__label">ایمیل</span>
            <span className="contact-line__value" lang="en" dir="ltr">
              {contactContent.email}
            </span>
          </a>
          <div className="contact-line">
            <span className="contact-line__label">آدرس</span>
            <span className="contact-line__value">{contactContent.address}</span>
            <span className="contact-line__hint">{contactContent.mapHint}</span>
          </div>
        </section>

        <section className="page-block" aria-label="ساعات کاری">
          <h3 className="page-subtitle">ساعات کاری</h3>
          <ul className="hours-list">
            {contactContent.hours.map((item) => (
              <li key={item.day}>
                <span>{item.day}</span>
                <span className="hours-list__time">{item.time}</span>
              </li>
            ))}
          </ul>
        </section>

        <section className="page-block" aria-label="شبکه‌های اجتماعی">
          <h3 className="page-subtitle">ما را دنبال کنید</h3>
          <div className="social-links">
            {contactContent.socials.map((item) => (
              <a key={item.label} href={item.href} target="_blank" rel="noreferrer">
                {item.label}
              </a>
            ))}
          </div>
        </section>

        <section className="page-block" aria-label="فرم تماس">
          <h3 className="page-subtitle">ارسال پیام</h3>
          <p className="page-text page-text--soft">{contactContent.formNote}</p>
          <ContactForm />
        </section>
      </main>
    </SiteChrome>
  );
}
