---
import TaskWidget from "./TaskWidget.svelte";
import { Image } from "astro:assets";
import CoworkingGuide from "./images/projects/coworking-guide.webp";
import Wnrs from "./images/projects/wnrs.webp";
import TwitchPlays from "./images/projects/twitchplays.webp";
---

<div
	id="projects"
	class="flex h-fit flex-col items-center [perspective:1000px]"
>
	<div class="w-full max-w-[1440px]">
		<div
			class="flex h-fit w-full flex-col justify-center px-10 lg:flex-row lg:px-20"
		>
			<div
				class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mr-5 lg:mb-0 lg:ml-auto lg:w-1/2"
			>
				<Image
					src={CoworkingGuide}
					alt="coworking guide"
					class=`absolute max-w-full
                    top-1/2 left-1/2
                    [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40
                    border-2 border-solid border-white rounded-xl`
					width="700"
				/>
				<Image
					src={CoworkingGuide}
					alt="coworking guide"
					width="700"
					class=`absolute max-w-full
                    top-1/2 left-1/2
                    [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-100
                    border-2 border-solid border-white rounded-xl`
				/>
				<div
					class="visit-div absolute top-1/2 left-1/2 aspect-video w-[700px] max-w-full [transform:translateX(-50%)_translateY(-50%)] rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0"
				>
					<a
						href="https://coworking-guide.vercel.app/"
						target="_blank"
						class="absolute top-1/2 left-1/2 hidden [transform:translateX(-50%)_translateY(-50%)] rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500 lg:block"
						>Visit site</a
					>
				</div>
			</div>
			<div class="mb-10 flex items-center justify-center lg:hidden">
				<a
					href="https://coworking-guide.vercel.app/"
					target="_blank"
					class="rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500"
					>View repository</a
				>
			</div>
			<div
				class="flex h-fit w-full flex-col items-center justify-center lg:h-[340px] lg:w-1/2 lg:items-start lg:px-10"
			>
				<h2 class="mb-5 text-center text-3xl font-bold lg:text-left">
					Coworking Guide
				</h2>
				<p
					class="max-w-lg text-center text-xl text-balance lg:max-w-none lg:text-left"
				>
					A guide to coworking streams for streamers, covers wide
					range of topics from tips on how to get started with setting
					up stream to how to grow your audience!
				</p>
				<div
					class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-start"
				>
					<div
						class="my-1 mr-1 w-fit rounded-full bg-white px-3 py-1 text-black transition-colors duration-300"
					>
						Astro
					</div>
					<div
						class="my-1 mr-1 w-fit rounded-full bg-[#3178C6] px-3 py-1 text-white transition-colors duration-300"
					>
						TypeScript
					</div>
					<div
						class="my-1 mr-1 w-fit rounded-full bg-black px-3 py-1 text-white transition-colors duration-300"
					>
						Markdown
					</div>
				</div>
			</div>
		</div>
		<div
			class="mt-10 flex h-fit w-full flex-col-reverse justify-center px-10 lg:flex-row lg:px-16"
		>
			<div
				class="flex h-fit w-full flex-col items-center justify-center lg:h-[340px] lg:w-1/2 lg:items-end lg:px-10"
			>
				<h2 class="mb-5 text-center text-3xl font-bold lg:text-right">
					Chat-Task-Tic Widget
				</h2>
				<p
					class="max-w-lg text-center text-xl text-balance lg:max-w-none lg:text-right"
				>
					Used by 100+ Twitch streamers, allow viewers and streamers
					to add their own tasks to the widget for accountability!
					Easy to setup and the customization possibilities are
					endless!
				</p>
				<div
					class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-end"
				>
					<div
						class="bg-html my-1 mr-1 w-fit rounded-full px-3 py-1 text-white transition-colors duration-300"
					>
						HTML
					</div>
					<div
						class="my-1 mr-1 w-fit rounded-full bg-blue-700 px-3 py-1 text-white transition-colors duration-300"
					>
						CSS
					</div>
					<div
						class="my-1 mr-1 w-fit rounded-full bg-yellow-400 px-3 py-1 text-black transition-colors duration-300"
					>
						Javascript
					</div>
				</div>
			</div>
			<div class="mb-10 flex items-center justify-center lg:hidden">
				<a
					href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity"
					target="_blank"
					class="rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-600"
					>View repository</a
				>
			</div>
			<TaskWidget client:visible />
		</div>

		<div
			class="mt-5 flex h-fit w-full flex-col justify-center px-10 lg:mt-0 lg:flex-row lg:px-20"
		>
			<div
				class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mr-5 lg:mb-0 lg:ml-auto lg:w-1/2"
			>
				<Image
					src={Wnrs}
					alt="Hex Guess"
					class=`absolute max-w-full
                    top-1/2 left-1/2
                    [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40
                    border-2 border-solid border-white rounded-xl
                    aspect-video`
					width="700"
				/>
				<Image
					src={Wnrs}
					alt="Hex Guess"
					width="700"
					class=`absolute max-w-full
                    top-1/2 left-1/2
                    [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-100
                    border-2 border-solid border-white rounded-xl
                    aspect-video`
				/>
				<div
					class="visit-div absolute top-1/2 left-1/2 aspect-video w-[700px] max-w-full [transform:translateX(-50%)_translateY(-50%)] rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0"
				>
					<a
						href="https://liyunze-coding.github.io/wnrs/"
						target="_blank"
						class="absolute top-1/2 left-1/2 hidden [transform:translateX(-50%)_translateY(-50%)] rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500 lg:block"
						>Visit site</a
					>
				</div>
			</div>
			<div class="mb-10 flex items-center justify-center lg:hidden">
				<a
					href="https://hex-guess.vercel.app/"
					target="_blank"
					class="rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500"
					>View repository</a
				>
			</div>
			<div
				class="flex h-fit w-full flex-col items-center justify-center lg:h-[340px] lg:w-1/2 lg:items-start lg:px-10"
			>
				<h2 class="mb-5 text-center text-3xl font-bold">
					We're Not Really Strangers
				</h2>
				<p
					class="max-w-lg text-center text-xl text-balance lg:max-w-none lg:text-left"
				>
					Otherwise abbreviated as "WNRS", this is a digital
					adaptation of the popular card game designed to foster
					meaningful connections through engaging questions and
					prompts.
				</p>
				<div
					class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-start"
				>
					<div
						class="bg-react my-1 mr-1 w-fit rounded-full px-3 py-1 text-black transition-colors duration-300"
					>
						React
					</div>
					<div
						class="bg-typescript my-1 mr-1 w-fit rounded-full px-3 py-1 text-white transition-colors duration-300"
					>
						Typescript
					</div>
				</div>
			</div>
		</div>
		<div
			class="mt-10 flex h-fit w-full flex-col-reverse justify-center px-10 lg:flex-row lg:px-16"
		>
			<div
				class="flex h-fit w-full flex-col items-center justify-center lg:h-[340px] lg:w-1/2 lg:items-end lg:px-10"
			>
				<h2 class="mb-5 text-center text-3xl font-bold lg:text-right">
					Twitch Plays X
				</h2>
				<p
					class="max-w-lg text-center text-xl text-balance lg:max-w-none lg:text-right"
				>
					Allow Twitch chatters to play games such as Pokemon!
					Chatters can enter messages such as "up up down down left
					right B A" and the Python program will trigger the
					corresponding keypresses.
				</p>
				<div
					class="mt-5 flex w-full flex-row flex-wrap justify-center lg:justify-end"
				>
					<div
						class="bg-python my-1 mr-1 w-fit rounded-full px-3 py-1 text-white transition-colors duration-300"
					>
						Python
					</div>
					<div
						class="bg-win32api my-1 mr-1 w-fit rounded-full px-3 py-1 text-white transition-colors duration-300"
					>
						win32API
					</div>
				</div>
			</div>
			<div class="mb-10 flex items-center justify-center lg:hidden">
				<a
					href="https://github.com/liyunze-coding/TwitchPlaysX"
					target="_blank"
					class="rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500"
					>View repository</a
				>
			</div>
			<div
				class="image-container relative mb-5 flex aspect-video w-full [perspective:200px] lg:mr-5 lg:mb-0 lg:ml-auto lg:w-1/2"
			>
				<Image
					src={TwitchPlays}
					alt="Twitch Plays X"
					class=`absolute max-w-full
                    top-1/2 left-1/2 [transform:translateX(-48%)_translateY(-48%)_translateZ(-50px)_rotateY(-3deg)] opacity-40
                    border-2 border-solid border-white rounded-xl`
					`
					width="700"
				/>
				<Image
					src={TwitchPlays}
					alt="Twitch Plays X"
					width="700"
					class=`absolute max-w-full
                    top-1/2 left-1/2
                    [transform:translateX(-50%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)] opacity-100
                    border-2 border-solid border-white rounded-xl`
				/>
				<div
					class="visit-div absolute top-1/2 left-1/2 aspect-video w-[700px] max-w-full [transform:translateX(-50%)_translateY(-50%)] rounded-xl border-2 border-solid border-white bg-[rgba(0,0,0,0.5)] opacity-0"
				>
					<a
						href="https://github.com/liyunze-coding/TwitchPlaysX"
						target="_blank"
						class="absolute top-1/2 left-1/2 hidden [transform:translateX(-50%)_translateY(-50%)] rounded-xl bg-blue-600 px-5 py-3 font-bold opacity-100 transition-colors duration-300 hover:bg-white hover:text-blue-500 lg:block"
						>View repository</a
					>
				</div>
			</div>
		</div>
	</div>
</div>

<style>
	.image-container img {
		transition: transform 0.5s ease-in-out;
	}
	@media (min-width: 1025px) {
		.image-container:hover > img {
			transform: rotateY(0deg) rotateX(0deg) translateZ(0px)
				translateX(-50%) translateY(-50%);
		}

		.image-container:hover > .visit-div {
			opacity: 100%;
			transition: opacity 0.3s ease-in-out;
			transition-delay: 0.3s;
		}
	}
</style>