<template>
  <main>
    <section class="visual--section">
      <div class="img--wrap">
        <picture>
          <img src="/img/company/img--about1.jpg" alt="" />
        </picture>
      </div>
      <div class="title--wrap color--white">
        <h2>Company</h2>
      </div>
    </section>
    <div class="detail--container">
      <section>
        <div class="desc--section full--type">
          <h3 class="big--title">SALES ADVISOR</h3>
        </div>
      </section>
      <div class="content--wrap">
        <div class="dealer--search--section">
          <div class="dealer--search--container">
            <!-- 전시장 -->
            <div class="dealer--category--wrap">
              <div
                v-for="(dealer, dIndex) in showrooms"
                :key="'dealer-' + dIndex"
                class="dealer--region--item"
              >
                <NuxtLink
                  :to="dealer.link"
                  class="dealer--region--header"
                >
                  <span class="dealer--region--name">{{ dealer.name }}</span>
                  <span class="dealer--toggle--icon">+</span>
                </NuxtLink>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script setup>
  // 전시장 데이터
  const showrooms = ref([
    {
      name: "Dosandaero",
      link: "/company/salesAdvisorList",
    },
    {
      name: "Dongdaemoon",
      link: "/company/salesAdvisorList",
    },
    {
      name: "Suwon",
      link: "/company/salesAdvisorList",
    },
    {
      name: "Starfield Anseong",
      link: "/company/salesAdvisorList",
    },
    {
      name: "Cheonan",
      link: "/company/salesAdvisorList",
    },
    {
      name: "Daejeon",
      link: "/company/salesAdvisorList",
    },
    {
      name: "Gwangju",
      link: "/company/salesAdvisorList",
    },
    {
      name: "Mokpo",
      link: "/company/salesAdvisorList",
    },
  ]);
</script>
