<template>
  <div class="introduction-card-container">
    <div
      class="introduction-card"
      v-for="item in COMPANY_INTRODUCTION_CARD_LIST"
      :key="item.title"
      @click="handleCardClick(item)"
    >
      <div class="introduction-card__header">
        <img :src="item.icon" />
        <p>{{ item.title }}</p>
      </div>
      <div class="introduction-card__content">
        <section class="section-content">
          <p v-for="content in item.leftContent" :key="content">{{ content }}</p>
        </section>
        <section class="section-content">
          <p v-for="content in item.rightContent" :key="content">{{ content }}</p>
        </section>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import router from '@/router';
  import { NAV_LIST } from '@/constant/nav';
  import { COMPANY_INTRODUCTION_CARD_LIST } from '../constant';

  const handleCardClick = (item) => {
    const navItem = NAV_LIST.find((nav) => nav.meta.title === item.title);
    if (!navItem || !navItem.path) {
      router.replace({ name: 'StayTune' });
      return;
    }

    router.push(navItem.path);
  };
</script>

<style lang="scss" scoped>
  .introduction-card-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
  }

  .introduction-card {
    width: 361cpx;
    height: 100%;
    padding: 15cpx 34cpx 0 34cpx;
    background-color: $white-color;
    border-radius: 5cpx;
    cursor: pointer;

    &__header {
      @include flex-center;
      flex-direction: column;
      gap: 14cpx;
      font-weight: 550;
      font-size: 24cpx;
      color: #333;

      img {
        width: 80cpx;
        height: 80cpx;
      }
    }

    &__content {
      display: flex;
      justify-content: space-between;
      font-size: 18cpx;
      color: #666;
    }
  }

  .introduction-card:hover {
    transform: scale(1.02);
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
  }

  .section-content {
    display: flex;
    flex-direction: column;
    gap: 17cpx;
    margin-top: 32cpx;
  }
</style>
