import type { Metadata } from "next";

import atelier from "@/assets/images/about/atelier.jpg";
import servicesHero from "@/assets/images/services/services-hero.jpg";
import { ServiceGrid } from "@/components/services/ServiceGrid";
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 { SiteFooter } from "@/components/SiteFooter";
import { SiteHeader } from "@/components/SiteHeader";
import { servicesPage } from "@/data/site";
import { getRecentPortfolios, toDisplayProject } from "@/lib/api";

export const revalidate = 300; // keep in sync with api.ts PAGE_REVALIDATE_SECONDS

export const metadata: Metadata = {
  title: "خدمات ما",
  description:
    "توسعه، سرمایه‌گذاری، طراحی و معماری، مدیریت ساخت و ساز، اجرا و نظارت و طراحی دکوراسیون؛ شش حوزه‌ی تخصصی گروه ساختمانی رئوفی.",
};

export default async function ServicesPage() {
  const portfolios = await getRecentPortfolios(12);
  const displayProjects = portfolios.map(toDisplayProject);

  return (
    <>
      <SiteHeader />

      <main>
        <PageHero
          image={servicesHero}
          title={servicesPage.hero.title}
          breadcrumb={servicesPage.hero.breadcrumb}
        />

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

        {/* The six disciplines */}
        <section className="bg-sand">
          <Editorial
            caption={servicesPage.disciplines.caption}
            captionLatin={servicesPage.disciplines.captionLatin}
            title={servicesPage.disciplines.title}
            body={servicesPage.disciplines.body}
          />
          <ServiceGrid />
        </section>

        {/* Proof of work */}
        <section className="bg-paper">
          <Editorial
            caption={servicesPage.portfolio.caption}
            captionLatin={servicesPage.portfolio.captionLatin}
            title={servicesPage.portfolio.title}
            body={servicesPage.portfolio.body}
          />
          <ProjectGallery projects={displayProjects} />
        </section>

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

      <SiteFooter />
    </>
  );
}