import PageHero from "@/components/PageHero";
import ServiceCard from "@/components/ServiceCard";
import { defaultContent } from "@/lib/content/defaults";
import { getContent } from "@/lib/content/service";
import { createContentMetadata } from "../seo";

export const dynamic = "force-dynamic";

export async function generateMetadata() {
  const content = await getContent("services");
  return createContentMetadata(content.seo, defaultContent.services.seo);
}

export default async function ServicesPage() {
  const content = await getContent("services");
  const services = content.services
    .filter((service) => service.visible)
    .sort((left, right) => left.sortOrder - right.sortOrder);

  return (
    <>
      <PageHero eyebrow={content.eyebrow} title={content.title}>
        {content.subtitle}
      </PageHero>
      <section className="section">
        <div className="container grid service-grid">
          {services.map((service) => <ServiceCard key={service.title} title={service.title}>{service.description}</ServiceCard>)}
        </div>
      </section>
    </>
  );
}