<template>
  <main class="home-page">
    <HomeCarousel />

    <section class="home-links" aria-label="Site pages">
      <RouterLink
        v-for="page in pageLinks"
        :key="page.to"
        class="home-link"
        :to="page.to"
      >
        {{ page.label }}
      </RouterLink>
    </section>
  </main>
</template>

<script setup lang="ts">
import { useHead } from '@unhead/vue'
import { RouterLink } from 'vue-router'
import HomeCarousel from './components/Carousel.vue'

const pageLinks = [
  { label: 'About', to: '/about' },
  { label: 'Products', to: '/products' },
  { label: 'Contact', to: '/contact' },
] as const

useHead({
  title: 'Home | Code Create',
  meta: [
    {
      name: 'description',
      content: 'Code Create home page rendered with Vite SSG.',
    },
  ],
})
</script>

<style scoped>
.home-page {
  /* width: 100%; */
  /* min-height: 100svh; */
  /* background: #ffffff; */
}

.home-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 32px 20px 48px;
}

.home-link {
  min-width: 112px;
  padding: 10px 16px;
  border: 1px solid #d9dde6;
  border-radius: 6px;
  color: #1d2430;
  background: #ffffff;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  transition:
    border-color 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}

.home-link:hover,
.home-link:focus-visible,
.home-link.router-link-active {
  border-color: #2f6df6;
  color: #2f6df6;
  box-shadow: 0 8px 24px rgba(36, 55, 92, 0.12);
}

.home-link:focus-visible {
  outline: 2px solid #2f6df6;
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .home-links {
    padding: 24px 16px 40px;
  }

  .home-link {
    flex: 1 1 calc(50% - 12px);
  }
}
</style>
