---
import Image from "astro/components/Image.astro";
import ImageLeft from "@/assets/yoyo-comodo-y-espacioso-left.jpg";
import ImageCenter from "@/assets/yoyo-comodo-y-espacioso-center.jpg";
import ImageRight from "@/assets/yoyo-comodo-y-espacioso-right.jpg";
import AlmacenamientoConveniente from "@/assets/yoyo-espacio-de-almacenamiento-conveniente.jpg";
import AlmacenamientoPasajero from "@/assets/yoyo-espacio-de-almacenamiento-para-el-pasajero.jpg";
import BaulEspacioso from "@/assets/yoyo-baul-espacioso.jpg";

const features = [
  { imageBack: ImageLeft, imageFront: AlmacenamientoConveniente, title: "Espacio de almacenamiento conveniente" },
  { imageBack: ImageCenter, imageFront: AlmacenamientoPasajero, title: "Espacio de almacenamiento para el pasajero" },
  { imageBack: ImageRight, imageFront: BaulEspacioso, title: "Baúl espacioso" },
];
---

<div class="yoyo-container" id="espacio-y-experiencia">
  <h2 class="yoyo-section-title yoyo-section-title--chapters mb-5 md:mb-10">Espacio y Experiencia</h2>
</div>
<section class="yoyo-section xl:min-h-[100svh]" id="confortable-section">
  <div class="yoyo-container">
    <div class="text-center" id="confortable-text">
      <h3 class="yoyo-section-title">Cómodo y espacioso</h3>
      <p class="mt-1.5 mb-10 md:max-w-[52.125rem] mx-auto md:text-[min(2vw,1.25rem)]">
        El <strong>YOYO PRO</strong> es más grande de lo que parece.<br /> Con un espacio generoso para dos personas y múltiples
        compartimientos, se adapta perfectamente a tus necesidades de movilidad urbana.
      </p>
    </div>
    <div
      class="flex flex-col md:flex-row items-stretch justify-center gap-6 md:gap-0 cards-container perspective-[62.5rem]"
    >
      {
        features.map(({ imageBack, imageFront, title }) => (
          <div class="size-full md:transform-3d flip-card rounded-[0.75rem] md:rounded-none md:flex-1">
            <div class="bg-white md:backface-hidden flex flex-col justify-center overflow-hidden rounded-[inherit] shadow-2xl md:shadow-none">
              <Image
                src={imageFront}
                alt={title}
                class="aspect-[16/12] size-full object-cover md:aspect-auto max-h-[31.25rem]"
              />
              <h3 class="px-4 flex items-center justify-center text-[min(5vw,1.25rem)] md:text-[0.875rem] py-6 md:py-0 lg:text-[1.375rem] leading-[1.2] md:h-[4.375rem] lg:h-[6.75rem] text-center font-bold">
                {title}
              </h3>
            </div>

            <div
              class="flip-card-back hidden md:block absolute size-full inset-0 overflow-hidden backface-hidden rounded-[inherit]
                "
            >
              <Image src={imageBack} alt="" class="size-full object-cover" />
            </div>
          </div>
        ))
      }
    </div>
  </div>
  <script>
    import { onVisibleOnce } from "@/lib/on-visible-once";
    onVisibleOnce(document.querySelector("#espacio-y-experiencia"), async () => {
      const { ConfortableCardsAnimation } = await import("@/components/classes/YoyoConfortableCardsAnimation");
      new ConfortableCardsAnimation();
    });
  </script>
</section>