---
import { getCollection } from "astro:content";
import BaseLayout from "@layouts/BaseLayout.astro";
import PageHero from "@components/PageHero.astro";
import ContactCta from "@components/ContactCta.astro";
import { breadcrumbSchema, pageSchema, serviceSchema } from "@utils/schema";

export async function getStaticPaths() {
  const services = await getCollection("services");
  const focusAreas = await getCollection("focus-areas");
  return [
    ...services.map((entry) => ({
      params: { slug: entry.slug },
      props: { entry, kind: "Service", parentTitle: "Services", parentHref: "/services/" },
    })),
    ...focusAreas.map((entry) => ({
      params: { slug: entry.slug },
      props: { entry, kind: "Core Focus Area", parentTitle: "Focus Areas", parentHref: "/focus-areas/" },
    })),
  ];
}

const { entry, kind, parentTitle, parentHref } = Astro.props;
// Detail pages get a clean text hero (eyebrow + title) — the originals had no hero image, and a
// tiny 64px icon reads as orphaned filler. Icons still live on the /services/ overview cards.
const { title, description } = entry.data;
const pathname = `/${entry.slug}/`;
const isService = kind === "Service";
const { Content } = await entry.render();

const jsonLd = [
  pageSchema({ title, description, pathname }),
  breadcrumbSchema([
    { name: "Home", href: "/" },
    { name: parentTitle, href: parentHref },
    { name: title, href: pathname },
  ]),
  ...(isService ? [serviceSchema({ title, description, pathname })] : []),
];
---

<BaseLayout title={title} description={description} pathname={pathname} jsonLd={jsonLd}>
  <PageHero eyebrow={kind} title={title} />
  <section class="section">
    <div class="detail-layout">
      <div class="article-body">
        <p><a class="text-link" href={parentHref}>&larr; {parentTitle} overview</a></p>
        <Content />
      </div>
      <aside class="sidebar" aria-label={`${title} — related`}>
        <div class="note-card">
          <h2>Related</h2>
          <a class="text-link" href={parentHref}>{parentTitle} overview</a>
        </div>
        <div class="note-card">
          <h2>Start a conversation</h2>
          <a class="text-link" href="/contact/">Request a consultation</a>
        </div>
      </aside>
    </div>
  </section>
  <ContactCta />
</BaseLayout>
