<script setup lang="ts">
import type {
  LandingNavItem,
  LandingFooterColumn,
  LandingSocialItem,
} from '/@src/components/layouts/landing/landing.types'

const links = ref<LandingNavItem[]>([
  {
    label: 'Buy now',
    to: 'http://go.cssninja.io/buy-vuero',
    active: true,
  },
  {
    label: 'Demos',
    to: '/#vuero-demos',
  },
  {
    label: 'UI Elements',
    to: '/#vuero-components',
  },
  {
    label: 'Docs',
    to: 'https://docs.cssninja.io/vuero',
  },
  {
    label: 'Support',
    to: 'https://cssninja.io/faq/support',
  },
])

const footer = ref<LandingFooterColumn[]>([
  {
    label: 'Vuero',
    children: [
      {
        label: 'Quality',
        to: 'https://cssninja.io/faq/quality',
      },
      {
        label: 'GitHub Access',
        to: 'https://cssninja.io/faq/github-access',
      },
      {
        label: 'Our licenses',
        to: 'https://cssninja.io/faq/licenses',
      },
    ],
  },
  {
    label: 'Resources',
    children: [
      {
        label: 'Frequent questions',
        to: 'https://cssninja.io/faq',
      },
      {
        label: 'GitHub access',
        to: 'https://cssninja.io/faq/github-access',
      },
      {
        label: 'Support center',
        to: 'https://cssninja.io/faq/support',
      },
      {
        label: 'Learning',
        to: 'https://docs.cssninja.io',
      },
    ],
  },
  {
    label: 'Terms',
    children: [
      {
        label: 'Terms of Service',
        to: 'https://cssninja.io/about/terms-of-service',
      },
      {
        label: 'Privacy policy',
        to: 'https://cssninja.io/about/privacy-policy',
      },
      {
        label: 'Contact us',
        to: 'https://cssninja.io/company/contact',
      },
    ],
  },
])

const social = ref<LandingSocialItem[]>([
  {
    icon: 'fa6-brands:facebook-f',
    link: 'https://www.facebook.com/cssninjaStudio/',
  },
  {
    icon: 'fa6-brands:github',
    link: 'https://github.com/cssninjaStudio',
  },
  {
    icon: 'fa6-brands:x-twitter',
    link: 'https://twitter.com/cssninjaStudio',
  },
])
</script>

<template>
  <LandingLayout :links>
    <template #logo>
      <VLink
        to="/#"
        class="navbar-item"
      >
        <div class="brand-icon">
          <AnimatedLogo width="250px;"/>
        </div>
      </VLink>
    </template>

    <template #nav-end>
      <div class="navbar-item">
        <VDarkmodeSwitch />
      </div>
      <div class="navbar-item">
        <VLink
          to="/auth/login"
          class="nav-link"
        >
          로그인
        </VLink>
      </div>
      <div class="navbar-item">
        <VButton
          to="/auth/signup"
          color="primary"
          rounded
          raised
        >
          <strong>회원가입</strong>
        </VButton>
      </div>
    </template>

    <slot />

    <LandingFooter>
      <template #copyright>
        <a target="_blank" href="https://www.kospo.co.kr/kospo/624/subview.do" style="color:var(--primary)">개인정보처리방침</a> | Copyright©2025. KOREA SOUTHERN POWER CO.,LTD(
        <VLink
          to="https://www.kospo.co.kr/"
          class="has-text-primary"
        >
          KOSPO
        </VLink>
        ). All Right Reserved.
      </template>
    </LandingFooter>
  </LandingLayout>
</template>
