---
import CorporativeBlueWaves from "../assets/images/CORPORATIVE_BLUE_WAVES.svg";
import IsoLogoAlturasFull from "../assets/images/ISOLOGO_alturas_full.png";
import IsoLogoAlturasYellow from "../assets/images/ISOLOGO_alturas_yellow.png";
import AlturasBannerImage1 from "../assets/images/services/alturas_b_1.webp";

import { Image } from "astro:assets";
---

<div
  class="flex items-center justify-between bg-white rounded-l-2xl relative p-5 md:p-20"
>
  <div class="relative h-full w-full">
    <div
      class="absolute w-96 h-96 blur-2xl -z-10 bg-gradient-radial from-corporative-blue/20 right-0 bottom-0"
      data-aos="fade-up"
    >
    </div>
    <div
      class="absolute bg-white z-10 w-24 p-1 h-18 right-[39%] top-[18rem] shadow-2xl rounded-l-2xl hidden md:block"
      data-aos="fade-left"
    >
      <Image
        src={IsoLogoAlturasFull}
        alt={"Persona de alturas en plena accion"}
        format="webp"
        width={500}
        height={200}
        class={"w-full h-full object-scale-down"}
      />
    </div>
    <div
      class="absolute w-80 h-96 right-[10%] rounded-2xl overflow-hidden z-20 shadow-2xl hidden md:block"
    >
      <Image
        src={AlturasBannerImage1}
        alt={"Persona de alturas en plena accion"}
        format="webp"
        width={700}
        height={500}
        class={"object-cover w-full h-full "}
      />
    </div>
    <Image
      src={CorporativeBlueWaves}
      alt={"waves"}
      class={"-rotate-45 hidden md:block absolute md:w-[95rem] md:h-[75rem] md:right-[-5rem] md:top-[-30rem] pointer-events-none"}
    />
    <div
      class="absolute bg-corporative-blue 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-yellow text-3xl leading-[1] md:leading-[0.5] relative"
      >
        ¿Ya conoces <br />
        <h2 class="text-3xl md:text-5xl font-extrabold leading-none z-0">
          nuestros cursos para
        </h2><br />
        <span
          class="bg-corporative-yellow text-white px-2 py-1 md:px-4 md:py-2 font-extrabold rounded-lg leading-[1.5] text-2xl md:text-5xl"
        >
          Trabajo en alturas?
        </span>
      </span>
      <ul class="grid mt-6 text-left gap-y-4">
        <li class="flex items-center gap-3 text-neutral-800" data-aos="fade-up">
          <svg
            width="1em"
            height="1em"
            viewBox="0 0 256 256"
            class="w-5 h-5"
            data-icon="ph:check-circle-fill"
          >
            <symbol id="ai:ph:check-circle-fill">
              <path
                fill="currentColor"
                d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m45.66 85.66l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
              ></path>
            </symbol>
            <use xlink:href="#ai:ph:check-circle-fill"></use>
          </svg>
          <span class="text-sm">Jefes de área</span>
        </li>
        <li class="flex items-center gap-3 text-neutral-800" data-aos="fade-up">
          <svg
            width="1em"
            height="1em"
            viewBox="0 0 256 256"
            class="w-5 h-5"
            data-icon="ph:check-circle-fill"
          >
            <symbol id="ai:ph:check-circle-fill">
              <path
                fill="currentColor"
                d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m45.66 85.66l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
              ></path>
            </symbol>
            <use xlink:href="#ai:ph:check-circle-fill"></use>
          </svg>
          <span class="text-sm">Coordinador</span>
        </li>
        <li class="flex items-center gap-3 text-neutral-800" data-aos="fade-up">
          <svg
            width="1em"
            height="1em"
            viewBox="0 0 256 256"
            class="w-5 h-5"
            data-icon="ph:check-circle-fill"
          >
            <symbol id="ai:ph:check-circle-fill">
              <path
                fill="currentColor"
                d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m45.66 85.66l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
              ></path>
            </symbol>
            <use xlink:href="#ai:ph:check-circle-fill"></use>
          </svg>
          <span class="text-sm">Trabajador autorizado</span>
        </li>
        <li class="flex items-center gap-3 text-neutral-800" data-aos="fade-up">
          <svg
            width="1em"
            height="1em"
            viewBox="0 0 256 256"
            class="w-5 h-5"
            data-icon="ph:check-circle-fill"
          >
            <symbol id="ai:ph:check-circle-fill">
              <path
                fill="currentColor"
                d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m45.66 85.66l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
              ></path>
            </symbol>
            <use xlink:href="#ai:ph:check-circle-fill"></use>
          </svg>
          <span class="text-sm">Reentrenamiento</span>
        </li>
      </ul>
      <div
        class="md:mt-6 flex flex-col sm:flex-row sm:justify-center lg:justify-start gap-1 md:gap-3"
      >
        <a
          href="/contact"
          rel="prefetch"
          data-astro-reload="true"
          class="rounded-full text-center transition focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-corporative-blue focus-visible:outline-none focus-visible:shadow-outline-indigo px-7 py-2.5 bg-corporative-blue text-white hover:bg-corporative-blue/90 flex gap-1 items-center justify-center"
        >
          Contáctanos
        </a>
        <a
          href="https://alturashseq.com/"
          rel="prefetch"
          data-astro-reload="true"
          target="_blank"
          class="rounded-full text-center transition focus-visible:ring-2 focus-visible:ring-offset-2 border-2 border-corporative-yellow focus-visible:ring-corporative-yellow focus-visible:outline-none focus-visible:shadow-outline-indigo px-7 py-2.5 bg-white hover:text-white text-corporative-yellow hover:bg-corporative-yellow/90 flex gap-1 items-center justify-center"
        >
          Ver más
        </a>
      </div>
    </div>
  </div>
  <Image
    src={IsoLogoAlturasYellow}
    alt={"ISo logo"}
    class="absolute right-[-5rem] md:right-[-12rem] font-extrabold text-corporative-yellow pointer-events-none w-[10rem] top-[10rem] md:top-[-2.5rem] z-30"
    data-aos="fade-left"
    width={600}
    format="webp"
  />
</div>