<template>
  <main>
    <div class="detail--container--full pb--120">
      <FullSizeBannerText1
        :imagePath="bannerImagePath"
        altText="아우디 쿠페"
        textLocation="bottom"
        type="cover"
        :height="800"
      />

      <TitleVisual
        title="아우디 쿠페"
        description="아우디 쿠페 모델은 뛰어난 성능은 물론 독특한 2도어의 스포티한 스타일을 보여줍니다. 디자인 아이콘 아우디 TT 모델부터 시대를 초월한 아우디 A5 모델의 디자인까지 아우디 쿠페의 다양한 모델은 브랜드의 첨단 기술과 엔지니어링을 현대적으로 구현했습니다."
        textAlign="center"
        theme="dark"
        :animation="true"
        :animationDelay="300"
      />

      <!-- 링크 리스트 컴포넌트 -->
      <LinkList class="mt--20" :links="reservationLinks" />

      <modelList id="" :items="etronLineup" />
    </div>
  </main>
</template>

<script setup>
  // 컴포넌트 import
  import TitleVisual from "~/components/block/TitleVisual.vue";
  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
  import LinkList from "~/components/block/LinkList.vue";
  import modelList from "~/components/block/modelList.vue";

  const bannerImagePath = ref("/img/models/1920x1080_audi_coupe.avif");
  // 링크 데이터 배열
  const reservationLinks = ref([
    {
      text: "재고 확인하기",
      url: "/",
      target: "_blank",
      class: "pl--0",
      showIcon: true,
    },
    {
      text: "월 납입금 계산",
      url: "https://www.audikoreaevent.co.kr/lms/calculator.do",
      target: "_blank",
      class: "pl--0",
      showIcon: true,
    },
    {
      text: "상담신청",
      url: "/",
      target: "_blank",
      class: "pl--0",
      showIcon: true,
    },
    {
      text: "전시장/AS센터",
      url: "/",
      target: "_blank",
      class: "pl--0",
      showIcon: true,
    },
  ]);
  const etronLineup = ref([
    {
      imagePath: "/img/models/coupe1.avif",
      imageAlt: "A5 Coupé",
      title: "A5 Coupé",
      description:
        "강력한 퍼포먼스로 완성된 우아한 스타일. 아우디 A5 Coupé 전방, 측면, 후방에 적용된 새로운 디자인 요소들로 아우디 A5 쿠페는 우아함을 과시합니다. 매력적인 겉모습 속에는 첨단 기술과 강력한 엔진이 숨겨져 있습니다.",
      linkUrl: "/",
      linkText: "아우디 A5 Coupé 더 알아보기",
      linkTarget: "_self",
    },
  ]);
</script>
