---
import { Image } from "astro:assets";
import ladron from "../assets/images/ladron.webp";
---

<div
  class="flex items-center justify-between bg-white/20 backdrop-blur-md rounded-3xl relative p-5 md:p-20"
>
  <div class="relative h-full w-full">
    <div
      class="absolute size-80 blur-2xl -z-10 bg-gradient-radial from-corporative-red/30 top-5 right-0 bottom-0"
      data-aos="fade-up"
    >
    </div>

    <div
      class="absolute w-85 h-96 right-[11%] top-[-40%] overflow-hidden z-20 hidden md:block"
    >
      <Image
        src={ladron}
        alt={"Ladron"}
        width={620}
        height={620}
        quality={"max"}
        class="max-w-[420px] md:max-w-[25rem] h-auto aspect-[1/1] object-contain"
        data-aos="fade-left"
        format="webp"
      />
    </div>

    <div
      class="absolute bg-corporative-red h-[85rem] w-[20rem] right-[-3rem] top-[-15rem] rotate-45 hidden md:block"
    >
    </div>
    <div class="flex flex-col h-full gap-4" data-aos="fade-right">
      <span
        class="text-corporative-red text-3xl leading-[1] md:leading-[0.5] relative"
      >
        <h2 class="text-2xl md:text-5xl font-extrabold leading-none z-0">
          No te dejes engañar
        </h2>
        <br />
      </span>
      <ul class="grid md:mt-6 text-left gap-y-4">
        <li class="flex items-center gap-3 text-neutral-800" data-aos="fade-up">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="1em"
            height="1em"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-5 h-5 text-red-600 flex-shrink-0"
          >
            <path d="m15 9-6 6"></path>
            <path
              d="M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z"
            ></path>
            <path d="m9 9 6 6"></path>
          </svg>
          <span class="text-sm flex-grow"
            >Evite suministrar información privada a personas inescrupulosas.</span
          >
        </li>
        <li class="flex items-center gap-3 text-neutral-800" data-aos="fade-up">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="1em"
            height="1em"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-5 h-5 text-red-600 flex-shrink-0"
          >
            <path d="m15 9-6 6"></path>
            <path
              d="M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z"
            ></path>
            <path d="m9 9 6 6"></path>
          </svg>
          <span class="text-sm flex-grow"
            >No trabajamos con intermediarios.</span
          >
        </li>
        <li class="flex items-center gap-3 text-neutral-800" data-aos="fade-up">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="1em"
            height="1em"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-5 h-5 text-red-600 flex-shrink-0"
          >
            <path d="m15 9-6 6"></path>
            <path
              d="M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z"
            ></path>
            <path d="m9 9 6 6"></path>
          </svg>
          <span class="text-sm flex-grow"
            >No transfiera dinero para acceder a certificaciones sin realizar el
            curso.</span
          >
        </li>
        <li class="flex items-center gap-3 text-neutral-800" data-aos="fade-up">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="1em"
            height="1em"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-5 h-5 text-red-600 flex-shrink-0"
          >
            <path d="m15 9-6 6"></path>
            <path
              d="M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z"
            ></path>
            <path d="m9 9 6 6"></path>
          </svg>
          <span class="text-sm flex-grow"
            >No participamos en convocatorias laborales, ni con bolsas de
            empleo.</span
          >
        </li>
      </ul>
    </div>
  </div>
</div>