---
import { Image } from "astro:assets";
import Root from "../layout/root.astro";
import avatar from "../image/avatar.gif";

var now = new Date(); //Текущая дата
var today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); //Текущая дата без времени
var dob = new Date(2007, 9, 8); //Дата рождения
var dobnow = new Date(today.getFullYear(), dob.getMonth(), dob.getDate()); //ДР в текущем году
var age; //Возраст

//Возраст = текущий год - год рождения
age = today.getFullYear() - dob.getFullYear();
//Если ДР в этом году ещё предстоит, то вычитаем из age один год
if (today < dobnow) {
	age = age - 1;
}

---

<Root title="GrechkaGK site">
	<div class="Page">
		<div class="Box CenterBox">
			<div>
				<h1>GrechkaGK</h1>
				<p>{age} лет, программист, художник, творческий человек</p>
			</div>

			<div class="Avatar"><Image src={avatar} alt={"Аватар"} /></div>
		</div>
		<div class="Box LinkBox">
			<a href="/bio">боиграфия</a>
      <a href="/about">о сайте</a>
      <a href="/gallery" class="">моя галерея</a>
      <a href="/request" class="">написать мне реквест</a>
      <a href="/garden" class="">оставить приятный отзыв</a>
		</div>
	</div>
</Root>

<style>
	h1 {
		font-weight: 600;
		margin: 0 0 6px 0;
		letter-spacing: -0.02em;
	}

	.Page {
		min-height: 100vh;
		display: flex;
		flex-direction: column;

		justify-content: center;
		align-items: stretch;
		gap: 24px;

		padding: 24px; /* воздух по краям экрана */
		box-sizing: border-box;
	}

	/* Общая ширина карточек */
	.Box {
		max-width: 720px;
		width: 100%;
		margin: 0 auto;
		box-sizing: border-box;
		display: flex;

		border: 4px solid black;
	}

	/* Карточка профиля */
	.CenterBox {
		padding: 28px 32px;

		align-items: center;
		gap: 24px;
	}

	/* Карточка ссылок */
	.LinkBox {
		padding: 20px 24px;

		flex-direction: column;
		gap: 12px;
	}

	/* Ссылки */
	.LinkBox a {
		text-decoration: none;
		color: green; /* Apple blue */
		font-weight: 500;
		padding: 8px 4px;
		transition: color 0.15s ease-out;
	}

	.LinkBox a:hover {
		color: greenyellow; 
	}

	/* Аватар */
	.Avatar img {
		width: 200px;
		height: 200px;
		object-fit: cover;
		border-radius: 24px;
	}

	/* Tablet */
	@media (max-width: 1024px) {
		.CenterBox {
			padding: 24px;
			gap: 16px;
		}

		.Avatar img {
			width: 160px;
			height: 160px;
		}
	}

	/* Mobile */
	@media (max-width: 640px) {
		.CenterBox {
			flex-direction: column;
			text-align: center;
			padding: 20px;
		}

		.Avatar img {
			width: 140px;
			height: 140px;
			border-radius: 20px;
		}

		.LinkBox {
			padding: 16px 20px;
		}
	}
</style>

<script>
	// alert("привет!")
</script>