<template>
  <footer
    class="bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800"
  >
    <div class="mx-auto max-w-7xl overflow-hidden px-6 py-12 sm:py-16 lg:px-8">
      <div class="flex justify-center mb-8">
        <NuxtLink to="/" aria-label="Bobu Home">
          <span class="sr-only">Bobu</span>
          <img
            class="h-10 w-auto block dark:hidden transition-all duration-300"
            :src="LOGOS.RedGaro"
            alt="Bobu Logo Light"
          />
          <img
            class="h-10 w-auto hidden dark:block transition-all duration-300"
            :src="LOGOS.White"
            alt="Bobu Logo Dark"
          />
        </NuxtLink>
      </div>

      <!-- <nav
        class="-mb-6 flex flex-wrap justify-center gap-x-6 sm:gap-x-12 gap-y-3 text-sm"
        aria-label="Footer Navigation"
      >
        <NuxtLink
          v-for="item in navigation.main"
          :key="item.name"
          :to="item.href"
          class="font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
        >
          {{ item.name }}
        </NuxtLink>
      </nav> -->

      <hr class="my-8 border-gray-300 dark:border-gray-700 w-1/2 mx-auto" />

      <div
        class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400 space-y-1"
      >
        <p>
          <span class="font-semibold">사업자등록번호 :</span>
          {{ companyInfo.registrationNumber }}
        </p>
        <p>
          <span class="font-semibold">대표이사 :</span>
          {{ companyInfo.president }}
        </p>
        <p>
          <span class="font-semibold">주소 :</span> {{ companyInfo.address }}
        </p>
        <p>
          <span class="font-semibold">연락처 :</span> {{ companyInfo.phone }}
          <span class="text-gray-400 dark:text-gray-600 mx-1">|</span>
          <span class="font-semibold">팩스 :</span> {{ companyInfo.fax }}
        </p>
        <p>
          <span class="font-semibold">이메일 : </span> {{ companyInfo.email }}
        </p>
      </div>

      <!-- <div class="mt-10 flex justify-center gap-x-8 sm:gap-x-10">
        <a
          v-for="item in navigation.social"
          :key="item.name"
          :href="item.href"
          class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-white transition-colors duration-200"
          target="_blank"
          rel="noopener noreferrer"
        >
          <span class="sr-only">{{ item.name }}</span>
          <component :is="item.icon" class="size-6" aria-hidden="true" />
        </a>
      </div> -->

      <p
        class="mt-10 text-center text-xs sm:text-sm text-gray-500 dark:text-gray-400"
      >
        &copy; {{ companyInfo.copyYear }} {{ companyInfo.name }}. All rights
        reserved.
      </p>
    </div>
  </footer>
</template>

<script setup lang="ts">
import { defineComponent, h } from 'vue';
import { LOGOS } from '@/data/assets'; // Make sure you have LOGOS defined/imported
import { companyInfo } from '@/data/config';

// Define Navigation (Consider moving social icons to components)
const navigation = {
  main: [
    // Use actual paths or hashes relevant to your site structure
    { name: '회사소개', href: '/about' },
    { name: '쇼핑하기', href: '/shop' },
    { name: '공유 오피스 예약', href: '/office' },
    { name: '문의하기', href: '/contact' },
    // { name: '개인정보처리방침', href: '/privacy' },
    // { name: '이용약관', href: '/terms' },
  ],
  social: [
    {
      name: 'Instagram',
      href: '#', // Replace with your actual Instagram link
      // SUGGESTION: Replace this complex inline icon definition
      // with an imported component like <InstagramIcon /> or library icon
      icon: defineComponent({
        render: () =>
          h('svg', { fill: 'currentColor', viewBox: '0 0 24 24' }, [
            h('path', {
              'fill-rule': 'evenodd',
              // Example Instagram Path (replace with actual minimal path if possible)
              d: 'M12 2.163c3.204 0 3.584.012 4.85.07 1.272.058 2.163.248 2.948.568.859.333 1.564.824 2.27 1.531.707.707 1.198 1.411 1.531 2.27.32.785.51 1.676.568 2.948.058 1.265.07 1.645.07 4.85s-.012 3.584-.07 4.85c-.058 1.272-.248 2.163-.568 2.948-.333.859-.824 1.564-1.531 2.27-.707.707-1.411 1.198-2.27 1.531-.785.32-1.676.51-2.948.568-1.265.058-1.645.07-4.85.07s-3.584-.012-4.85-.07c-1.272-.058-2.163-.248-2.948-.568-.859-.333-1.564-.824-2.27-1.531-.707-.707-1.198-1.411-1.531-2.27-.32-.785-.51-1.676-.568-2.948-.058-1.265-.07-1.645-.07-4.85s.012-3.584.07-4.85c.058-1.272.248-2.163.568-2.948.333-.859.824-1.564 1.531 2.27.707-.707 1.411-1.198 2.27-1.531.785-.32 1.676-.51 2.948-.568C8.416 2.175 8.796 2.163 12 2.163m0-1.014c-3.247 0-3.65.013-4.924.072-1.356.06-2.328.25-3.17.58C2.97 2.21 2.24 2.713 1.53 3.423.82 4.133.317 4.862.09 5.787c-.33 1.04-.52 2.012-.58 3.368C-.07 10.32-.083 10.727-.083 12s.013 1.68.072 2.95c.06 1.356.25 2.328.58 3.17.227.925.73 1.655 1.44 2.365.71.71 1.44.213 2.365.44.842.33 1.814.52 3.17.58 1.273.06 1.676.072 4.924.072s3.65-.013 4.924-.072c1.356-.06 2.328-.25 3.17-.58.925-.227 1.655-.73 2.365-1.44.71-.71 1.213-1.44 1.44-2.365.33-.842.52-1.814.58-3.17.06-1.27.072-1.675.072-4.95s-.013-3.678-.072-4.948c-.06-1.356-.25-2.328-.58-3.17-.227-.925-.73-1.655-1.44-2.365C21.87 1.317 21.14.814 20.216.586c-.842-.33-1.814-.52-3.17-.58C15.65.013 15.247 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.88 1.44 1.44 0 000-2.88z',
              'clip-rule': 'evenodd',
            }),
          ]),
      }),
    },
    // Add more social links here if needed
    // { name: 'Facebook', href: '#', icon: FacebookIconComponent },
  ],
};
</script>

<style scoped>
/* Add any component-specific styles here if needed */
</style>
