---
import { Image } from "astro:assets";
import PeopleImg from "../assets/images/people.webp";
import HseqLogo from "../assets/images/Logo_xs.png";
---

<div class="max-w-screen-xl mx-auto px-5 mb-24">
  <main class="grid lg:grid-cols-5 place-items-center relative">
    <div
      class="absolute w-20 h-20 md:w-96 md:h-96 blur-2xl -z-10 bg-gradient-radial from-corporative-green right-0 top-0"
      data-aos="fade-up"
    >
    </div>
    <div
      class="absolute w-96 h-96 blur-2xl -z-10 bg-gradient-radial from-corporative-blue/20 left-0 bottom-0"
      data-aos="fade-up"
    >
    </div>
    <div
      class="absolute w-44 h-44 rounded-2xl bg-corporative-red -z-10 -bottom-10 -right-10"
      data-aos="fade-up"
    >
    </div>
    <div
      class="absolute w-44 h-44 rounded-2xl bg-corporative-green -z-10 -bottom-10 left-[-2rem] md:left-[34rem]"
      data-aos="fade-up"
    >
    </div>
    <div
      class="hidden lg:block absolute bg-white p-4 border-2 rounded-2xl top-8"
      data-aos="fade-right"
    >
      <Image
        src={HseqLogo}
        alt={"HSEQ Logo xs"}
        width={100}
        quality={"mid"}
        format="webp"
      />
    </div>

    <div class="max-w-sm md:max-w-max lg:col-span-2">
      <h1
        class="text-3xl lg:text-4xl xl:text-6xl font-bold lg:tracking-tight xl:tracking-tighter [text-wrap:balance] text-center lg:text-start"
        data-aos="fade-up-sm"
      >
        Conoce nuestros <br />
        <span
          class="text-corporative-red aos-init aos-animate"
          data-aos="fade-up-sm">Servicios</span
        >
      </h1>
      <p
        class="text-lg mt-4 max-w-lg text-slate-600 [text-wrap:balance] text-center lg:text-start"
      >
        Impulsamos el bienestar y la sostenibilidad en tu empresa
      </p>
      <div
        class="mt-6 flex flex-col sm:flex-row sm:justify-center lg:justify-start 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="/services"
          rel="prefetch"
          data-astro-reload="true"
          class="rounded-full text-center transition focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-indigo-500 focus-visible:outline-none focus-visible:shadow-outline-indigo px-7 py-2.5 bg-white border-2 border-indigo-500 hover:bg-indigo-50 text-indigo-600 flex gap-1 items-center justify-center"
        >
          Más información
        </a>
      </div>
    </div>
    <div class="py-3 lg:col-span-3 lg:-mr-44 overflow-hidden" use:drag-slider>
      <Image
        src={PeopleImg}
        alt={"People Banner"}
        class={"rounded-2xl"}
        quality={"mid"}
        width={700}
        height={467}
        format="avif"
      />
    </div>
  </main>
</div>