import Header from "@/components/Header";
import Footer from "@/components/Footer";
import ContactFaq from "@/components/ContactFaq";
import { contactInfo } from "@/data/pages";
import styles from "./contact.module.css";

export const metadata = {
  title: "Contact Us | IranBay",
};

export default function ContactPage() {
  return (
    <div className={styles.page}>
      <Header />
      <main>
        <section className={styles.bannerWrap}>
          <div className={styles.banner}>
            <h1 className={styles.bannerTitle}>Contact us page</h1>
            <p className={styles.bannerSub}>
              some of our most crowded categories
            </p>
          </div>
        </section>

        <section className={styles.container}>
          <div className={styles.panel}>
            <div>
              <h2 className={styles.heading}>Get In Touch</h2>
              <p className={styles.sendLabel}>Send message</p>
              <p className={styles.sendHint}>
                In publishing and graphic design, Lorem ipsum is a placeholder
                text commonly used to.
              </p>
              <form className={styles.form}>
                <div className={styles.row}>
                  <label className={styles.field}>
                    <span>Name</span>
                    <input name="name" defaultValue="Arad Charta" />
                  </label>
                  <label className={styles.field}>
                    <span>Family</span>
                    <input name="family" defaultValue="Arad Charta" />
                  </label>
                </div>
                <div className={styles.row}>
                  <label className={styles.field}>
                    <span>Interested in</span>
                    <select name="interest" defaultValue="Developer">
                      <option>Developer</option>
                      <option>Producer</option>
                      <option>Store</option>
                      <option>Service</option>
                    </select>
                  </label>
                  <label className={`${styles.field} ${styles.plain}`}>
                    <input
                      name="phone"
                      placeholder="Phone Number"
                      aria-label="Phone Number"
                    />
                  </label>
                </div>
                <label className={styles.field}>
                  <span>Message</span>
                  <textarea name="message" placeholder="Description" />
                </label>
                <div className={styles.formActions}>
                  <button className="outline-btn" type="submit">
                    Submit message
                  </button>
                </div>
              </form>
            </div>

            <aside className={styles.aside}>
              <div className={styles.asideBlock}>
                <h3>Email Us :</h3>
                <a href={`mailto:${contactInfo.email}`}>{contactInfo.email}</a>
              </div>
              <div className={styles.asideBlock}>
                <h3>Call Us :</h3>
                <div className={styles.phones}>
                  {contactInfo.phones.map((phone) => (
                    <p key={phone}>{phone}</p>
                  ))}
                </div>
              </div>
              <div className={styles.asideBlock}>
                <h3>Follow :</h3>
                <div className={styles.socials}>
                  <a href="https://instagram.com" aria-label="Instagram">
                    <img src="/images/icons/instagram.png" alt="" />
                  </a>
                  <a href="https://t.me" aria-label="Telegram">
                    <img src="/images/icons/telegram.png" alt="" />
                  </a>
                  <a href="https://facebook.com" aria-label="Facebook">
                    <img src="/images/icons/facebook.png" alt="" />
                  </a>
                </div>
              </div>
              <div className={styles.asideBlock}>
                <h3>Visit Us :</h3>
                {contactInfo.addressLines.map((line) => (
                  <p key={line}>{line}</p>
                ))}
              </div>
            </aside>
          </div>
        </section>

        <section className={styles.container}>
          <div className={styles.mapWrap}>
            <img src="/images/contact/map.png" alt="Office location map" />
          </div>
        </section>

        <section className={styles.container}>
          <div className={styles.faq}>
            <div>
              <p className={styles.faqKicker}>FAQ</p>
              <h2 className={styles.faqTitle}>
                Frequently
                <br />
                asked
                <br />
                questions.
              </h2>
            </div>
            <ContactFaq />
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
}