import type { Metadata } from "next";

import heroImage from "@/assets/images/hero/hero-3.jpg";
import heroImageMobile from "@/assets/images/hero/hero-3-mobile.jpg";
import { PortfolioBrowser } from "@/components/portfolios/PortfolioBrowser";
import { Editorial } from "@/components/shared/Editorial";
import { PageCta } from "@/components/shared/PageCta";
import { PageHero } from "@/components/shared/PageHero";
import { SiteFooter } from "@/components/SiteFooter";
import { SiteHeader } from "@/components/SiteHeader";
import { portfoliosPage } from "@/data/site";
import { deriveCategories, getPortfolios, toDisplayProject } from "@/lib/api";

export const metadata: Metadata = {
  title: "نمونه کارها",
  description: "نمونه‌کارهای منتشرشده‌ی گروه ساختمانی رئوفی، از پروژه‌های مسکونی تا برج‌های اداری-تجاری.",
};

export const revalidate = 3600;

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

  return (
    <>
      <SiteHeader />

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

        <section className="bg-paper">
          <Editorial
            caption={portfoliosPage.overview.caption}
            captionLatin={portfoliosPage.overview.captionLatin}
            title={portfoliosPage.overview.title}
            body={portfoliosPage.overview.body}
            compact
          />

          <PortfolioBrowser projects={displayProjects} categories={categories} />
        </section>

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

      <SiteFooter />
    </>
  );
}
