---
import { Image } from "astro:assets";
import IsoLogoForeGround from "../../assets/images/foregorund_isologo.png";
import Button from "../Button.astro";
import Circles from "../Circles.astro";
import SectionContainer from "../SectionContainer.astro";
---

<SectionContainer
  className="bg-zinc-800 rounded-3xl flex flex-col shadow-2xl shadow-corporative-green/10 mt-20 py-24"
>
  <div
    class="absolute !top-1/2 !-translate-y-1/2 !left-1/2 !-translate-x-1/2 rotate-[7.83deg] pointer-events-none z-10 opacity-30"
  >
    <Image
      src={IsoLogoForeGround}
      alt={"Iso Logo Hseq foreground"}
      format="avif"
      width={620}
      height={620}
      quality={"max"}
      class="max-w-[420px] md:max-w-[620px] h-auto aspect-[1/1] object-contain"
    />
  </div>

  <div
    class="absolute top-[10rem] lg:top-0 left-[-18rem] lg:left-[-56rem] flex items-center justify-center w-full h-4"
  >
    <Circles />
  </div>
  <div class="flex flex-wrap items-center justify-center z-10 relative">
    <div class="flex-1 w-2/3 text-center">
      <h2 class="text-white mb-4 text-2xl lg:text-6xl">
        Rediseñamos tus actividades convencionales
      </h2>
      <p class="text-zinc-100 text-lg mb-6">Déjanos saber tu idea.</p>
      <Button className="px-12 py-4 text-xl" />
    </div>
  </div>
</SectionContainer>