<template>
  <section id="center">
    <div class="hero">
      <img :src="heroImg" class="base" width="170" height="179" alt="" />
      <img :src="vueLogo" class="framework" alt="Vue logo" />
      <img :src="viteLogo" class="vite" alt="Vite logo" />
    </div>
    <div>
      <h1>Get started</h1>
      <p>Edit <code>src/pages/HomeView.vue</code> and save to test <code>HMR</code></p>
    </div>
    <button type="button" class="counter" @click="count++">
      Count is {{ count }}
    </button>
    <nav class="site-pages" aria-label="Site pages">
      <RouterLink
        v-for="page in pageLinks"
        :key="page.to"
        class="site-page-link"
        :to="page.to"
      >
        {{ page.label }}
      </RouterLink>
    </nav>
  </section>

  <div class="ticks"></div>



  <div class="ticks"></div>
  <section id="spacer"></section>
</template>

<script setup lang="ts">
import { useHead } from '@unhead/vue'
import { shallowRef } from 'vue'
import { RouterLink } from 'vue-router'
import heroImg from '../assets/hero.png'
import viteLogo from '../assets/vite.svg'
import vueLogo from '../assets/vue.svg'

const count = shallowRef(0)
const pageLinks = [
  { label: 'Home', to: '/' },
  { label: 'About', to: '/about' },
  { label: 'Products', to: '/products' },
  { label: 'Contact', to: '/contact' },
] as const

useHead({
  title: 'Home | test-ssg',
  meta: [
    {
      name: 'description',
      content: 'Static generated home page for the Vite SSG test site.',
    },
  ],
})
</script>
