import type { Metadata } from "next";

import atelier from "@/assets/images/about/atelier.jpg";
import about from "@/assets/images/about/about.jpg";
import heroImage from "@/assets/images/hero/hero-2.jpg";
import heroImageMobile from "@/assets/images/hero/hero-2-mobile.jpg";
import { Pillars } from "@/components/about/Pillars";
import { Editorial } from "@/components/shared/Editorial";
import { FullBleed } from "@/components/shared/FullBleed";
import { PageCta } from "@/components/shared/PageCta";
import { PageHero } from "@/components/shared/PageHero";
import { ProjectGallery } from "@/components/shared/ProjectGallery";
import { Reveal } from "@/components/Reveal";
import { SiteFooter } from "@/components/SiteFooter";
import { SiteHeader } from "@/components/SiteHeader";
import { aboutPage } from "@/data/site";
import { getPortfolios, toDisplayProject } from "@/lib/api";

export const metadata: Metadata = {
  title: "درباره ما",
  description:
    "از سال ۱۳۷۹، دیدگاه مهندس قاسم رئوفی‌منش مسیر گروه رئوفی را تعریف کرده است؛ دیدگاهی که هر پروژه را به تجربه‌ای اصیل و ماندگار از سبک زندگی ارتقاء می‌دهد.",
};

export default async function AboutPage() {
  const portfolios = await getPortfolios();
  const displayProjects = portfolios.map(toDisplayProject);

  return (
    <>
      <SiteHeader />

      <main>
        <PageHero
          image={heroImage}
          imageMobile={heroImageMobile}
          caption={aboutPage.hero.caption}
          title={aboutPage.hero.title}
          breadcrumb={aboutPage.hero.breadcrumb}
        />

        {/* Overview */}
        <section className="bg-paper">
          <Editorial
            caption={aboutPage.overview.caption}
            captionLatin={aboutPage.overview.captionLatin}
            title={aboutPage.overview.title}
            body={aboutPage.overview.body}
          />
          <FullBleed image={atelier} alt="معماری پروژه‌های گروه ساختمانی رئوفی" />
        </section>

        {/* Philosophy */}
        <section className="bg-sand">
          <Editorial
            caption={aboutPage.philosophy.caption}
            captionLatin={aboutPage.philosophy.captionLatin}
            title={aboutPage.philosophy.title}
            body={aboutPage.philosophy.body}
          />
        </section>

        {/* Foundations */}
        <section className="bg-paper">
          <Editorial
            caption={aboutPage.pillars.caption}
            captionLatin={aboutPage.pillars.captionLatin}
            title={aboutPage.pillars.title}
            body={aboutPage.pillars.body}
          />
          <Pillars />
        </section>

        {/* Portfolio */}
        <section className="bg-sand">
          <Editorial
            caption={aboutPage.portfolio.caption}
            captionLatin={aboutPage.portfolio.captionLatin}
            title={aboutPage.portfolio.title}
            body={aboutPage.portfolio.body}
          />
          <ProjectGallery projects={displayProjects} />
        </section>

        {/* Closing statement */}
        <section className="bg-paper">
          <div className="mx-auto max-w-[1400px] px-6 py-24 text-center lg:px-12 lg:py-48">
            <Reveal>
              <p className="mx-auto max-w-[860px] text-[1.35rem] leading-[2.1] font-light text-ink lg:text-[1.75rem] lg:leading-[2]">
                {aboutPage.closing.body}
              </p>
            </Reveal>

            <Reveal delay={140}>
              <span
                aria-hidden="true"
                className="mx-auto mt-14 block h-px w-24 bg-gold"
              />
            </Reveal>
          </div>

          <FullBleed image={about} alt="نمای پروژه‌های گروه ساختمانی رئوفی" />
        </section>

        <PageCta
          caption={aboutPage.cta.caption}
          title={aboutPage.cta.title}
          action={aboutPage.cta.action}
        />
      </main>

      <SiteFooter />
    </>
  );
}
