<script lang="ts">
	import SocialButton from '$lib/components/SocialButton.svelte';
	import { PUBLIC_TS_DISCORD } from '$env/static/public';
	import BlogCard, { BlogCardSize } from '$src/lib/components/BlogCard.svelte';
	import { page } from '$app/state';
	import type { PageData } from './$types';

	export let data: PageData;
</script>

<svelte:head>
	<title>Tea Sanctuary</title>
</svelte:head>

<section class="hero flex shrink-0 flex-col items-center justify-center gap-5 overflow-hidden p-4">
	<div
		class="flex flex-col flex-nowrap items-center justify-center gap-3 lg:flex-row lg:flex-nowrap"
	>
		<div
			class="relative size-48 shrink-0 rounded-2xl bg-slate-50 shadow-[inset_0px_0px_0px_2px] shadow-slate-200"
		>
			<img
				src="/common/dotted-line.svg"
				class="absolute top-0 right-0 bottom-0 left-0"
				alt="Пунктирная линия"
			/>
			<!-- В документации Tailwind советуют использовать "Inline SVG" -->
			<svg
				width="196"
				height="196"
				class="absolute top-0 right-0 bottom-0 left-0 stroke-slate-950"
				fill="none"
				><path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="6"
					d="M48.996 95.53c-18.624 5.826-30.621 14.965-30.621 25.239 0 17.599 35.19 31.866 78.604 31.866s78.604-14.267 78.604-31.866c0-10.274-11.997-19.413-30.617-25.24"
				/><path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="6"
					d="M18.375 121.626c0 17.599 19.118 40.364 78.604 40.364 59.486 0 78.604-23.622 78.604-41.221"
				/><path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="6"
					d="M37.493 53.042c0 24.97 16.66 73.762 59.486 73.762 42.826 0 59.482-48.792 59.482-73.757"
				/><path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="6"
					d="M96.98 72.083c32.85 0 59.481-8.523 59.481-19.036 0-10.514-26.631-19.037-59.482-19.037-32.85 0-59.482 8.523-59.482 19.037 0 10.513 26.631 19.036 59.482 19.036Z"
				/><path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="6"
					d="M153.746 58.743c-6.958-7.938-29.739-13.757-56.767-13.757-27.027 0-49.808 5.819-56.77 13.76M147.6 90.349c24.664 4.41 30.025-9.625 30.025-20.184 0-10.56-4.051-17.117-13.377-17.117a10.125 10.125 0 0 0-7.913 3.854"
				/></svg
			>
		</div>

		<div class="text-center font-bold lg:text-left">
			<h1>TEA</h1>
			<h1>SANCTUARY</h1>
		</div>
	</div>
	<div class="flex flex-col items-center justify-start gap-4">
		<div class="flex flex-row flex-wrap items-start justify-center gap-4">
			<SocialButton class="w-60 shrink-0" href={PUBLIC_TS_DISCORD}>Сообщество</SocialButton>
			<SocialButton class="w-60 shrink-0" href="https://github.com/TeaSanctuary/">
				GitHub
			</SocialButton>
			<SocialButton class="w-60 shrink-0" href="https://git.teasanctuary.ru">
				Наш Git
			</SocialButton>
			<SocialButton class="w-60 shrink-0" href="https://hl.teasanctuary.ru">
				Сервер HLDM
			</SocialButton>
		</div>
		<SocialButton class="w-60 opacity-5 hover:opacity-100" href="https://хамяк.рф">
			хамяк)
		</SocialButton>
	</div>
</section>

<section class="flex flex-col items-stretch bg-blue-900 pt-4 text-slate-50">
	<h1 class="text-center">ПОСЛЕДНИЕ ПОСТЫ</h1>

	<div class="flex flex-row items-stretch justify-evenly gap-4 overflow-x-auto p-4">
		{#each page.data.posts as post, i}
			<div class="aspect-3/2 w-80 shrink-0">
				<BlogCard {post} size={BlogCardSize.Short} fullHeight />
			</div>
		{/each}
	</div>
</section>

<article
	class="prose
	sm:prose-xl
	prose-slate
	prose-code:break-words
	prose-pre:drop-shadow-md
	prose-headings:font-disket
	prose-headings:my-4
	prose-headings:font-bold
	prose-headings:text-slate-950
	prose-h1:text-2xl
	prose-h1:sm:text-4xl
	prose-h2:text-xl
	prose-h2:sm:text-3xl
	prose-p:text-justify
	prose-p:mt-0
	prose-p:mb-8
	bg-slate-50
	pt-8
	pb-4
	text-base
	text-slate-950
	px-2 sm:px-4 sm:text-xl"
>
	<section class="flex max-w-5xl flex-col flex-nowrap mx-auto">
		<svelte:component this={data.content} />
	</section>
</article>