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

      <BlockParallaxBanner
        :images="customParallaxImages"
        title="우아하면서 카리스마 넘치는 외관"
        description="Audi Q8 SUV는 인상적인 비율, 스포티한 쿠페 라인, 넉넉한 실내 공간, 다이내믹한 성능으로 시선을 사로잡습니다."
      />

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

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

      type : middle 타이틀 중간사이즈면 좌우 여백없음
             middle2 : 타이틀 중간사이즈면서 좌우 여백있음
      -->
      <TitleVisual
        title="파워풀하고 우아한 외관"
        description="Audi Q8 SUV는 클래식 콰트로 디자인과 파워풀한 숄더 라인으로 오프로드 DNA를 확실히 보여줍니다. 우아하게 경사진 루프 라인, 강렬한 Audi 싱글프레임, 새롭게 디자인 된 2D Audi 로고 그리고 특히 S 라인 익스테리어 패키지가 조화를 이루며 스포티한 외관을 완성합니다. "
        textAlign="left"
        theme="dark"
        type="middle2"
        :animation="true"
        :animationDelay="300"
      />

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

      <!-- 타이틀 비주얼 컴포넌트 -->
      <TitleVisual
        title="디지털 조명의 혁신"
        description="Audi 레이저 라이트가 적용된 HD 매트릭스 LED 헤드라이트와 네 가지 디지털 OLED 테일라이트는 라이트 시그니처를 통해 매력적인 나만의 라이트 애니메이션을 연출할 수 있습니다. (Premium 모델 적용) "
        textAlign="left"
        type="middle2"
        theme="dark"
        :animation="true"
        :animationDelay="300"
      />

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

      <!-- 타이틀 비주얼 컴포넌트 -->
      <TitleVisual
        title="다기능 공간 콘셉트"
        description="넉넉한 실내 공간에 파노라마 글래스 선루프가 더해져 더욱 개방적인 느낌을 줍니다. 필요에 따라 유연하게 공간을 구성할 수 있으며, 완전히 접으면 최대 1,755리터의 트렁크 용량을 확보할 수 있습니다."
        textAlign="left"
        type="middle2"
        theme="dark"
        :animation="true"
        :animationDelay="300"
        class="mt--100"
      />

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

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

      <!-- 타이틀 비주얼 컴포넌트 -->
      <TitleVisual
        title="역동성과 높은 활용도"
        description="Audi Q8 SUV는 주행 시 자유로움과 자신감을 선사하며 스포티한 주행, 오프로드 성능, 최대 3.5톤의 트레일러 하중으로 높은 활용도를 자랑합니다. "
        textAlign="left"
        type="middle2"
        theme="dark"
        :animation="true"
        :animationDelay="300"
        class="mt--100"
      />

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

      <!-- <ProductCard
        data-type="square"
        image="/img/models/e-tron-gt/SeGT_2024_6505-S-L.webp"
        title="아우디 S e-tron GT가 마음에 드시나요?"
        subtitle="지금 바로 고품질의 기본 구성부터 시작해보세요."
        buttonText="차량 구성하기"
        buttonUrl="https://www.audi.co.kr/ko/models/e-tron-gt/s-e-tron-gt-master-2025/konfigurator/?ulid=1762753594174&pr=F8PR9D0_2025%7CL5L5%7CFO#configurator"
        buttonTarget="_blank"
        layout="horizontal"
        imagePosition="left"
      /> -->

      <!-- <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/q8/main1.jpg");

  // Trim 정보 데이터
  const trimInfoItems = ref([
    {
      title: "최대출력",
      value: "340",
      unit: "ps",
      subText: "Q8 55 TFSI quattro 기준",
    },
    {
      title: "최대 수납 공간",
      value: "1,755",
      unit: "리터",
      subText: "",
    },
    {
      title: "최대 견인력",
      value: "3,500",
      unit: "kg",
      subText: "",
    },
  ]);

  // 링크 데이터 배열
  const reservationLinks = ref([
    {
      text: "시승 신청",
      url: "https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=" + config.public.testDriveCode + "&selectCar=Q8&testType=1",
      target: "_blank",
      showIcon: true,
    },
    {
      text: "내 차량 만들기",
      url:
        "https://www.audi.co.kr/ko/models/e-tron-gt/rs-e-tron-gt-performance-master-2025/konfigurator/?ulid=1762755892978&pr=F8PR8D0_2025%7CL5L5%7CAR#configurator",
      target: "_blank",
      showIcon: true,
    },
    {
      text: "월 납입금 계산",
      url: "https://www.audikoreaevent.co.kr/lms/calculator.do?cidx=9",
      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=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_Q8_catalogue.pdf",
      target: "_blank",
      showIcon: true,
    },
    {
      text: "디지털 카탈로그",
      url: "http://www.audi-catalogue.co.kr/Q8/",
      target: "_blank",
      showIcon: true,
    },
  ]);

  // Swiper 배너 슬라이드 데이터 (30% + 70% 레이아웃용)
  const bannerSlides = ref([
    {
      video: "/img/models/q8/q8/slide1-1.mp4",
      alt: "강력한 존재감",
      title: "강력한 존재감",
      subtitle: "블랙 패키지와 함께 새로운 사키르 골드, 메탈릭 색상이 추가되어 스포티함과 우아함의 완벽한 조화가 돋보입니다. 실내 공간이 여유롭게 디자인되어 탑승객과 짐을 위한 넉넉한 공간을 제공합니다.",
      smalldesc: "",
    },
    {
      video: "/img/models/q8/q8/slide1-2.mp4",
      alt: "매혹적인 디지털 조명 기술",
      title: "매혹적인 디지털 조명 기술",
      subtitle: "Audi 레이저 라이트가 적용된 HD 매트릭스 LED 헤드라이트와 네 가지 라이트 시그니처 세트와 매칭되는 다이내믹한 조명 시퀀스가 적용된 디지털 OLED 테일라이트가 차량 외관에 개성 넘치는 매력을 더합니다.(Premium 모델)",
      smalldesc: "",
    },
    {
      image: "/img/models/q8/q8/slide1-3.jpg",
      alt: "",
      title: "모험심을 충족시켜주는 역동성",
      subtitle: "콰트로 사륜구동, 파워풀한 엔진, 어댑티브 에어 서스펜션이 결합되어 고속 주행뿐만 아니라 그 어떤 주행에서도 최고의 성능을 선사합니다. Audi Q8 SUV가 선사하는 주행 역동성의 짜릿함을 만끽해보십시오."
    }
  ]);

  const bannerSlides2 = ref([
    {
      image: "/img/models/q8/q8/slide2-1.jpg",
      alt: "진취적인 느낌의 외관",
      title: "진취적인 느낌의 외관",
      subtitle:
        "S 라인 익스테리어 패키지로 Audi Q8 SUV의 스포티한 면이 한층 부각됩니다. 스칸듐 그레이 혹은 블랙 컬러의 Audi 싱글프레임 마스크와 새로워진 디자인의 라디에이터 그릴에서 역동적인 매력이 강조됩니다. 이뿐만 아니라, 전체 도장 마감 처리된 S 라인 범퍼와 대형 흡기구가 시선을 사로잡는 차량 전면 디자인을 연출합니다.",
      cautiondesc:
        "",
    },
    {
      image: "/img/models/q8/q8/slide2-2.jpg",
      alt: "스포티한 디테일",
      title: "스포티한 디테일",
      subtitle:
        "일체형 테일파이프와 디퓨저는 Audi Q8 SUV의 주행성능을 그대로 보여줍니다. 2D로 새롭게 디자인된 전후면의 Audi 로고는 새로운 디자인 언어에서 두드러지는 특징입니다. S 루프 엣지 스포일러가 장착된 S 라인 익스테리어 패키지는 고급스러운 외관을 완성해줍니다.",
      cautiondesc:
        "",
    },
    {
      image: "/img/models/q8/q8/slide2-3.jpg",
      alt: "유려한 바디라인",
      title: "유려한 바디라인",
      subtitle:
        "Audi Q8 SUV가 자랑하는 우아한 외관은 무엇보다도 경사진 루프 라인의 쿠페 실루엣 덕분입니다. 이로 인해 차량 라인이 더욱 우아하고 역동적으로 보입니다. B-필러에는 엔진 타입을 비롯한 모델명이 레이저로 각인되어 있습니다.",
      cautiondesc:
        "",
    },
    {
      image: "/img/models/q8/q8/slide2-4.jpg",
      alt: "어디에서나 돋보이는 디자인",
      title: "어디에서나 돋보이는 디자인",
      subtitle:
        "인상적인 디자인의 5-트윈암 그라파이트 그레이 22인치 휠 혹은 아우디 스포트 5-트윈스포크 모듈 매트 텍스처 그레이인서트 22인치 휠(Premium 모델)이 Audi Q8 SUV의 진취적인 미적 감각을 한층 돋보이게 합니다.",
      cautiondesc:
        "",
    }
  ]);

  const bannerSlides3 = ref([
    {
      video:
        "/img/models/q8/q8/slide3-1.mp4",
      alt: "조명 선택",
      title: "조명 선택",
      subtitle:
        "진정 특별한 카리스마를 발산하고자 한다면, MMI에서 HD 매트릭스 LED 헤드라이트와 네 가지 디지털 OLED 테일라이트 시그니처를 선택할 수 있습니다. (Premium 모델 적용)",
      smalldesc: "",
      cautiondesc: "",
    },
    {
      video:
        "/img/models/q8/q8/slide3-1.mp4",
      alt: "시야 확보를 위한 조명",
      title: "시야 확보를 위한 조명",
      subtitle:
        "Audi 레이저 라이트가 적용된 HD 매트릭스 LED 헤드라이트는 거의 두 배에 달하는 조명 범위로 운전자의 마음을 사로잡습니다. 또한 운전자가 선택한 라이트 시그니처에 맞춰 귀가/외출 기능의 다이내믹한 조명 시퀀스를 표시해줍니다. (Premium 모델 적용) ",
      smalldesc: "",
      cautiondesc: "",
    },
  ]);

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

  const bannerSlides5 = ref([
    {
      image: "/img/models/q8/q8/slide4-1.jpg",
      alt: "손끝에 느껴지는 프리미엄 인테리어의 퀄러티",
      title: "손끝에 느껴지는 프리미엄 인테리어의 퀄러티",
      subtitle:
        "Audi Q8 SUV의 매트 브러쉬드 알루미늄 인레이가 전체적으로 고급스럽고 조화로운 느낌을 자아냅니다.",
      smalldesc: "",
    },
    {
      image: "/img/models/q8/q8/slide4-2.jpg",
      alt: "모든 좌석을 최고의 좌석으로",
      title: "모든 좌석을 최고의 좌석으로",
      subtitle:
        "S 엠보싱 처리된 마름모 패턴과 스티칭이 들어간 발코나 가죽 스포츠 시트 플러스가 탁월한 착좌감을 제공합니다. 사이드 볼스터와 허리 요추 받침대는 공기압으로 조절하여 체형에 맞게 조정할 수 있으며 앞 좌석 마사지 시트도 여행의 피로를 덜어줍니다.",
      smalldesc: "",
    },
    {
      image: "/img/models/q8/q8/slide4-3.jpg",
      alt: "놀라운 3D 사운드 경험",
      title: "놀라운 3D 사운드 경험",
      subtitle:
        "놀라운 입체 사운드를 경험해보십시오. 16채널, 19스피커, 730와트 Bang & Olufsen 3D 프리미엄 사운드 시스템의 입체음향이 실내 공간을 실제보다 더 넓게 느껴지도록 합니다.",
      smalldesc: "참고: 이미지는 B&O 3D Advanced Sound이며 3D Premium Sound와 다를 수 있습니다.",
    },
  ]);

  const bannerSlides6 = ref([
    {
      image: "/img/models/q8/q8/slide5-1.jpg",
      alt: "파워풀한 역동성",
      title: "파워풀한 역동성",
      subtitle:
        "Audi Q8 SUV는 경쾌한 구동력을 선사하는 파워풀한 TFSI 및 TDI엔진을 제공합니다. 기본 장착된 어댑티브 에어 서스펜션을 통해 탁월한 주행 역동성과 향상된 승차감을 만끽할 수 있습니다.",
      smalldesc: "",
    },
    {
      image: "/img/models/q8/q8/slide5-2.jpg",
      alt: "한 차원 높은 드라이빙의 즐거움",
      title: "한 차원 높은 드라이빙의 즐거움",
      subtitle:
        "Audi Q8 SUV에는 정밀한 핸들링과 최상의 접지력을 위해 콰트로 사륜구동 시스템이 기본 장착되어 있습니다. 또한 최대 254mm에 이르는 지상고 덕택에 다채로운 주행 경험을 즐길 수 있습니다.",
      smalldesc: "",
    }
  ]);

  // Parallax Banner 이미지 데이터
  const customParallaxImages = ref({
    xl: '/img/models/q8/q8/main2.jpg',
    xl2x: '/img/models/q8/q8/main2.jpg',
    m: '/img/models/q8/q8/main2.jpg',
    m2x: '/img/models/q8/q8/main2.jpg',
    s: '/img/models/q8/q8/main2.jpg',
    s2x: '/img/models/q8/q8/main2.jpg',
    xs: '/img/models/q8/q8/main2.jpg',
    xs2x: '/img/models/q8/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>
