import { contact } from "../data";
import { PageShell } from "../components";
import ContactForm from "../ContactForm";
import { pageMetadata } from "../seo";

export const metadata = pageMetadata({
  title: "تماس با آریا شبکه پیشرو",
  description: "راه های تماس با کارشناسان آریا شبکه پیشرو برای مشاوره خرید سرور HP، رم، هارد، CPU و تجهیزات شبکه.",
  path: "/contact-us"
});

export default function ContactPage() {
  return (
    <PageShell>
      <section className="page-hero contact-hero">
        <div className="container">
          <span>CONTACT ASPHP</span>
          <h1>تماس با آریا شبکه پیشرو</h1>
          <p>برای مشاوره و خرید در زمینه تجهیزات شبکه با کارشناسان ما در ارتباط باشید.</p>
        </div>
      </section>
      <section className="section">
        <div className="container contact-grid">
          <div className="contact-panel">
            <h2>راه های ارتباطی</h2>
            <p>{contact.address}</p>
            {contact.phones.map((phone) => (
              <a key={phone} href={`tel:${phone.replaceAll(" ", "")}`}>{phone}</a>
            ))}
            <div className="socials">
              <a href={contact.instagram}>Instagram</a>
              <a href={contact.telegram}>Telegram</a>
            </div>
          </div>
          <ContactForm />
        </div>
      </section>
      <section className="map-band">
        <div className="container">
          <h2>موقعیت شرکت</h2>
          <p>عرض جغرافیایی: {contact.latitude} | طول جغرافیایی: {contact.longitude}</p>
        </div>
      </section>
    </PageShell>
  );
}