---
import { getEntry } from "astro:content";

const { data } = (await getEntry("diplomadoSections", "cta"))!;
---

<div
  class="flex flex-col md:flex-row items-center justify-between gap-6 rounded-3xl bg-corporative-blue p-8 md:p-12"
  data-aos="fade-up"
>
  <div class="flex flex-col gap-2 text-center md:text-left">
    <h2 class="text-2xl md:text-3xl font-bold text-white">
      {data.title}
    </h2>
    <p class="text-base text-blue-100">
      {data.description}
    </p>
  </div>
  {
    data.button && (
      <a
        href={data.button.href}
        rel="prefetch"
        data-astro-reload="true"
        class="shrink-0 rounded-full bg-corporative-yellow text-[#261f00] text-base font-semibold px-8 py-3.5 transition hover:bg-corporative-yellow/90 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-corporative-yellow focus-visible:outline-none"
      >
        {data.button.label}
      </a>
    )
  }
</div>