import Header from "@/components/Header";
import Footer from "@/components/Footer";
import CommentCarousel from "@/components/CommentCarousel";
import { aboutCopy, clients, services } from "@/data/pages";
import styles from "./about.module.css";

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

export default function AboutPage() {
  return (
    <div className={styles.page}>
      <Header />
      <main>
        <section className={styles.container}>
          <div className={styles.intro}>
            <div className={styles.visual}>
              <div className={styles.visualBack} />
              <img
                className={styles.visualCard}
                src="/images/about/hero-card.png"
                alt="IranBay"
              />
            </div>
            <div>
              <p className={styles.kicker}>{aboutCopy.kicker}</p>
              <h1 className={styles.title}>
                {aboutCopy.title.map((line) => (
                  <span key={line}>{line}</span>
                ))}
              </h1>
              {aboutCopy.paragraphs.map((p) => (
                <p className={styles.copy} key={p.slice(0, 32)}>
                  {p}
                </p>
              ))}
              <a className={`outline-btn ${styles.cta}`} href="/contact">
                Contact us
              </a>
            </div>
          </div>
        </section>

        <section className={styles.wide}>
          <div className={styles.clients}>
            <div className={styles.sectionHead}>
              <h2 className={styles.sectionTitle}>All clinets</h2>
              <p className={styles.sectionSub}>
                some of our most crowded categories
              </p>
            </div>
            <div className={styles.clientBar}>
              {clients.map((client) => (
                <img
                  key={client.name}
                  src={client.image}
                  alt={client.name}
                  className={styles.clientLogo}
                />
              ))}
            </div>
          </div>
        </section>

        <section className={styles.container}>
          <div className={styles.story}>
            <div>
              <p className={styles.kicker}>{aboutCopy.kicker}</p>
              <h2 className={styles.title}>
                {aboutCopy.title.map((line) => (
                  <span key={`story-${line}`}>{line}</span>
                ))}
              </h2>
            </div>
            <div>
              <p className={styles.copy}>{aboutCopy.paragraphs[0]}</p>
              <a className={`outline-btn ${styles.cta}`} href="/contact">
                Contact us
              </a>
            </div>
          </div>
        </section>

        <section className={styles.container}>
          <CommentCarousel />
        </section>

        <section className={styles.wide}>
          <div className={styles.services}>
            <div className={styles.sectionHead}>
              <h2 className={styles.sectionTitle}>Our services</h2>
              <p className={styles.sectionSub}>
                some of our most crowded categories
              </p>
            </div>
            <div className={styles.serviceGrid}>
              {services.map((item) => (
                <article
                  className={`${styles.serviceCard} ${styles[item.tone]}`}
                  key={item.title}
                >
                  <img src={item.image} alt="" />
                  <div className={styles.serviceCopy}>
                    <h3>{item.title}</h3>
                    <p>{item.subtitle}</p>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
}