---
import { getEntry } 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";

const about = await getEntry("pages", "about");
if (!about) throw new Error("Missing content entry: pages/about");
const { title, description, eyebrow, heroTitle, heroLead, heroImage, heroImageAlt } = about.data;
const { Content, headings } = await about.render();
const sectionNav = headings.filter((h) => h.depth === 2);
const pathname = "/about-us/";
---

<BaseLayout
  title={title}
  description={description}
  pathname={pathname}
  image={heroImage}
  jsonLd={[
    pageSchema({ type: "AboutPage", title, description, pathname }),
    breadcrumbSchema([
      { name: "Home", href: "/" },
      { name: "About Us", href: pathname },
    ]),
  ]}
>
  <PageHero
    eyebrow={eyebrow}
    title={heroTitle}
    lead={heroLead}
    image={heroImage ?? "/assets/live-site/img_0062.jpg"}
    imageAlt={heroImageAlt}
  />
  <section class="section">
    <div class="detail-layout">
      <div class="article-body">
        <Content />
      </div>
      <aside class="sidebar" aria-label="On this page">
        <nav class="note-card anchor-nav" aria-label="Section navigation">
          <h2>On this page</h2>
          <ul>
            {sectionNav.map((h) => (
              <li><a href={`#${h.slug}`}>{h.text}</a></li>
            ))}
          </ul>
        </nav>
      </aside>
    </div>
  </section>
  <ContactCta />
</BaseLayout>
