---
import { Image } from "astro:assets";
import { getEntry } from "astro:content";
import graduatesPhoto from "../../assets/images/graduates/2566.jpg.webp";

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

<div
  class="flex flex-col lg:flex-row gap-8 lg:gap-14 bg-white/65 rounded-3xl p-6 md:p-10 lg:p-12"
  data-aos="fade-up"
>
  <div
    class="relative w-full lg:w-[380px] shrink-0 aspect-[3/4] rounded-2xl overflow-hidden"
  >
    <Image
      src={graduatesPhoto}
      alt="Graduados del diplomado en Seguridad Vial y SG-SST"
      width={380}
      height={507}
      class="w-full h-full object-cover"
    />
  </div>

  <div class="flex flex-col gap-4">
    <span class="text-corporative-yellow text-sm font-semibold uppercase tracking-wide"
      >{data.label}</span
    >
    {data.paragraphs?.map((paragraph) => <p class="text-base text-slate-600 text-justify">{paragraph}</p>)}

    <div class="flex flex-wrap gap-2.5">
      {
        data.items?.map((item) => (
          <span class="rounded-full bg-corporative-blue/[0.08] text-corporative-blue text-[13px] font-medium px-3.5 py-1.5">
            {item}
          </span>
        ))
      }
    </div>

    <div class="flex flex-wrap gap-4 mt-2">
      <a
        href="/contact"
        rel="prefetch"
        data-astro-reload="true"
        class="rounded-full bg-corporative-blue text-white text-base font-medium px-7 py-3 text-center transition hover:bg-corporative-blue/90 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-corporative-blue focus-visible:outline-none"
        >Contáctanos</a
      >
      <a
        href="/contact"
        rel="prefetch"
        data-astro-reload="true"
        class="rounded-full bg-white text-corporative-blue text-base font-medium px-7 py-3 text-center transition hover:bg-corporative-blue/5 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-corporative-blue focus-visible:outline-none"
        >Más información</a
      >
    </div>
  </div>
</div>