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

const focusAreas = (await getCollection("focus-areas")).sort((a, b) => a.data.order - b.data.order);

const description =
  "BlueCap Strategies focuses on PFAS remediation economics, marine conservation finance, sustainable living resource utilization, and island and coastal community development.";
---

<BaseLayout
  title="Focus Areas"
  description={description}
  pathname="/focus-areas/"
  image="/assets/live-site/img_0070.jpg"
  jsonLd={[
    pageSchema({ title: "Focus Areas", description, pathname: "/focus-areas/" }),
    breadcrumbSchema([
      { name: "Home", href: "/" },
      { name: "Focus Areas", href: "/focus-areas/" },
    ]),
  ]}
>
  <PageHero
    eyebrow="Core Focus Areas"
    title="Focused expertise for high-stakes aquatic resource challenges"
    lead="BlueCap concentrates on areas where finance, policy, innovation, and implementation can unlock measurable progress for aquatic ecosystems and coastal economies."
    image="/assets/live-site/img_0070.jpg"
    imageAlt="Coastal water resource landscape"
  />
  <section class="section">
    <CardGrid
      heading="Our core focus areas"
      items={focusAreas.map((area) => ({
        title: area.data.title,
        description: area.data.summary,
        href: `/${area.slug}/`,
      }))}
      label="Focus area pages"
    />
  </section>
  <ContactCta />
</BaseLayout>
