<template>
  <main>
    <div class="detail--container--full">
      <!-- 풀사이즈 배너 텍스트 1줄용 -->
      <fullSizeBannerText
        :height="856"
        :imagePath="bannerTextPath"
        class="video"
        textLocation="bottomleft2"
        type="cover"
        altText="The new Audi RS Q8 performance"
        btnText="상담 신청"
        :btnLink="`https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=${config.public.testDriveCode}&selectCar=RS_Q8&testType=2`"
        btnTarget="_blank"
        btnText2="내 차량 만들기"
        btnLink2="https://www.audi.co.kr/ko/models/q8/rs-q8-suv-performance-2025/configurator/?ulid=1762763362242&pr=4MTRR20_2025%7C9399%7CAR#configurator"
        btnTarget2="_blank"
        cautionText=""
      />

      
      <!-- 타이틀 비주얼 컴포넌트 -->
      <TitleVisual
      title="시선은 사로잡고, 심장을 뒤흔든다"
      description=""
      textAlign="center"
      theme="dark"
      :animation="true"
      :animationDelay="300"
      />
      
      <!-- 링크 리스트 컴포넌트 -->
      <LinkList class="mt--20" :links="reservationLinks" />
      
      <TrimInfoColumn class="mt--100" :items="trimInfoItems" />

      <TitleVisual
        title="우아함을 충족시켜주는 성능"
        description="Audi RS Q8 performance는 강력한 V8 4.0 트윈터보 엔진과 SUV의 여유로운 공간, 럭셔리한 편안함과 독보적인 디자인이 결합된 모델입니다."
        textAlign="left"
        theme="dark"
        type="middle2"
        :animation="true"
        :animationDelay="300"
      />

      <SwiperBanner :slides="bannerSlides" :autoplay="false" :loop="false" type="vertical" />

      <!-- 
      타이틀 비주얼 컴포넌트

      type : middle 타이틀 중간사이즈면 좌우 여백없음
             middle2 : 타이틀 중간사이즈면서 좌우 여백있음
      -->
      <TitleVisual
        title="가공할 위력, 놀라운 역동성"
        description="정지 상태에서 시속 100 km까지 단 3.6초만에 도달합니다.<br>출력 640 PS, 최대 토크 86.68 kg.m의 강력한 성능을 자랑하는 Audi RS Q8 performance는 기본으로 장착된 RS 세라믹 브레이크와 정교하게 튜닝된 드라이브 및 서스펜션 부품을 통해 놀라운 역동성을 선사합니다."
        textAlign="left"
        theme="dark"
        type="middle2"
        :animation="true"
        :animationDelay="300"
      />

      <SwiperBanner
        :slides="bannerSlides2"
        notice=""
        :autoplay="false"
        :loop="false"
      />

      <!-- 타이틀 비주얼 컴포넌트 -->
      <TitleVisual
        title="독보적인 캐릭터"
        description="Audi RS Q8 performance의 독보적인 캐릭터는 블랙 패키지 플러스 외장과 매트 카본 스타일링 패키지로 더욱 빛납니다."
        textAlign="left"
        type="middle2"
        theme="dark"
        :animation="true"
        :animationDelay="300"
      />

      <SwiperBanner
        :slides="bannerSlides3"
        :autoplay="true"
        :loop="true"
        type="vertical"
      />

      <SwiperBanner
        :slides="bannerSlides4"
        title=""
        subtitle=""
        smalldesc=""
        notice=""
        type=""
        :autoplay="{ delay: 0 }"
        :loop="false"
      />

      <!-- 타이틀 비주얼 컴포넌트 -->
      <TitleVisual
        title="모든 라인에 담긴 특별한 개성"
        description="블랙 파인 나파가죽은 물론 디나미카 및 알칸타라가 폭넓게 사용된 ‘RS 디자인 패키지 레드’ 인테리어는 곳곳에 적용된 익스프레스 레드 컬러의 스티치와 레드 엣지의 시트벨트가 돋보입니다."
        textAlign="left"
        type="middle2"
        theme="dark"
        :animation="true"
        :animationDelay="300"
      />

      <SwiperBanner
        :slides="bannerSlides5"
        type="vertical"
        :autoplay="false"
        :loop="false"
        class="mt--80"
      />

      <SwiperBanner
        :slides="bannerSlides6"
        :autoplay="false"
        type="vertical"
        :loop="false"
        class="mt--80"
      />

      <ProductCard
        data-type="square"
        image="/img/models/q8/rs-q8/main4.jpg"
        title="Audi connect"
        subtitle="인터넷에 바로 접속 가능하며 완벽한 연결성을 자랑하는 혁신적인 Audi connect 서비스는 일상을 더 편리하게 만들어주며, 여행 계획 또한 더 손쉬워집니다."
        smallDescription="참고: Audi Q6 SUV e-tron 이미지입니다."
        buttonText="자세히 보기"
        buttonUrl="/aboutaudi/audi_connect"
        buttonTarget=""
        mini="true"
        layout="horizontal"
        imagePosition="left"
      />

      <!-- 타이틀 비주얼 컴포넌트 -->
      <TitleVisual
        title="존재감을 확실하게 드러내는 디자인, Audi 익스클루시브"
        description="Audi 익스클루시브로 Audi RS Q8 performance를 더욱 유니크하게 만들어 보십시오. 엄선된 장식과 색상을 입힌 가죽, 다양한 색상의 맞춤 도색 마감이 제공됩니다. 원하는 방식으로 스타일을 꾸며보십시오."
        textAlign="left"
        type="middle2"
        theme="dark"
        btnTitle="자세히 보기"
        btnLink="/exclusive/exclusive-order"
        :animation="true"
        :animationDelay="300"
        class="mt--100"
      />

      <SwiperBanner
        :slides="bannerSlides7"
        :autoplay="false"
        :loop="false"
        class="mt--80"
      />

      <!-- <CareProgramItem data-type-row="3" :items="careProgramItems" /> -->

      <!-- 제품 카드 컴포넌트 -->
      <ProductCard
        data-type="square"
        image="/img/etronms/3_730X730.webp"
        title="Audi
      Warranty"
        smallTitle="아우디 보증 프로그램"
        subtitle="더 오래,
      더 안전한 드라이빙을 위한 아우디 5년 보증 프로그램으로 아우디와 함께 어디든 안심하고
      떠나세요.<br /><br />
      › 대상차량 : 아우디코리아에서 공식 딜러사를 통해 판매하는 모든 21년식 모델부터
      적용<br /><br />
      › 보증 기간 : 5년 보증 또는 최종 주행거리 150,000km 까지 (선도래조건)<br /><br />
      › 대상 부품 : 제조사 보증과 동일<br /><br />
      › 차량당 총 보상한도(누적) : 신차 권장소비자가격(VAT포함)<br /><br />
      * 자세한 내용은 차량과 함께 제공되는 아우디 보증서를 확인하세요."
        layout="horizontal"
        imagePosition="left"
      />

      <ProductCard
        data-type="square"
        image="/img/models/e-tron-gt/2_730X730.webp"
        title="Car Service Plus"
        smallTitle="카 서비스 플러스"
        subtitle="카 서비스 플러스 프로그램은 아우디 공식 서비스센터에서 제공하는 차량 유지관리 서비스 입니다.<br/><br/>
아우디 공식 서비스센터를 통해 제공되는 전문적이고 체계적인 유지관리는 추가 비용 부담없이 고객님 차량의 가치를 더욱 높여줄 것입니다."
        buttonText="카 서비스 플러스 확인하기"
        buttonUrl="/service/program/carserviceplus"
        buttonTarget="_self"
        layout="horizontal"
        imagePosition="right"
      />

      <ProductCard
        data-type="square"
        image="/img/models/q8/q8/suv.jpg"
        title="아우디 SUV"
        subtitle="아우디의 브랜드 철학은 'Q' SUV 모델이 추구하는 가치와 맞닿아 있습니다. 액티브한 라이프스타일을 지향하고 도심과 오프로드의 드라이빙 성능을 타협하지 않는 엔지니어링을 추구합니다. 도전적이고 혁신적인, 그러나 자유롭고 여유를 아는 열정가인 당신을 위해. 모든 길에 Q가 있다. 아우디 SUV, Q Familiy."
        buttonText="아우디 SUV 확인하기"
        buttonUrl="/models/suv"
        buttonTarget="_self"
        layout="horizontal"
        imagePosition="left"
      />

      <CautionText />
    </div>
  </main>
</template>

<script setup>
  // 컴포넌트 import
  import fullSizeBannerText from "~/components/block/fullSizeBannerText1.vue";
  import ParallaxBanner from "~/components/block/parallaxBanner.vue";
  import SwiperBanner from "~/components/block/SwiperBanner.vue";
  import TitleVisual from "~/components/block/TitleVisual.vue";
  import ProductCard from "~/components/block/ProductCard.vue";
  import CautionText from "~/components/block/cautionText4.vue";
  import LinkList from "~/components/block/LinkList.vue";
  import TrimInfoColumn from "~/components/block/TrimInfoColumn.vue";
  import CareProgramItem from "~/components/block/CareProgramItem.vue";

  // Runtime Config 가져오기
  const config = useRuntimeConfig();

  const bannerTextPath = ref("/img/models/q8/rs-q8/main1.jpg");

  // Trim 정보 데이터
  const trimInfoItems = ref([
    {
      title: "최대 출력",
      value: "640",
      unit: "ps",
      subText: "",
    },
    {
      title: "가속력(0~100 km/h)",
      value: "3.6",
      unit: "초",
      subText: "",
    },
    {
      title: "최고 속도",
      value: "305",
      unit: "km/h",
      subText: "(안전 제한속도)",
    },
  ]);

  // 링크 데이터 배열
  const reservationLinks = ref([
    {
      text: "내 차량 만들기",
      url:
        "https://www.audi.co.kr/ko/models/q8/rs-q8-suv-performance-2025/configurator/?ulid=1762763446882&pr=4MTRR20_2025%7C9399%7CAR#configurator",
      target: "_blank",
      showIcon: true,
    },
    {
      text: "월 납입금 계산",
      url: "https://www.audikoreaevent.co.kr/lms/calculator.do?cidx=71",
      target: "_blank",
      showIcon: true,
    },
    {
      text: "차량 상담",
      url: "https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=" + config.public.testDriveCode + "&selectCar=RS_Q8&testType=2",
      target: "_blank",
      showIcon: true,
    },
    {
      text: "전시장/AS센터",
      url: "/company/serviceCenter",
      target: "_blank",
      showIcon: true,
    },
    {
      text: "카탈로그 다운로드",
      url:
        "https://www.audikoreaevent.co.kr/aca/ecatalog/download/Audi_RS_Q8_catalogue.pdf",
      target: "_blank",
      showIcon: true,
    },
    {
      text: "디지털 카탈로그",
      url: "http://www.audi-catalogue.co.kr/RSQ8/",
      target: "_blank",
      showIcon: true,
    },
  ]);

  // Swiper 배너 슬라이드 데이터 (30% + 70% 레이아웃용)
  const bannerSlides = ref([
    {
      video: "/img/models/q8/rs-q8/main2.mp4",
      alt: "",
      title: "",
      subtitle: "",
      smalldesc: "",
    },
  ]);

  const bannerSlides2 = ref([
    {
      image: "/img/models/q8/rs-q8/slide1-1.jpg",
      alt: "확실한 역동성",
      title: "확실한 역동성",
      subtitle:
        "가속 시 RS 스포츠 배기 시스템과 인상적인 V8 엔진사운드가 스포츠 드라이빙의 즐거움을 더해줍니다. 최고 속도는 305 km/h에 달하며 RS 전용 소프트웨어 덕분에 스포츠 디퍼렌셜이 적용된 콰트로 사륜구동 시스템이 더욱 정교한 드라이빙을 선사합니다.",
      cautiondesc:
        "",
    },
    {
      image: "/img/models/q8/rs-q8/slide1-2.jpg",
      alt: "성능을 충족시켜주는 제어",
      title: "성능을 충족시켜주는 제어",
      subtitle:
        "기본 장착된 RS 세라믹 브레이크 시스템이 역동적인 주행에서도 과열 없이 차체를 최대한 제어할 수 있게 해줍니다. 또한 레드 컬러로 도장된 대형 브레이크 캘리퍼가 시선을 사로잡습니다.",
      cautiondesc:
        "",
    },
  ]);

  const bannerSlides3 = ref([
    {
      image:
        "/img/models/q8/rs-q8/slide2-1.jpg",
      alt: "인상적인 외관",
      title: "인상적인 외관",
      subtitle: "커다란 흡기구와 허니콤 구조의 RS 전용 싱글프레임이 정면에서 인상적인 존재감을 드러냅니다. 또한 매트 카본 요소와 어두운 색의 매트릭스 LED 헤드라이트가 황홀한 대조를 선보입니다.",
      smalldesc: "",
      cautiondesc: "",
    },
    {
      image:
        "/img/models/q8/rs-q8/slide2-2.jpg",
      alt: "강렬한 후면",
      title: "강렬한 후면",
      subtitle: "플레어 형태의 휠 아치가 파워풀한 후면의 느낌을 한층 더 강조합니다. RS 전용 디자인, 특히 매트 카본 디테일을 포함한 범퍼가 외관을 더욱 돋보이게 하며, 차체 색상의 RS 전용 루프 에지 스포일러가 후면 디자인을 완성합니다.",
      smalldesc: "",
      cautiondesc: "연비(복합): 12.8~13.4 l/100 km, CO₂ 배출량(복합): 291~304 g/km, CO₂ 배출 등급: G",
    },
    {
      image:
        "/img/models/q8/rs-q8/slide2-3.jpg",
      alt: "모든 라인에 담긴 역동성",
      title: "모든 라인에 담긴 역동성",
      subtitle: "사이드 미러에도 매트 카본이 적용되어 있으며 도어를 열면 ‘RS performance’로고가 바닥에 투사되는 도어 엔트리 라이트가 특별함을 더합니다.",
      smalldesc: "",
      cautiondesc: "",
    },
    {
      image:
        "/img/models/q8/rs-q8/slide2-4.jpg",
      alt: "크고 가벼운 휠",
      title: "크고 가벼운 휠",
      subtitle: "카리스마 넘치는 23인치 5-Y 스포크 매트 콘트라스트 블랙 휠은 Audi RS Q8 performance만을 위해 개발되었습니다.",
      smalldesc: "",
      cautiondesc: "",
    },
  ]);

  const bannerSlides4 = ref([
    {
      video: "/img/models/q8/rs-q8/slide3-1.mp4",
      alt: "인상적인 리어라이트",
      title: "인상적인 리어라이트",
      subtitle:
        "디지털 OLED 리어라이트와 Audi 레이저 라이트가 적용된 HD 매트릭스 LED 헤드라이트로 인상적인 디지털 라이트 시그니처가 탄생됩니다. 선택 가능한 여러 디지털 라이트 시그니처 세트 옵션이 있으며 RS 모델에만 적용되는 RS 전용 시그니처도 있습니다.",
      smalldesc: "",
    },
    {
      video: "/img/models/q8/rs-q8/slide3-2.mp4",
      alt: "감각적인 조명",
      title: "감각적인 조명",
      subtitle: "Audi 레이저 라이트가 적용된 HD 매트릭스 LED 헤드라이트는 Audi RS Q8 performance의 개성을 한층 돋보이게 해줍니다. 커밍홈/리빙홈 기능을 이용해 집 앞을 비추는 다이내믹한 라이트 시퀀스 세리모니도 선택할 수 있습니다.",
      smalldesc: ""
    }
  ]);

  const bannerSlides5 = ref([
    {
      video: "/img/models/q8/rs-q8/main3.mp4",
      alt: "",
      title: "",
      subtitle:
        "",
      smalldesc: "",
    },
  ]);

  const bannerSlides6 = ref([
    {
      image: "/img/models/q8/rs-q8/slide4-1.jpg",
      alt: "훌륭한 승차감",
      title: "훌륭한 승차감",
      subtitle:
        "블랙 컬러의 스포츠 시트 플러스는 천공 발코나 가죽으로 제작되었으며, 다양한 설정 옵션 덕분에 탑승자에게 꼭 맞는 훌륭한 지지력을 제공합니다. 레드 컬러가 돋보이는 스티칭, 스포티한 허니콤 패턴, 시트 등받이의 RS 엠보싱이 최고의 만족감을 선사합니다.",
      smalldesc: "",
    },
    {
      image: "/img/models/q8/rs-q8/slide4-2.jpg",
      alt: "한눈에 확인하는 퍼포먼스",
      title: "한눈에 확인하는 퍼포먼스",
      subtitle:
        "퍼포먼스가 강조된 Audi 버추얼 콕핏 플러스는 12.3인치 디스플레이에 레이스카를 연상시키는 RS 레이아웃이 추가로 제공됩니다. RS 모드를 활성화시키면 긴장감 넘치는 런웨이 계기 디자인이 화면을 장악합니다.",
      smalldesc: "",
    },
    {
      image: "/img/models/q8/rs-q8/slide4-3.jpg",
      alt: "몰입을 이끄는 사운드",
      title: "몰입을 이끄는 사운드",
      subtitle:
        "Bang & Olufsen 3D 어드벤스드 사운드 시스템과 동적 주행 소음 보상기능으로 모든 좌석에서 정교한 사운드를 감상할 수 있습니다. 23채널의 Beo Core 앰프, 23스피커와 1920와트의 강력한 출력으로 진정한 프리미엄 사운드를 경험해 보십시오.",
      smalldesc: "",
    }
  ]);

  const bannerSlides7 = ref([
    {
      image: "/img/models/q8/rs-q8/slide5-1.jpg",
      alt: "존재감을 확실하게 드러내는 디자인",
      title: "존재감을 확실하게 드러내는 디자인",
      subtitle:
        "많은 이들이 특별함을 추구하지만, 특별함을 직접 창조할 수 있는 기회는 많지 않습니다. 예를 들어, 애로우 그레이 펄 컬러의 Audi 익스클루시브 커스텀 페인트 마감으로 나만의 새로운 Audi RS Q8 performance를 표현해 보세요.",
      smalldesc: "",
    },
    {
      image: "/img/models/q8/rs-q8/slide5-2.jpg",
      alt: "나만의 개성이 담긴 인테리어",
      title: "나만의 개성이 담긴 인테리어",
      subtitle:
        "발코나 가죽 시트커버와 트림, 대비되는 컬러의 스티칭과 벨트 그리고 등받이와 바닥 매트에 크림슨 레드로 수놓은 RS 로고가 돋보이는 제트 그레이/실버 Audi 익스클루시브 인테리어로 실내 공간에 나만의 개성과 특별한 분위기를 연출할 수 있습니다.",
      smalldesc: "",
    }
  ]);

  // Parallax Banner 이미지 데이터
  // const customParallaxImages = ref({
  //   xl: '/img/models/q8/rs-q8/main2.jpg',
  //   xl2x: '/img/models/q8/rs-q8/main2.jpg',
  //   m: '/img/models/q8/rs-q8/main2.jpg',
  //   m2x: '/img/models/q8/rs-q8/main2.jpg',
  //   s: '/img/models/q8/rs-q8/main2.jpg',
  //   s2x: '/img/models/q8/rs-q8/main2.jpg',
  //   xs: '/img/models/q8/rs-q8/main2.jpg',
  //   xs2x: '/img/models/q8/rs-q8/main2.jpg'
  // });

  const careProgramItems = ref([
    {
      imagePath: "/img/models/e-tron-gt/RSeGTp_2024_6631-L.avif",
      title: "RS e-tron GT performance",
      description: "아우디 공식 서비스센터에서 제공되는 차량 유지관리 서비스입니다.",
      linkUrl: "/models/detail/rs-e-tron-gt-performance-master-2025",
      linkText: "지금 알아보기",
      linkTarget: "_self",
      smallText:
        "전력 소비량: 3.4 km/kWh (복합), CO2 배출량 (복합): 0g/km, 배출 등급: 4등급",
      captionText: "",
    },
    {
      imagePath: "/img/models/e-tron-gt/Q6_2023_5202-cast_1-v2-L.avif",
      title: "아우디 사고 수리 지원 프로그램",
      description: "고객님의 안전한 이동과 차량의 완벽한 수리를 약속 드립니다.",
      linkUrl: "/models/detail/q6-suv-e-tron-2025",
      linkText: "지금 알아보기",
      linkTarget: "_self",
      smallText:
        "전력 소비량(복합): 19.8-16.1kWh/100km, CO₂ 배출량(복합): 0g/km, CO₂ 등급: A",
    },
  ]);
</script>
