<template>
  <section class="bg-[url('/img/destinations_bg.png')] bg-cover bg-center py-12 md:py-16 lg:py-26 flex justify-center lg:justify-end">
    <div class="w-full px-4 lg:w-[85%] xl:w-8/10 lg:px-2 flex flex-col gap-6 md:gap-10">
      <div class="flex flex-col gap-2 lg:gap-5">
        <h1 class="text-3xl md:text-4xl lg:text-[45px] font-bold uppercase text-white lg:leading-6">
          Próximos destinos...
        </h1>
        <p class="text-base md:text-lg lg:text-xl text-white font-medium">
          Veja as oportunidades que temos pela Frente!
        </p>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:flex lg:flex-row lg:items-center lg:justify-between gap-4 md:gap-6 xl:gap-8">
        <div class="md:col-span-2 lg:contents">
          <DestinationCard
            image="/img/paraguay.png"
            name="Em breve Paraguay"
            date="18/19 de Maio"
            class="h-[260px] sm:h-[300px] lg:h-[390px] lg:w-[630px] bg-position-[center_15%]! md:bg-position-[center_20%] lg:bg-position-[center_40%]"
          />
        </div>
        <DestinationCard
          image="/img/china.jpg"
          label="Em breve"
          name="China"
          class="h-40 sm:h-50 lg:h-[280px] lg:w-md"
          bg-position-class="md:bg-bottom lg:bg-position-[center_380%]"
        />
        <DestinationCard
          image="/img/dubai.jpg"
          label="Em breve"
          name="Dubai"
          class="h-40 md:h-50 lg:h-[280px] lg:w-md"
          bg-position-class="md:bg-bottom lg:bg-position-[center_800%]"
        />
      </div>
      <button
        class="self-stretch lg:self-start group bg-linear-to-r from-[#8DC63F] to-[#5F980F] text-white text-base md:text-lg lg:text-[23px] font-semibold flex justify-center items-center gap-4 border border-[#E3FA6D] rounded-lg py-3 px-8 transition-all duration-300 ease-in-out hover:scale-[1.03] hover:shadow-[0_0_28px_rgba(227,250,109,0.45)] hover:brightness-110 cursor-pointer">
        Fale com um especialista agora!
        <NuxtImg 
          src="/img/cta_btn_icon.svg"
          class="w-6 md:w-8 lg:w-10 transition-transform duration-300 group-hover:translate-x-1.5" 
        />
      </button>
    </div>
  </section>
</template>