<script setup lang="ts">
import { useMarketingShortsVideosQuery } from "~/queries/marketing";
import Stepper from "./campaignForm/Stepper.vue";

const { data } = useMarketingShortsVideosQuery();
const projects = computed(() => data.value ?? []);

</script>
<template>
  <header class="-mt-header relative min-h-screen">
    <video autoplay muted loop playsinline class="absolute inset-0 h-full w-full object-cover">
      <source src="/videos/mobile-application.mp4" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
    <div class="bg-hero-bg absolute inset-0 z-[1]" />
    <div class="container mx-auto px-4">
      <div class="content relative z-[3] pt-[140px] pb-[80px] text-center">
        <h1 class="dark-text-gradient text-center text-[24px] font-bold md:w-[710px] md:text-[32px] lg:text-[40px]">
          {{ $t("campaign.title") }}
        </h1>
        <p class="mt-6 md:text-lg">
          {{ $t("campaign.description") }}
        </p>
      </div>
      <div class="grid gap-y-10 pb-[100px] lg:grid-cols-12">
        <div id="contact"
          class="bg-background border-surface-border relative z-20 h-full rounded-[12px] border p-5 sm:p-8 lg:col-span-6 lg:col-start-1">

          <Stepper />
        </div>
        <CampaignReelsSlider v-if="data" :projects="projects"
          class="-order-1 mx-auto max-w-[450px] lg:order-1 lg:col-span-6 lg:col-start-8 xl:col-start-9 2xl:col-start-9 2xl:ms-10" />
      </div>
    </div>
  </header>
</template>
<style scoped></style>
