<template>
    <main>
        <article class="article">
            <section class="hero-section">
              <div class="container">
                <img class="brace" width="100" src="/brace-smile.svg"></img>
                <h1 id="home-hero-title" class="title">สวัสดี<br/>ยินดีต้อนรับสู่ *nix in Thailand สาระคอมพิวเตอร์ที่ทุกคนสามารถเข้าถึงได้</h1>
                <p id="home-hero-sub" class="subtitle">พื้นที่สำหรับการซักถาม คุยเล่น และเอกสารสาระคอมพิวเตอร์ต่าง ๆ โดยที่เน้นระบบ UNIX และ Unix-like ไม่ว่าจะเป็น GNU, Linux, macOS, Android, ฯลฯ</p>
              </div>
            </section>
            <section class="page-section page-section-alt">
              <div class="container">
                <section class="section-img">
                  <img class="aspect-[4/3]" src="/wiki-mac.png"></img>
                </section>
                <section class="section">
                  <h2 id="wiki" class="title">สารคอมพิวเตอร์เสรี (วิกิ)</h2>
                  <p id="wiki-desc">ศูนย์รวมความรู้ซอฟต์แวร์และฮาร์ดแวร์คอมพิวเตอร์ ที่ทุกคนสามารถสามารถแก้ไขได้</p>
                  <UButton to="https://wiki.unix.in.th" label="ไปที่วิกิ"/>
                </section>
              </div>
            </section>
            <section class="page-section page-section-alt">
              <div class="container">
                <section class="section-img">
                  <img class="aspect-[4/3]" src="/forum-mac.png"></img>
                </section>
                <section class="section">
                  <h2 class="title">ลานประชาคม</h2>
                  <p>พื้นที่สอบถาม อภิปราย และคุยเล่น เกี่ยวกับซอฟต์แวร์และฮาร์ดแวร์ UNIX และ Unix-like</p>
                  <UButton to="https://forum.unix.in.th" disabled variant="subtle" label="ไปที่ลานประชาคม"/>
                </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>