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

      <TitleVisual
        title="아우디 SUV"
        description="아우디의 브랜드 철학은 'Q' SUV 모델이 추구하는 가치와 맞닿아 있습니다. 액티브한 라이프스타일을 지향하고 도심과 오프로드의 드라이빙 성능을 타협하지 않는 엔지니어링을 추구합니다. 도전적이고 혁신적인, 그러나 자유롭고 여유를 아는 열정가인 당신을 위해 모든 길에 Q가 있다. 아우디 SUV, Q Familiy."
        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/banner_1920X1080.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/suv1.avif",
      imageAlt: "Q4 e-tron",
      title: "Q4 e-tron",
      description:
        "아우디의 컴팩트 순수 전기 SUV. 아우디 Q4 e-tron 아우디 Q4 e-tron은 명확한 디자인 컨셉으로 전기 모빌리티의 미래 비전을 제시합니다.",
      linkUrl: "/",
      linkText: "아우디 Q4 e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/suv2.avif",
      imageAlt: "Q4 Sportback e-tron",
      title: "Q4 Sportback e-tron",
      description:
        "아우디의 쿠페형 컴팩트 SUV. 순수전기차 아우디 Q4 스포트백 e-tron 아우디 Q4 스포트백 e-tron의 스포티한 디자인은 진보를 통해 완성된 전기 모빌리티의 미래를 담고 있습니다.",
      linkUrl: "/",
      linkText: "아우디 Q4 Sportback e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/suv3.avif",
      imageAlt: "Q6 e-tron",
      title: "Q6 e-tron",
      description:
        "이제, e-tron의 새로운 차원이 열립니다. 아우디 Q6 e-tron. 미래를 향한 새로운 디자인과 더욱 스마트해진 기술, 지금껏 볼 수 없었던 e-tron의 놀라운 혁신을 만나보세요.",
      linkUrl: "/",
      linkText: "아우디 Q6 e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/suv4.avif",
      imageAlt: "SQ6 e-tron",
      title: "SQ6 e-tron",
      description:
        "이제, e-tron의 새로운 차원이 열립니다. 아우디 SQ6 e-tron. 혁신에 퍼포먼스를 더한 새로운 전기의 시작. 새로운 PPE 플랫폼이 선사하는 다이나믹한 드라이빙을 경험해보세요.",
      linkUrl: "/",
      linkText: "아우디 SQ6 e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/suv5.avif",
      imageAlt: "Q8 e-tron",
      title: "Q8 e-tron",
      description: "더 빠른 충전, 더 멀리 갈 수 있는 자유. 아우디 Q8 e-tron.",
      linkUrl: "/",
      linkText: "아우디 Q8 e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/suv6.avif",
      imageAlt: "Q8 Sportback e-tron",
      title: "Q8 Sportback e-tron",
      description: "더 빠른 충전, 더 멀리 갈 수 있는 자유. 아우디 Q8 스포트백 e-tron.",
      linkUrl: "/",
      linkText: "아우디 Q8 Sportback e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/suv7.avif",
      imageAlt: "SQ8 Sportback e-tronL",
      title: "SQ8 Sportback e-tron",
      description: "더 빠른 충전, 더 멀리 갈 수 있는 자유. 아우디 SQ8 스포트백 e-tron.",
      linkUrl: "/",
      linkText: "아우디 SQ8 Sportback e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/suv8.avif",
      imageAlt: "Q3",
      title: "Q3",
      description:
        "올라운드 SUV. 아우디 Q3 2세대 아우디 Q3는 넓은 공간, 포괄적인 적응성 그리고 실용적인 다양한 기능으로 더 큰 효용을 제공합니다. 530 리터의 넓은 적재 공간과, 중대형 세그먼트에 적용되는 12.3인치 아우디 버츄얼 콕핏 플러스와 10.1인치 MMI 내비게이션 플러스, 주행 보조 시스템까지. 아우디 Q3는 SUV의 역량을 두루 갖춘 패밀리 SUV입니다.",
      linkUrl: "/",
      linkText: "아우디 Q3 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/suv9.avif",
      imageAlt: "Q3 Sportback",
      title: "Q3 Sportback",
      description:
        "아우디 Q3 스포트백은 쿠페의 아름다운 디자인과 SUV의 성능과 기능성을 모두 갖췄습니다. 다양한 편의 사양과 디지털 기술로 연결된 인포테인먼트 시스템은 드라이빙을 더욱 즐겁게 만듭니다.",
      linkUrl: "/",
      linkText: "아우디 Q3 Sportback 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/suv10.avif",
      imageAlt: "Q5",
      title: "Q5",
      description:
        "신형 Audi Q5 SUV는 강력한 구동 시스템으로 완성되는 재미와 파노라마 디스플레이의 인상적인 모습, 완벽한 SUV 비율이 선사하는 경이로움을 선사합니다.",
      linkUrl: "/",
      linkText: "아우디 Q5 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/suv11.avif",
      imageAlt: "Q5 Sportback",
      title: "Q5 Sportback",
      description: "달리는 순간, 모든 시선이 머문다",
      linkUrl: "/",
      linkText: "아우디 Q5 Sportback 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/suv12.avif",
      imageAlt: "Q7",
      title: "Q7",
      description:
        "다재다능한 럭셔리 SUV. 아우디 Q7 인상적인 새로운 스타일의 외부디자인, 미래지향적 인테리어, 파워풀한 엔진 성능, 새로운 차원의 기술과 운전자보조시스템까지. 더 새로워진 여유로움을 경험하세요.",
      linkUrl: "/",
      linkText: "아우디 Q7 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/suv13.avif",
      imageAlt: "SQ7",
      title: "SQ7",
      description: "더욱 다이내믹하게. 고성능 프리미엄 SUV 아우디 SQ7",
      linkUrl: "/",
      linkText: "아우디 SQ7 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/suv14.avif",
      imageAlt: "Q8",
      title: "Q8",
      description:
        "오직, 당신에게만 허락된 새로운 차원. 플래그십 SUV 아우디 Q8 아우디 Q8은 4도어 럭셔리 쿠페의 우아함에 대형 SUV의 성능과 실용성을 결합했습니다. 다양한 편의 장치가 차량 내 시스템에 포괄적으로 연결되어 있으며 오프로드 주행에 필요한 견고함을 갖추고 있는, 비즈니스와 레저 모두를 위한 듬직한 동반자입니다.",
      linkUrl: "/",
      linkText: "아우디 Q8 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/models/suv15.avif",
      imageAlt: "RS Q8 performance",
      title: "RS Q8 performance",
      description: "시선은 사로잡고, 심장을 뒤흔든다",
      linkUrl: "/",
      linkText: "아우디 RS Q8 performance 더 알아보기",
      linkTarget: "_self",
    },
  ]);
</script>
