<template>
    <main>
        <article class="article">
            <section class="hero-section">
              <div class="container">
                <img class="brace" width="100" src="/brace-smile.svg"></img>
                <h1 :id="t('home.hero.title').replace(/ /g, '_')" class="title">{{ t('home.hero.title') }}</h1>
                <p :id="t('home.hero.sub').replace(/ /g, '_')" class="subtitle">{{ t('home.hero.sub') }}</p>
              </div>
            </section>
            <!-- <section class="page-section page-section-alt">
              <div class="container">
                <section class="section">
                  <h2 class="title">{{ t('home.wiki.title') }}</h2>
                  <p>{{ t('home.wiki.paragraph') }}</p>
                  <UButton to="https://wiki.unix.in.th" :label="t('home.wiki.go')"/>
                </section>
                <section class="section-img">
                  <img class="aspect-[4/3]" src="/wiki-mac.png"></img>
                </section>
              </div>
            </section>
            <section class="page-section page-section-alt">
              <div class="container">
                <section class="section">
                  <h2 class="title">{{ t('home.forum.title') }}</h2>
                  <p>{{ t('home.forum.paragraph') }}</p>
                  <UButton to="https://forum.unix.in.th" :label="t('home.forum.go')"/>
                </section>
                <section class="section-img">
                  <img class="aspect-[4/3]" src="/wiki-mac.png"></img>
                </section>
              </div>
            </section> -->
            <section class="page-section" :aria-labelledby="t('home.wiki.title').replace(/ /g, '_')" :aria-describedby="t('home.wiki.paragraph').replace(/ /g, '_')">
              <div class="container">
                <section class="section">
                  <h2 :id="t('home.wiki.title').replace(/ /g, '_')" class="title">{{ t('home.wiki.title') }}</h2>
                  <p :id="t('home.wiki.paragraph').replace(/ /g, '_')">{{ t('home.wiki.paragraph') }}</p>
                  <UButton to="https://wiki.unix.in.th" :label="t('home.wiki.go')"/>
                </section>
              </div>
            </section>
            <section class="page-section" :aria-labelledby="t('home.forum.title').replace(/ /g, '_')" :aria-describedby="t('home.forum.paragraph').replace(/ /g, '_')">
              <div class="container">
                <section class="section">
                  <h2 :id="t('home.forum.title').replace(/ /g, '_')" class="title">{{ t('home.forum.title') }}</h2>
                  <p :id="t('home.forum.paragraph').replace(/ /g, '_')">{{ t('home.forum.paragraph') }}</p>
                  <UButton to="https://forum.unix.in.th" :label="t('home.forum.go')"/>
                </section>
              </div>
            </section>
        </article>
    </main>
</template>

<script setup>
const {t} = useI18n();
const config = useRuntimeConfig();
const baseUrl = config.public.baseUrl

useHead({
  title: '*nix in Thailand',
  titleTemplate: '%s',
  meta: [
    { property: 'og:type', content: 'website' }
  ]
})
</script>