---
import { Image } from "astro:assets";
import B_F from "../assets/images/b1.webp";
import IsoLogoForeground from "../assets/images/foregorund_isologo.png";
import B_S from "../assets/images/PeopleTask.webp";
---

<div class="flex flex-wrap">
  <div class="md:mx-auto text-center lg:flex-1 lg:w-4/6" data-aos="fade-up">
    <h2 class="mb-6 text-5xl font-bold mt-2">
      Consultoría y Capacitación HSEQ S.A.S.
    </h2>
  </div>

  <div class="flex-initial w-full pt-10 d:pt-20 relative" data-aos="fade-up">
    <div class="flex flex-wrap justify-center">
      <div class="max-lg:order-last lg:flex-1 lg:w-1/2 px-3">
        <Image
          src={B_F}
          alt="First team image"
          format="webp"
          class="h-[300px] min-h-full w-full rounded-lg object-cover md:h-[600px] md:rounded-3xl hidden md:block"
          width={2048}
          height={1366}
        />
      </div>

      <div class="max-lg:order-first lg:flex-1 lg:w-1/2 px-3">
        <Image
          src={B_S}
          alt="Second Image team"
          class="h-[300px] w-full rounded-lg object-cover object-top md:h-[340px] md:rounded-3xl mb-12"
          width={2048}
          height={1536}
        />

        <div
          class="relative md:mt-10 rounded-lg bg-corporative-green p-4 pt-10 w-full h:80 md:h-60 text-white md:rounded-3xl md:pt-8"
        >
          <div
            class="absolute inset-0 bg-no-repeat bg-center bg-cover opacity-60 mix-blend-overlay"
            style={`background-image: url(${IsoLogoForeground.src});`}
          >
          </div>

          <h3 class="mb-4 text-2xl font-bold relative z-10">¿Quiénes somos?</h3>
          <p class="text-base relative z-10">
            <strong>CONSULTORÍA Y CAPACITACIÓN HSEQ SAS.</strong> Empresa fundada
            en 2011, especializada en seguridad y salud en el trabajo. Brindamos
            soluciones integrales en asesoría y formación, incorporando tecnologías
            inmersivas y promoviendo la calidad, sostenibilidad y cultura preventiva.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>