---
import { Image } from "astro:assets";
import { getEntry } from "astro:content";
// PLACEHOLDER: reemplazar por la foto definitiva antes de publicar
import participantProfilePhoto from "../../assets/images/sgsst.webp";

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

<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={participantProfilePhoto}
      alt="Profesionales de seguridad vial y SG-SST en campo"
      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>