<template>
  <main>
    <div class="detail--container--full">
      <FullSizeBannerText1
        :imagePath="bannerImagePath"
        altText="About Audi"
        subTitle="신차 정보부터 내 차 관리까지, myAudiworld 앱을 소개합니다."
        textLocation="topright"
        type="cover"
        btnText="안드로이드 마켓 바로가기"
        btnLink="/"
        btnTarget="_blank"
        btnText2="아이폰 앱스토어 바로가기"
        btnLink2="/"
        btnTarget2="_blank"
      />

      <div class="text--tab--layout">
        <ul>
          <li class="anch--location">
            <NuxtLink to="#maw01">개인화 정보 제공</NuxtLink>
          </li>
          <li>
            <NuxtLink to="#maw02">서비스 연장 패키지 온라인 구매</NuxtLink>
          </li>
          <li>
            <NuxtLink to="#maw03">시승 신청</NuxtLink>
          </li>
          <li>
            <NuxtLink to="#maw04">액세서리 모바일 앱 카탈로그</NuxtLink>
          </li>
          <li>
            <NuxtLink to="#maw05">온라인 서비스 예약</NuxtLink>
          </li>
          <li>
            <NuxtLink to="#maw06">픽업 & 딜리버리</NuxtLink>
          </li>
          <li>
            <NuxtLink to="#maw07">정비이력 확인</NuxtLink>
          </li>
          <li>
            <NuxtLink to="#maw08">직관적인 차량 정보</NuxtLink>
          </li>
          <li>
            <NuxtLink to="#maw09">프로모션 정보</NuxtLink>
          </li>
          <li>
            <NuxtLink to="#maw10">Audi e-tron</NuxtLink>
          </li>
        </ul>
      </div>

      <!-- 제품 카드 컴포넌트 -->
      <ProductCard
        id="maw01"
        data-type="square"
        image="/img/aboutaudi/maw01.webp"
        title="개인화 정보 제공"
        subtitle="정비 예약일, 다음 점검 예정일, 쿠폰 만료일, 리콜안내 등 나에게 맞춘 정보를 안내 받습니다.<br/>내 차량에 해당되는 영상 매뉴얼을 제공합니다."
        layout="horizontal"
        imagePosition="right"
      />

      <!-- 제품 카드 컴포넌트 -->
      <ProductCard
        id="maw02"
        data-type="square"
        image="/img/aboutaudi/maw02.webp"
        title="서비스 연장 패키지 온라인 구매"
        subtitle="아우디 서비스 연장 패키지(Audi Extended Service Package(ESP))는 고객님의 차량을 최적의 컨디션으로 운행하시는데 도움을 드리는 서비스 프로그램입니다.<br/><br/>
myAudiworld 앱을 통해 차량등록을 하신 고객님은 365일 24시간 언제 어디서든 서비스 연장 패키지의 가격 확인 및 구매 이용이 가능합니다."
        buttonText="자세히 알아보기"
        buttonUrl="/service/program/audiservicecouponpackage"
        buttonTarget="_blank"
        smallDescription="※ 유의사항<br/>* 본 서비스는 myAudiworld 회원가입 및 차량등록 진행하신 고객님들에 한해서 myAudiworld 앱을 통해 구매 가능합니다.<br/>* 온라인 환불요청 서비스는 myAudiworld 앱을 통해 구매하신 패키지만 가능합니다."
        layout="horizontal"
        imagePosition="left"
      />

      <!-- 제품 카드 컴포넌트 -->
      <ProductCard
        id="maw03"
        data-type="square"
        image="/img/aboutaudi/maw03.webp"
        title="시승 신청"
        subtitle="시승 신청으로아우디 신차와 관심 모델을 체험해보실 수 있습니다."
        layout="horizontal"
        imagePosition="right"
      />

      <!-- 제품 카드 컴포넌트 -->
      <ProductCard
        id="maw04"
        data-type="square"
        image="/img/aboutaudi/maw04.webp"
        title="액세서리 모바일 앱 카탈로그"
        subtitle="모바일 앱 카탈로그로 아우디 모델 별 현재 제품의 포트폴리오로 차량의 내부 및 외부에 적합한 아우디 순정 액세서리를 선택하여 보실 수 있습니다."
        layout="horizontal"
        imagePosition="left"
      />

      <!-- 제품 카드 컴포넌트 -->
      <ProductCard
        id="maw05"
        data-type="square"
        image="/img/aboutaudi/maw05.webp"
        title="온라인 서비스 예약"
        subtitle="실시간 예약 가능한 일정을 확인, 언제 어디서든 손 쉽게 서비스 예약이 가능합니다.<br/><br/>
입력하는 점검 요청 내용에 따라 예상되는 정비 소요 시간 정보를 제공합니다."
        layout="horizontal"
        imagePosition="right"
      />

      <!-- 제품 카드 컴포넌트 -->
      <ProductCard
        id="maw06"
        data-type="square"
        image="/img/aboutaudi/maw06.webp"
        title="픽업 & 딜러버리"
        subtitle="지정한 장소에서 차량을 맡기고 정비 완료 후 다시 원하는 장소로 안전하게 전달해드리는 프리미엄 서비스를 제공합니다."
        layout="horizontal"
        imagePosition="left"
      />

      <!-- 제품 카드 컴포넌트 -->
      <ProductCard
        id="maw07"
        data-type="square"
        image="/img/aboutaudi/maw07.webp"
        title="정비이력 확인"
        subtitle="정비이력 확인"
        layout="horizontal"
        imagePosition="right"
      />

      <!-- 제품 카드 컴포넌트 -->
      <ProductCard
        id="maw08"
        data-type="square"
        image="/img/aboutaudi/maw08.webp"
        title="직관적인 차량 정보"
        subtitle="한눈에 보이는 차량 비교부터 카탈로그 다운로드, 차량 보유 전시장까지 아우디 모델에 대한 모든 정보를 만나보세요.<br/><br/>
금융계산기로 금융 상품 안내와 구매를 원하시는 차량의 납입금을 확인해보세요."
        layout="horizontal"
        imagePosition="left"
      />

      <!-- 제품 카드 컴포넌트 -->
      <ProductCard
        id="maw09"
        data-type="square"
        image="/img/aboutaudi/maw09.webp"
        title="내게 꼭 필요한 프로모션 정보만"
        subtitle="‘나의 서비스센터’ 에서 진행되는 프로모션에 대한 app push 메시지를 제공합니다."
        layout="horizontal"
        imagePosition="right"
      />

      <!-- 제품 카드 컴포넌트 -->
      <ProductCard
        id="maw10"
        data-type="square"
        image="/img/aboutaudi/maw10.webp"
        title="Audi e-tron"
        subtitle="대영채비와 연동하여 나의 충전포인트와 사용내역, 예약상태, 충전 진행상황까지 편리하게 확인할 수 있습니다.<br/><br/>
위치 기반 가까운 충전소 안내부터 예약, 포인트사용을 카드 소지 없이 myAudiworld 앱으로 사용 가능합니다."
        layout="horizontal"
        imagePosition="left"
      />
    </div>
  </main>
</template>

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

  const bannerImagePath = ref("/img/aboutaudi/myAudiworld_1920x1080.avif");
</script>
