---
import BasicLayout from "@/layouts/BasicLayout.astro";
import { getRelativeLocaleUrl } from "astro:i18n";

const startLink = getRelativeLocaleUrl("th", "start");
---

<BasicLayout>
	<header
		class="min-h-[50vh] flex justify-center items-center flex-col gap-2 bg-amber-50 dark:bg-amber-950"
	>
		<h1
			class="text-5xl leading-14 font-bold bg-gradient-to-r from-amber-700 to-amber-900 dark:from-amber-400 dark:to-amber-600 bg-clip-text text-transparent"
		>
			ย้ายไป Linux
		</h1>
		<p>เว็บไซต์นี้จะช่วยให้คุณเรียนรู้และติดตั้ง Linux</p>
		<div>
			<a href="#what">อะไร</a>
			&bull;
			<a href="#why">ทำไม</a>
			&bull;
			<a href={startLink} class="font-bold">เริ่มเลยดีกว่า</a>
		</div>
	</header>
	<main>
		<section id="what" class="border-t-2 border-amber-900">
			<h2 class="text-blue-900 dark:text-blue-200">Linux คืออะไร</h2>
			<p>
				Linux เป็น<i>ครอบครัว</i>ของระบบปฏิบัติการที่มีแกนกลางเดียวกัน
				โดยแกนกลางที่ว่า นั้นมีชื่อว่าเคอร์เนล (Kernel)
			</p>
		</section>
		<section id="why">
			<h2 class="mb-2 text-violet-900 dark:text-violet-200">
				เหตุผลในการย้ายไป Linux
			</h2>
			<div class="grid grid-cols-2 gap-4 lg:max-w-[50vw]">
				<div class="card">
					<h3>ฟรี</h3>
					<p>ซอฟท์แวร์ฟรีและเสรี สร้างอิสรภาพให้อุปกรณ์ของคุณ</p>
				</div>
				<div class="card">
					<h3>ประสิทธิภาพ</h3>
					<p>
						ฟื้นคืนชีพอุปกรณ์เก่าของคุณ
						และให้อุปกรณ์ปัจจุบันทำได้มากขึ้น
					</p>
				</div>
				<div class="card">
					<h3>อยู่ในการควบคุม</h3>
					<p>
						ควบคุมสิ่งที่อยู่บนอุปกรณ์ของคุณ ปรับแต่งให้ตรงสเป็ค
						ให้อุปกรณ์เป็นของคุณอย่างแท้จริง
					</p>
				</div>
				<div class="card">
					<h3>ความเป็นส่วนตัว</h3>
					<p>
						เลือกว่าคุณต้องการที่จะแบ่งปันข้อมูลมากแค่ใหนเพื่อปรับปรุงซอฟท์แวร์ที่คุณใช้
					</p>
				</div>
			</div>
		</section>
		<section id="start">
			<h2 class="text-green-900 dark:text-green-200 mb-2">
				หากคุณอยากลองแล้ว...
			</h2>
			<p>กดปุ่มด้านล่างเพื่อเริ่มต้นการผจญภัยในดินแดนเพนกวินได้เลย</p>
			<a href={startLink} class="button mt-4">เริ่มต้นเลย!</a>
		</section>
	</main>
	<footer class="text-center py-4 bg-slate-800 text-white">
		<div>
			<a href={getRelativeLocaleUrl("th", "contents")}>สารบัญ</a>
			&bull;
			<a href={getRelativeLocaleUrl("th", "privacy")}
				>นโยบายความเป็นส่วนตัว</a
			>
		</div>
		<p>
			ทำด้วย &hearts; จาก <a
				href="https://github.com/lines-of-codes/"
				target="_blank">lines-of-codes</a
			>
		</p>
	</footer>
</BasicLayout>

<style>
	@reference "@/styles/global.css";

	a:not(.button) {
		@apply underline;
	}

	h2 {
		@apply text-4xl font-bold;
	}

	h3 {
		@apply text-3xl font-semibold;
	}

	section {
		@apply flex justify-center items-center flex-col p-12;
	}
</style>