---
import { Image } from "astro:assets";
import { getEntry } from "astro:content";
import introductionPhoto from "../../assets/images/graduates/person-taking-driver-s-license-exam.webp";

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

<div
  class="flex flex-col lg:flex-row-reverse 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={introductionPhoto}
      alt="Profesionales trabajando en equipo 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>
</div>