---
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 services = (await getCollection("services")).sort((a, b) => a.data.order - b.data.order);

const description =
  "BlueCap Strategies provides market intelligence, catalytic capital, partnership development, technology incubation, implementation, impact reporting, and policy advisory services.";
---

<BaseLayout
  title="Services"
  description={description}
  pathname="/services/"
  jsonLd={[
    pageSchema({ title: "Services", description, pathname: "/services/" }),
    breadcrumbSchema([
      { name: "Home", href: "/" },
      { name: "Services", href: "/services/" },
    ]),
  ]}
>
  <PageHero
    eyebrow="Services"
    title="Advisory services for capital-ready water-sector initiatives"
    lead="BlueCap Strategies helps clients identify opportunities, structure capital, build partnerships, implement projects, measure outcomes, and shape supportive policy."
    image="/assets/live-site/img_0075.jpg"
    imageAlt="Marine and freshwater resources viewed from above"
  />
  <section class="section">
    <CardGrid
      heading="Our services"
      items={services.map((service) => ({
        title: service.data.title,
        description: service.data.summary,
        href: `/${service.slug}/`,
        icon: service.data.icon,
      }))}
      label="Service pages"
    />
  </section>
  <ContactCta />
</BaseLayout>
