<template>
  <main>
    <div class="detail--container--full">
      <!-- 풀사이즈 배너 텍스트 1줄용 -->
      <fullSizeBannerText
        :height="856"
        :imagePath="bannerTextPath"
        class="video"
        textLocation="bottomleft2"
        type="cover"
        altText="The new Audi SQ7"
        btnText="상담 신청"
        :btnLink="`https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=${config.public.testDriveCode}&selectCar=SQ7&testType=2`"
        btnTarget="_blank"
        btnText2="내 차량 만들기"
        btnLink2="https://www.audi.co.kr/ko/models/q7/sq7-suv-2025/configurator/?ulid=1762837089111&pr=4MQSW10_2025%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 SQ7 SUV는 스포티한 디자인으로 강력한 성능을 강조합니다. 또한 다양한 시트배열이 특징인 넉넉한 공간은 여러가지 상황에서 일상 생활을 더욱 편리하게 만들어줍니다."
      />

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

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

      type : middle 타이틀 중간사이즈면 좌우 여백없음
             middle2 : 타이틀 중간사이즈면서 좌우 여백있음
      -->
      <TitleVisual
        title="다이내믹한 퍼포먼스"
        description="Audi SQ7 SUV는 스포티한 주행과 뛰어난 승차감을 모두 만족시킵니다. 강력한 V8 TFSI 엔진의 파워는 물론 콰트로 사륜구동 시스템, 다이내믹 올 휠 스티어링, 스포츠 디퍼랜셜과 액티브 롤 스테빌라이저를 통해 도로에서 짜릿한 역동성과 뛰어난 안정성을 동시에 선사합니다."
        textAlign="left"
        theme="dark"
        type="middle2"
        :animation="true"
        :animationDelay="300"
      />

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

      <!-- 타이틀 비주얼 컴포넌트 -->
      <TitleVisual
        title="기능적이면서도 강렬한 아름다움"
        description="Audi SQ7은 다양한 컬러 옵션에 더하여 파노라마 글래스 선루프까지 갖추어 보는 이의 마음을 사로잡습니다. 레드 브레이크 캘리퍼를 포함한 22인치 휠이 돋보이는 외관을 완성합니다. "
        textAlign="left"
        type="middle2"
        theme="dark"
        :animation="true"
        :animationDelay="300"
      />

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

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

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

      <!-- 타이틀 비주얼 컴포넌트 -->
      <TitleVisual
        title="7인승 3열 시트"
        description="3열 시트로 최대 7명까지 탑승 가능한 공간을 확보할 수 있습니다. 모든 뒷좌석에 ISOFIX 어린이용 시트 마운팅을 적용할 수 있으며 2열과 3열 시트를 접으면 최대 1,921리터의 적재 공간을 확보할 수 있습니다. "
        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=""
        :loop="false"
        class="mt--80"
        />
  
        <!-- 타이틀 비주얼 컴포넌트 -->
        <TitleVisual
          title="존재감을 확실하게 드러내는 나만의 디자인, Audi exclusive"
          description="Audi exclusive로 당신만의 Audi SQ7 SUV를 더욱 유니크하게 만들어보십시오. 엄선된 장식, 다양한 색상의 가죽과 맞춤 도색 마감으로 당신만의 스타일을 꾸며보십시오. "
          textAlign="left"
          type="middle2"
          theme="dark"
          :animation="true"
          :animationDelay="300"
        />

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

      <!-- <ProductCard
        data-type="square"
        image="/img/models/q7/sq7/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"
      /> -->

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

  // Trim 정보 데이터
  const trimInfoItems = ref([
    {
      title: "최대 출력",
      value: "507",
      unit: "ps",
      subText: "",
    },
    {
      title: "가속력",
      value: "4.1",
      unit: "초",
      subText: "(0 - 100 km/h)",
    },
    {
      title: "최대 토크",
      value: "78.51",
      unit: "kgm",
      subText: "(2,000 - 4,000 rpm)",
    },
  ]);

  // 링크 데이터 배열
  const reservationLinks = ref([
    {
      text: "내 차량 만들기",
      url:
        "https://www.audi.co.kr/ko/models/q7/sq7-suv-2025/configurator/?ulid=1762837089111&pr=4MQSW10_2025%7C0Q0Q%7COQ#configurator",
      target: "_blank",
      showIcon: true,
    },
    {
      text: "월 납입금 계산",
      url: "https://www.audikoreaevent.co.kr/lms/calculator.do?cidx=65",
      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=SQ7&testType=2",
      target: "_blank",
      showIcon: true,
    },
    {
      text: "전시장/AS센터",
      url: "/company/serviceCenter",
      target: "_blank",
      showIcon: true,
    },
    {
      text: "카탈로그 다운로드",
      url:
        "https://audikoreaevent.co.kr/aca/ecatalog/download/Q7_trim_update_izcomm.pdf",
      target: "_blank",
      showIcon: true,
    },
    {
      text: "디지털 카탈로그",
      url: "http://www.audi-catalogue.co.kr/Q7/",
      target: "_blank",
      showIcon: true,
    },
  ]);

  // Swiper 배너 슬라이드 데이터 (30% + 70% 레이아웃용)
  const bannerSlides = ref([
    {
      image: "/img/models/q7/sq7/slide1-1.jpg",
      alt: "다이내믹한 드라이빙의 즐거움",
      title: "다이내믹한 드라이빙의 즐거움",
      subtitle: "뛰어난 승차감과 스포티한 핸들링을 만끽할 수 있습니다. Audi SQ7 SUV에는 매우 강력한 V8 TFSI 엔진과 함께 다이내믹한 성능을 향상시키는 다양한 기술이 탑재되어 있습니다.",
      smalldesc: "",
    },
    {
      video: "/img/models/q7/sq7/slide1-2.mp4",
      alt: "한 차원 다른 S 모델",
      title: "한 차원 다른 S 모델",
      subtitle: "새로운 디자인의 S 모델 전용 익스테리어 아이템이 장착된 Audi SQ7은 순수한 스포티함을 발산합니다.",
      smalldesc: "",
    },
    {
      video: "/img/models/q7/sq7/slide1-3.mp4",
      alt: "매혹적인 디지털 조명 기술",
      title: "매혹적인 디지털 조명 기술",
      subtitle: "Audi 레이저 라이트가 적용된 HD 매트릭스 LED 헤드라이트와 네 가지 라이트 시그니처 세트와 매칭되는 다이내믹한 조명 시퀀스가 적용된 디지털 OLED 테일라이트가 차량 외관에 개성 넘치는 매력을 더합니다.",
      smalldesc: "",
    },
    {
      image: "/img/models/q7/sq7/slide1-4.jpg",
      alt: "운전자의 마음을 사로잡는 S 모델의 실내 공간",
      title: "운전자의 마음을 사로잡는 S 모델의 실내 공간",
      subtitle: "Audi SQ7 SUV와 함께라면 모든 여정이 특별한 경험이 됩니다. S 모델만의 특징이 적용된 독보적인 실내 디자인이 스포티함과 스타일리시함을 발산합니다.",
      smalldesc: "",
    },
    {
      image: "/img/models/q7/sq7/slide1-5.jpg",
      alt: "Audi SQ7 SUV의 인테리어",
      title: "Audi SQ7 SUV의 인테리어",
      subtitle: "모든 탑승객 배려함은 물론 짐을 싣기에도 넉넉한 공간을 선사합니다. 2열 및 3열 시트를 사용하여 다양한 방식으로 공간을 분할할 수 있습니다.",
      smalldesc: "",
    }
  ]);

  const bannerSlides2 = ref([
    {
      image: "/img/models/q7/sq7/slide2-1.jpg",
      alt: "안정적이고 강력한 성능",
      title: "안정적이고 강력한 성능",
      subtitle:
        "Audi SQ7 SUV는 507PS에 이르는 V8 4.0리터 TFSI 엔진의 파워를 유감없이 보여줍니다. 뛰어난 주행 특성과 탁월한 핸들링을 만끽할 수 있습니다. ",
      cautiondesc:
        "",
    },
    {
      image: "/img/models/q7/sq7/slide2-2.jpg",
      alt: "역동적인 제어",
      title: "역동적인 제어",
      subtitle:
        "최대 254mm의 지상고로 다채로운 주행 경험을 즐길 수 있습니다. Audi SQ7 SUV는 스포츠 디퍼렌셜과 액티브 롤 스테빌라이저, 어댑티브 에어 서스펜션 스포츠 및 다이내믹 올 휠 스티어링을 갖춘 콰트로 사륜구동 시스템으로 운전자의 마음을 사로잡습니다. ",
      cautiondesc:
        "",
    },
  ]);

  const bannerSlides3 = ref([
    {
      image:
        "/img/models/q7/sq7/slide3-1.jpg",
      alt: "S 모델의 진취성",
      title: "S 모델의 진취성",
      subtitle: "다양한 S모델 전용 아이템들이 Audi SQ7 SUV의 스포티함을 더욱 돋보이게 합니다. 프런트 엔드는 새로운 디자인의 범퍼와 Audi 싱글프레임으로 존재감을 드러냅니다.",
      smalldesc: "",
      cautiondesc: "",
    },
    {
      image:
        "/img/models/q7/sq7/slide3-2.jpg",
      alt: "시선을 끄는 인상적인 디자인",
      title: "시선을 끄는 인상적인 디자인",
      subtitle: "Audi SQ7 SUV는 성능뿐만 아니라 흡기구, 디퓨저, 듀얼 트윈 머플러와 같이 새롭게 디자인된 요소 덕분에 한층 돋보입니다. 2D로 새롭게 디자인된 전후면의 Audi 로고 역시 새로운 디자인 언어의 특징입니다. ",
      smalldesc: "",
      cautiondesc: "",
    },
  ]);

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

  const bannerSlides5 = ref([
    {
      video: "/img/models/q7/sq7/slide5.mp4",
      alt: "",
      title: "",
      subtitle:
        "",
      smalldesc: "",
    }
  ]);

  const bannerSlides6 = ref([
    {
      image: "/img/models/q7/sq7/slide6-1.jpg",
      alt: "모든 좌석을 최고의 좌석으로",
      title: "모든 좌석을 최고의 좌석으로",
      subtitle:
        "S 엠보싱 처리된 마름모 패턴과 스티칭이 들어간 발코나 가죽 스포츠 시트 플러스가 탁월한 착좌감을 제공합니다. 사이드 볼스터와 허리 요추 받침대는 공기압으로 조절하여 체형에 맞게 조정할 수 있으며 앞 좌석 마사지 시트도 여행의 피로를 덜어줍니다.",
      smalldesc: "",
    },
    {
      image: "/img/models/q7/sq7/slide6-2.jpg",
      alt: "궁극의 3D 사운드 경험",
      title: "궁극의 3D 사운드 경험",
      subtitle:
        "Bang & Olufsen 3D 어드벤스드 사운드 시스템의 입체 음향이 실내 공간을 실제보다 더 넓게 느껴지도록 합니다. 총 1,920와트 출력의 23채널 Beo Core 앰프와 23개 스피커가 만들어내는 환상적인 사운드를 경험해 보십시오.",
      smalldesc: "참고: Audi Q8 SUV 이미지입니다.",
    }
  ]);

  const bannerSlides7 = ref([
    {
      image: "/img/models/q7/sq7/slide7-1.jpg",
      alt: "나만의 개성을 더해보십시오",
      title: "나만의 개성을 더해보십시오",
      subtitle:
        "많은 사람들이 특별한 것을 찾거나 ‘특별함’의 의미를 직접 정의하는 것을 선호합니다. 맞춤형 도장 마감, 벨벳 바이올렛에 펄 효과를 가미한 Audi 익스클루시브, 멀티 스포크 S 디자인, 블랙 메탈릭 등으로 Audi SQ7 SUV에 나만의 개성을 더해보십시오.  ",
      smalldesc: "",
    },
    {
      image: "/img/models/q7/sq7/slide7-2.jpg",
      alt: "개인 취향을 반영한 맞춤화",
      title: "개인 취향을 반영한 맞춤화",
      subtitle:
        "발코나 가죽 시트 커버와 트림, 실버와 블랙의 우아한 스타일, 블랙과 실버가 대비를 이루는 스티칭, 파인 그레인 애쉬 내추럴, 노블 그레이 인레이가 적용된 확장 실내 요소 등 Audi 익스클루시브를 통해 Audi SQ7 SUV의 실내 공간에 나만의 개성을 표현해보십시오. ",
      smalldesc: "",
    }
  ]);

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