---
const { m_header } = Astro.props;
const { m_item1_caption } = Astro.props;
const { m_item1_value } = Astro.props;
const { m_item1_subheader } = Astro.props;
const { m_item2_caption } = Astro.props;
const { m_item2_value } = Astro.props;
const { m_item2_subheader } = Astro.props;
const { m_item3_caption } = Astro.props;
const { m_item3_value } = Astro.props;
const { m_item3_subheader } = Astro.props;

---

<section id="metrics">
  <div
    class="mx-auto w-full lg:px-24 max-w-7xl md:px-12 items-center px-8 py-24 scroll-mt-12">
    <div class="mx-auto max-w-3xl lg:text-center">
      <div>
        <p
          class="light12 font-extrabold lg:text-5xl text-4xl tracking-tighter">
          {m_header}
        </p>
      </div>
    </div>
    <div class="mx-auto pt-12">
      <div
        class="mx-auto w-full gap-8 grid grid-cols-1 xl:grid-cols-3">
        <div class="flex flex-col gap-3 border border-gray-500/10 rounded-xl px-6 py-6">
          <p
            class="mt-2 text-lg font-semibold leading-6 text-black font-display lg:mt-0">
            {m_item1_caption}
          </p>
          <p
            class="mt-2 text-3xl font-semibold leading-6 text-black font-display">
            {m_item1_value}
          </p>
          <p 
            class="mt-2 text-gray-500 text-sm ">
            {m_item1_subheader}
          </p>
        </div>
        <div class="flex flex-col gap-3 border border-gray-500/10 rounded-xl px-6 py-6">
          <p
            class="mt-2 text-lg font-semibold leading-6 text-black font-display lg:mt-0">
            {m_item2_caption}
          </p>
          <p
            class="mt-2 text-3xl font-semibold leading-6 text-black font-display">
            {m_item2_value}
          </p>
          <p 
            class="mt-2 text-gray-500 text-sm ">
            {m_item2_subheader}
          </p>
        </div>
        <div class="flex flex-col gap-3 border border-gray-500/10 rounded-xl px-6 py-6">
          <p
            class="mt-2 text-lg font-semibold leading-6 text-black font-display lg:mt-0">
            {m_item3_caption}
          </p>
          <p
            class="mt-2 text-3xl font-semibold leading-6 text-black font-display">
            {m_item3_value}
          </p>
          <p 
            class="mt-2 text-gray-500 text-sm ">
            {m_item3_subheader}
          </p>
        </div>
      </div>
    </div>
  </div>
</section>