---
import Layout from "../layouts/Layout.astro";
import StreamScheduleComponent from "../components/socials/StreamSchedule.svelte";
import Footer from "@/components/global/FooterComponent.astro";
import { Image } from "astro:assets";
import profile from "./_images/profile.webp";
import WebsiteIcon from "./_images/website-icon.svg";
import ArrowIcon from "./_images/arrow-icon.svg";
import TwitchIcon from "./_images/twitch.svg";
import YouTubeIcon from "./_images/youtube.svg";
import InstagramIcon from "./_images/instagram.svg";
import GithubIcon from "./_images/github.svg";
import CodePenIcon from "./_images/codepen.svg";
import LocationIcon from "./_images/location.svg";
import DateTimeIcon from "./_images/date-time.svg";
import DiscordIcon from "./_images/discord.svg";
---

<Layout
	title="Socials"
	description="Check out Ryan's socials"
	thumbnail="/images/socials.webp"
>
	<div class="flex flex-col items-center justify-center px-0 py-10">
		<div class="w-[calc(100%-20px)] max-w-5xl">
			<div
				id="cards"
				class="grid grid-cols-2 gap-2 md:grid-cols-3 lg:grid-cols-4"
			>
				<div
					id="intro"
					class="social-card col-span-2 h-5xl md:col-span-3 md:h-100 lg:col-span-4"
				>
					<div
						class="social-card-content flex flex-col bg-cover bg-top md:flex-row md:justify-between md:gap-3"
					>
						<div
							class="mt-auto flex flex-col items-start justify-start gap-3 md:h-1/2 md:flex-row md:items-center md:gap-10"
						>
							<div
								class="mb-5 flex aspect-square w-32 items-center justify-center overflow-hidden rounded-full border-2 border-solid border-white bg-[rgb(20,20,20)] md:mb-0 md:w-72"
							>
								<Image
									src={profile}
									alt="Ryan"
									width="176"
									class="aspect-square w-32 md:w-44"
								/>
							</div>
							<div>
								<h1 class="mb-2 text-4xl font-bold">
									RythonDev
								</h1>
								<p class="text-lg text-[#ccc]">
									I am a Malaysian Chinese content creator
									based in Australia! I mainly stream
									co-working and software development, known
									for developing the Multi-Task widget!
								</p>
							</div>
						</div>
					</div>
				</div>
				<!-- Website -->
				<a href="https://rython.dev/" target="_blank">
					<div class="social-card">
						<div
							class="social-card-content group flex flex-col items-start justify-between"
						>
							<div
								class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
							>
								<ArrowIcon />
							</div>
							<div id="website-icon" class="icon-box h-12 w-12">
								<WebsiteIcon />
							</div>
							<div>
								<h2 class="text-xl font-bold">Website</h2>
								<p class="text-[#ccc]">rython.dev</p>
							</div>
						</div>
					</div>
				</a>
				<!-- Twitch -->
				<a href="https://twitch.tv/RythonDev/" target="_blank">
					<div class="social-card">
						<div
							class="social-card-content group flex flex-col items-start justify-between"
						>
							<div
								class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
							>
								<ArrowIcon />
							</div>
							<div id="twitch-icon" class="icon-box">
								<TwitchIcon />
							</div>
							<div>
								<h2 class="text-xl font-bold">Twitch</h2>
								<p class="text-[#ccc]">RythonDev</p>
							</div>
						</div>
					</div>
				</a>
				<!-- YouTube -->
				<a href="https://youtube.com/@RythonDev/" target="_blank">
					<div class="social-card">
						<div
							class="social-card-content group flex flex-col items-start justify-between"
						>
							<div
								class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
							>
								<ArrowIcon />
							</div>
							<div id="youtube-icon" class="icon-box">
								<YouTubeIcon />
							</div>
							<div>
								<h2 class="text-xl font-bold">YouTube</h2>
								<p class="text-[#ccc]">@RythonDev</p>
							</div>
						</div>
					</div>
				</a>
				<!-- Instagram -->
				<a href="https://instagram.com/RythonDev" target="_blank">
					<div class="social-card">
						<div
							class="social-card-content group flex flex-col items-start justify-between"
						>
							<div
								class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
							>
								<ArrowIcon />
							</div>
							<div id="instagram-icon" class="icon-box">
								<InstagramIcon />
							</div>
							<div>
								<h2 class="text-xl font-bold">Instagram</h2>
								<p class="text-[#ccc]">@RythonDev</p>
							</div>
						</div>
					</div>
				</a>
				<!-- Github -->
				<a href="https://github.com/liyunze-coding" target="_blank">
					<div class="social-card">
						<div
							class="social-card-content group flex flex-col items-start justify-between"
						>
							<div
								class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
							>
								<ArrowIcon />
							</div>
							<div
								class="relative z-20 h-12 w-12 rounded-full border-8 border-solid border-black bg-white"
							>
								<div
									id="github-icon"
									class="icon-box 2-10 absolute top-1/2 left-1/2 h-12 w-12 -translate-x-1/2 -translate-y-1/2 rounded-full"
								>
									<GithubIcon />
								</div>
							</div>
							<div>
								<h2 class="text-xl font-bold">Github</h2>
								<p class="text-[#ccc]">liyunze-coding</p>
							</div>
						</div>
					</div>
				</a>
				<!-- Codepen -->
				<a href="https://codepen.io/RythonDev" target="_blank">
					<div class="social-card">
						<div
							class="social-card-content group flex flex-col items-start justify-between"
						>
							<div
								class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
							>
								<ArrowIcon />
							</div>
							<div
								id="codepen-icon"
								class="icon-box h-12 w-12 rounded-full"
							>
								<CodePenIcon />
							</div>
							<div>
								<h2 class="text-xl font-bold">Codepen</h2>
								<p class="text-[#ccc]">RythonDev</p>
							</div>
						</div>
					</div>
				</a>
				<!-- Stream Schedule -->
				<div class="social-card col-span-2 h-fit">
					<div
						class="social-card-content flex flex-col items-center justify-center p-0 md:p-3"
					>
						<h2 class="mb-1 text-xl font-bold">Stream Schedule</h2>
						<StreamScheduleComponent client:load />
					</div>
				</div>
				<!-- Location -->
				<div class="social-card col-span-2 md:col-span-1 lg:col-span-2">
					<div
						class="social-card-content flex flex-col items-start justify-center gap-5"
					>
						<div
							class="flex flex-row items-center justify-center gap-3"
						>
							<LocationIcon />
							<div>
								<h2 class="text-xl font-bold">Location</h2>
								<p class="text-[#ccc]">Melbourne, Australia</p>
							</div>
						</div>
						<div
							class="flex flex-row items-center justify-center gap-3"
						>
							<DateTimeIcon />

							<div>
								<h2 class="text-xl font-bold">Date & Time</h2>
								<p class="text-[#ccc]">
									<div id="display-date" class="text-[#ccc]">
									</div>
									<span
										id="time-in-aus"
										class="text-[#ccc] uppercase"></span>
									<span
										id="time-difference"
										class="text-[#ccc]"
									>
									</span>
								</p>
							</div>
						</div>
					</div>
				</div>
				<!-- Ko-fi -->
				<a href="https://ko-fi.com/rython" target="_blank">
					<div class="social-card">
						<div
							class="social-card-content group flex flex-col items-start justify-between"
						>
							<div
								class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
							>
								<ArrowIcon />
							</div>
							<div
								id="kofi-icon"
								class="icon-box flex aspect-square h-12 w-12 items-center justify-center rounded-full bg-[#00BCF2]"
							>
								<img
									src="/images/socials/kofi_s_logo_nolabel.webp"
									alt="ko-fi logo"
									width="28"
								/>
							</div>
							<div>
								<h2 class="text-xl font-bold">Ko-fi</h2>
								<p class="text-[#ccc]">Rython</p>
							</div>
						</div>
					</div>
				</a>
				<!-- Discord -->
				<a href="https://rython.dev/discord" target="_blank">
					<div class="social-card">
						<div
							class="social-card-content group flex flex-col items-start justify-between"
						>
							<div
								class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
							>
								<ArrowIcon />
							</div>
							<div id="discord-icon" class="icon-box">
								<DiscordIcon />
							</div>
							<div>
								<h2 class="text-xl font-bold">Discord</h2>
								<p class="text-[#ccc]">
									rython.dev/<wbr />discord
								</p>
							</div>
						</div>
					</div>
				</a>
				<div class="hidden opacity-0 lg:block"></div>
				<!-- Tiktok -->
				<a href="https://tiktok.com/@RythonDev" target="_blank">
					<div class="social-card">
						<div
							class="social-card-content group flex flex-col items-start justify-between"
						>
							<div
								class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
							>
								<ArrowIcon />
							</div>
							<div
								id="tiktok-icon"
								class="icon-box flex h-12 w-12 items-center justify-center rounded-full bg-[#111]"
							>
								<img
									src="/images/socials/tiktok.webp"
									alt="tiktok logo"
									width="24"
								/>
							</div>
							<div>
								<h2 class="text-xl font-bold">Tiktok</h2>
								<p class="text-[#ccc]">@RythonDev</p>
							</div>
						</div>
					</div>
				</a>
				<div class="hidden opacity-0 md:block lg:hidden"></div>
				<!-- Bluesky -->
				<a href="https://bsky.app/profile/rython.dev" target="_blank">
					<div class="social-card">
						<div
							class="social-card-content group flex flex-col items-start justify-between"
						>
							<div
								class="absolute right-5 rotate-45 opacity-0 transition-all duration-300 ease-in-out group-hover:rotate-0 group-hover:opacity-10000"
							>
								<ArrowIcon />
							</div>
							<div
								id="bluesky-icon"
								class="icon-box flex aspect-square h-12 w-12 items-center justify-center rounded-full bg-[linear-gradient(0deg,rgba(86,183,254,1)_0%,rgba(13,125,253,1)_100%)]"
							>
								<img
									src="/images/socials/bluesky.webp"
									alt="bluesky logo"
									width="35"
								/>
							</div>
							<div>
								<h2 class="text-xl font-bold">Bluesky</h2>
								<p class="text-[#ccc]">@rython.dev</p>
							</div>
						</div>
					</div>
				</a>
			</div>
			<div class="mx-auto mt-10 w-fit md:ml-auto">
				Hover Light effect by
				<a
					class="text-white underline hover:text-blue-500"
					href="https://www.youtube.com/watch?v=htGfnF1zN4g"
					target="_blank"
				>
					Hyperplexed
				</a>
			</div>
		</div>
	</div>
	<Footer />
</Layout>

<style>
	:root {
		--bg-color: rgb(20, 20, 20);
		--card-color: rgb(23, 23, 23);
	}

	#cards:hover .social-card::after {
		opacity: 1;
	}

	#intro .social-card-content {
		background-image:
			linear-gradient(
				to bottom,
				rgba(0, 0, 0, 0) 0%,
				rgba(20, 20, 20, 1) 70%
			),
			url("/images/socials/landscape.webp");

		background-repeat: no-repeat;
	}

	.social-card {
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 3rem;

		position: relative;
	}

	.social-card:not(#intro) {
		height: 220px;
	}

	.social-card:hover::before {
		opacity: 1;
	}

	.social-card::before,
	.social-card::after {
		border-radius: inherit;
		content: "";
		height: 100%;
		left: 0px;
		opacity: 0;
		position: absolute;
		top: 0px;
		transition: opacity 500ms;
		width: 100%;
	}

	.social-card::before {
		background: radial-gradient(
			800px circle at var(--mouse-x) var(--mouse-y),
			rgba(255, 255, 255, 0.06),
			transparent 40%
		);
		z-index: 3;
	}

	.social-card::after {
		background: radial-gradient(
			600px circle at var(--mouse-x) var(--mouse-y),
			rgba(255, 255, 255, 0.5),
			transparent 40%
		);
		z-index: 1;
	}

	.social-card > .social-card-content {
		background-color: var(--card-color);
		border-radius: inherit;
		/* flex-grow: 1; */
		inset: 1px;
		position: absolute;
		padding: 1.75rem;
		z-index: 3;
	}

	.icon-box {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;

		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}

	.icon-box::before {
		content: "";
		z-index: -2;
		width: 100%;
		height: 100%;
		position: absolute;
		border-radius: 999px;
		--box-shadow-values: 0px 0px 20px 2px;
	}

	#website-icon::before,
	#github-icon::before,
	#codepen-icon::before,
	#tiktok-icon::before {
		box-shadow: var(--box-shadow-values) #888;
	}

	#twitch-icon::before {
		box-shadow: var(--box-shadow-values) #8c44f7;
	}

	#youtube-icon::before {
		box-shadow: var(--box-shadow-values) #ff0000;
	}

	#instagram-icon::before {
		box-shadow: var(--box-shadow-values) #f56040;
	}

	#kofi-icon::before {
		box-shadow: var(--box-shadow-values) #00bcf2;
	}

	#discord-icon::before {
		box-shadow: var(--box-shadow-values) #5865f2;
	}

	#bluesky-icon::before {
		box-shadow: var(--box-shadow-values) #56b7fe;
	}
</style>
<script is:inline>
	const MY_TIMEZONE = "Australia/Melbourne";
	document.getElementById("cards").onmousemove = (e) => {
		for (const card of document.getElementsByClassName("social-card")) {
			const rect = card.getBoundingClientRect(),
				x = e.clientX - rect.left,
				y = e.clientY - rect.top;

			card.style.setProperty("--mouse-x", `${x}px`);
			card.style.setProperty("--mouse-y", `${y}px`);
		}
	};

	function getTimezoneDifference(timezone1, timezone2) {
		// Create two dates: one in each time zone
		const date1 = new Date().toLocaleString("en-US", {
			timeZone: timezone1,
		});
		const date2 = new Date().toLocaleString("en-US", {
			timeZone: timezone2,
		});

		// Convert the dates to Date objects
		const dateObj1 = new Date(date1);
		const dateObj2 = new Date(date2);

		// Get the difference in minutes between the two dates
		const diffMinutes =
			(dateObj2.getTime() - dateObj1.getTime()) / (1000 * 60);

		// Convert the difference in minutes to hours and minutes
		const diffHours = Math.floor(diffMinutes / 60);
		const diffMinutesRemaining = Math.floor(diffMinutes % 60);

		return { hours: diffHours, minutes: diffMinutesRemaining };
	}

	function displayTimeDifference(hour, minutes) {
		let ahead = false;
		if (hour < 0) {
			hour = 24 + hour;
		} else {
			ahead = true;
		}

		if (hour === 0 && minutes === 0) {
			return "";
		}

		let differenceDisplay = ahead ? "ahead" : "behind";

		if (hour === 0) {
			return `( ${minutes} minutes ${differenceDisplay} )`;
		}

		if (minutes === 0) {
			return `( ${hour} hours ${differenceDisplay} )`;
		}

		return `( ${hour} hours and ${minutes} minutes ${differenceDisplay} )`;
	}

	let { hours, minutes } = getTimezoneDifference(
		Intl.DateTimeFormat().resolvedOptions().timeZone,
		MY_TIMEZONE
	);

	let timeDifference = displayTimeDifference(hours, minutes);

	let time = new Date().toLocaleTimeString("en-UK", {
		timeZone: MY_TIMEZONE,
		hour: "numeric",
		minute: "numeric",
		hour12: true,
	});

	let displayDate = new Date().toLocaleDateString("en-UK", {
		timeZone: MY_TIMEZONE,
		weekday: "long",
		year: "numeric",
		month: "short",
		day: "numeric",
	});

	setInterval(() => {
		time = new Date().toLocaleTimeString("en-UK", {
			timeZone: MY_TIMEZONE,
			hour: "numeric",
			minute: "numeric",
			hour12: true,
		});

		document.getElementById("time-in-aus").innerText = time;
	}, 2000);

	document.querySelector("#time-difference").innerText = timeDifference;
	document.querySelector("#display-date").innerText = displayDate;
	document.getElementById("time-in-aus").innerText = time;
</script>