---
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 } from "@utils/schema";

export async function getStaticPaths() {
  const posts = await getCollection("insights");
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await post.render();
const pathname = `/insights/${post.slug}/`;

const jsonLd = [
  pageSchema({ title: post.data.title, description: post.data.description, pathname }),
  breadcrumbSchema([
    { name: "Home", href: "/" },
    { name: "Insights", href: "/insights/" },
    { name: post.data.title, href: pathname },
  ]),
];
---

<BaseLayout title={post.data.title} description={post.data.description} pathname={pathname} jsonLd={jsonLd}>
  <PageHero
    eyebrow="Insight"
    title={post.data.title}
    lead={post.data.description}
    image="/assets/live-site/img_0067.jpg"
  />
  <article class="detail-layout">
    <div class="article-body">
      <Content />
    </div>
    <aside class="sidebar" aria-label="Insight details">
      <div class="note-card">
        <h2>Published</h2>
        <p>{post.data.publishDate.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })}</p>
      </div>
      {post.data.tags && post.data.tags.length > 0 && (
        <div class="note-card">
          <h2>Tags</h2>
          <ul class="outcome-grid">
            {post.data.tags.map((tag) => <li>{tag}</li>)}
          </ul>
        </div>
      )}
      <div class="note-card">
        <h2>Related</h2>
        <a class="text-link" href="/insights/">Insights overview</a>
      </div>
    </aside>
  </article>
  <ContactCta />
</BaseLayout>
