import type { Metadata } from "next";
import {
  Clock3,
  ExternalLink,
  Mail,
  MapPin,
  MessageCircle,
  Phone,
} from "lucide-react";
import Link from "next/link";
import { InteriorFooter, InteriorHeader } from "../components/InteriorShell";
import ContactForm from "./ContactForm";

const assetBase = "/assets";

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

export default function ContactUsPage() {
  return (
    <main>
      <InteriorHeader active="contact" />

      <section
        className="inner-hero inner-hero--contact"
        style={{ backgroundImage: `url("${assetBase}/ZLxH2tZ4dR.jpg")` }}
      >
        <div className="inner-hero__shade" />
        <div className="container inner-hero__content">
          <span>GET IN TOUCH</span>
          <h1>تماس با ما</h1>
          <p>برای انتخاب بهترین راهکار صنعتی، کنار شما هستیم</p>
          <div>
            <Link href="/">صفحه اصلی</Link>
            <i>/</i>
            <strong>تماس با ما</strong>
          </div>
        </div>
      </section>

      <section className="contact-info">
        <div className="container contact-info__grid">
          <a href="tel:+982188530256">
            <span>
              <Phone />
            </span>
            <div>
              <small>تماس مستقیم</small>
              <strong dir="ltr">021 8853 0256</strong>
              <p>پاسخ‌گویی شنبه تا چهارشنبه</p>
            </div>
          </a>
          <a href="mailto:info@samanandish.com">
            <span>
              <Mail />
            </span>
            <div>
              <small>ایمیل سازمانی</small>
              <strong>info@samanandish.com</strong>
              <p>برای ارسال مشخصات فنی و پیشنهادات</p>
            </div>
          </a>
          <div>
            <span>
              <MapPin />
            </span>
            <div>
              <small>دفتر مرکزی</small>
              <strong>تهران، خیابان مطهری</strong>
              <p>خیابان ترکمنستان، دفتر سامان اندیش</p>
            </div>
          </div>
        </div>
      </section>

      <section className="contact-main">
        <div className="container contact-main__grid">
          <div className="contact-main__copy">
            <span className="inner-eyebrow">SEND A MESSAGE</span>
            <h2>درخواست خود را با ما در میان بگذارید</h2>
            <p>
              برای استعلام ماشین‌آلات، دریافت مشاوره فنی یا شروع همکاری، فرم را
              تکمیل کنید. اطلاعات شما مستقیماً به تیم مرتبط ارجاع می‌شود.
            </p>
            <ContactForm />
          </div>

          <aside className="contact-aside">
            <div className="contact-aside__image">
              <img src={`${assetBase}/rf3fNjazCx.png`} alt="موقعیت سامان اندیش" />
              <a
                href="https://www.google.com/maps/place/Saman+Andish/@35.7424283,51.4396725,17z"
                target="_blank"
                rel="noreferrer"
              >
                مشاهده در نقشه
                <ExternalLink size={16} />
              </a>
            </div>
            <div className="office-hours">
              <h3>
                <Clock3 />
                ساعت کاری
              </h3>
              <div>
                <span>شنبه تا چهارشنبه</span>
                <strong>۸:۳۰ تا ۱۷:۰۰</strong>
              </div>
              <div>
                <span>پنج‌شنبه</span>
                <strong>با هماهنگی قبلی</strong>
              </div>
              <div>
                <span>جمعه</span>
                <strong>تعطیل</strong>
              </div>
            </div>
            <a className="quick-contact" href="tel:+982188530256">
              <MessageCircle />
              <span>
                <small>نیاز به پاسخ سریع دارید؟</small>
                <strong>همین حالا تماس بگیرید</strong>
              </span>
            </a>
          </aside>
        </div>
      </section>

      <section className="contact-departments">
        <div className="container">
          <div className="inner-section-title">
            <span>DIRECT CONTACT</span>
            <h2>ارتباط با واحدهای تخصصی</h2>
          </div>
          <div>
            {[
              ["فروش ماشین‌آلات", "machinery@samanandish.com", "داخلی ۱۰۱"],
              ["خدمات فنی", "service@samanandish.com", "داخلی ۱۰۲"],
              ["همکاری تجاری", "commerce@samanandish.com", "داخلی ۱۰۳"],
            ].map(([title, email, extension]) => (
              <article key={title}>
                <small>{extension}</small>
                <h3>{title}</h3>
                <a href={`mailto:${email}`}>{email}</a>
              </article>
            ))}
          </div>
        </div>
      </section>

      <InteriorFooter />
    </main>
  );
}