<template>
  <section class="bg-white dark:bg-gray-900 py-16 sm:py-24">
    <div class="mx-auto max-w-3xl px-4 text-center">
      <!-- Title -->
      <h2
        class="text-3xl font-bold text-gray-900 dark:text-gray-100 sm:text-4xl"
      >
        노마드소셜클럽 보부<br />
        <span class="text-xl font-medium text-gray-600 dark:text-gray-300"
          >Nomad Social Club BOBU</span
        >
      </h2>
    </div>

    <!-- Image Grid -->
    <div
      class="mt-12 mx-auto grid max-w-4xl grid-cols-2 gap-6 px-4 sm:grid-cols-4"
    >
      <div
        v-for="(imgSrc, idx) in images"
        :key="idx"
        class="flex justify-center"
      >
        <img
          :src="imgSrc"
          alt="About image"
          class="h-32 w-32 rounded-full object-cover shadow-md"
        />
      </div>
    </div>

    <!-- Description Text -->
    <div
      class="mt-12 mx-auto max-w-2xl px-4 text-center text-gray-700 dark:text-gray-300"
    >
      <p class="whitespace-pre-line leading-relaxed">
        강원도 정선군 정선읍 봉양리, 작은 마을에 자리한 워케이션 오피스입니다.
        다양한 방식으로 일하는 창작자들을 위해 공유 오피스, 로컬 콘텐츠,
        투어(워크숍) 등을 운영하며 일과 일상, 여행이 자연스럽게 이어지는 유연한
        삶의 방식을 제안합니다.
      </p>
    </div>

    <!-- Link Buttons with Logos -->
    <div class="mt-8 flex justify-center space-x-6 px-4">
      <!-- 네이버플레이스 -->
      <a
        :href="socialLinks.naver"
        target="_blank"
        rel="noopener noreferrer"
        class="flex items-center space-x-2 px-4 py-2 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 transition"
      >
        <img
          :src="socialImages.naver"
          alt="네이버플레이스 로고"
          class="h-6 w-6 object-contain"
        />
        <span>네이버플레이스</span>
      </a>

      <!-- 인스타그램 -->
      <a
        :href="socialLinks.instagram"
        target="_blank"
        rel="noopener noreferrer"
        class="flex items-center space-x-2 px-4 py-2 bg-pink-500 text-white font-semibold rounded-lg hover:bg-pink-600 transition"
      >
        <img
          :src="socialImages.instagram"
          alt="인스타그램 로고"
          class="h-6 w-6 object-contain"
        />
        <span>인스타그램</span>
      </a>
    </div>
  </section>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { MAIN2_IMAGES, SOCIAL_IMAGES } from '@/data/assets';
import { SOCIAL_LINKS } from '@/data/config';

// 1) MAIN2_IMAGES → 배열
const images = computed<string[]>(() => Object.values(MAIN2_IMAGES));

// 2) SOCIAL_IMAGES (로고)와 SOCIAL_LINKS (URL) 노출
const socialImages = SOCIAL_IMAGES;
const socialLinks = SOCIAL_LINKS;
</script>

<style scoped>
/* Tailwind 유틸리티만으로 충분하므로 추가 CSS 불필요 */
</style>
