'use client';

import { useState } from 'react';
import './page.css';
import { DiscordStatus } from './components/discordstatus';

const TWITTER_LINK = "https://x.com/neruu444"
const DISCORD_USER = "neru444"
const DISCORD_ID = "1104474057916809226"
const STEAM_LINK = "https://steamcommunity.com/profiles/76561198440714757/"

function Content() {
	const [isOpen, setIsOpen] = useState(false);

	const toggleModal = () => setIsOpen(!isOpen);

	return (
		<>
			<div className="main-frame">
				<header>
					<h1>neru</h1>
					<p className="motto">˚₊‧꒰ა 𓂋 ໒꒱ ‧₊˚</p>
				</header>

				<nav className="social-links">
					<a href={TWITTER_LINK} target="_blank" rel="noopener noreferrer">twitter</a> •
					<a onClick={toggleModal}>discord</a> •
					<a href={STEAM_LINK} target="_blank" rel="noopener noreferrer">steam</a>
				</nav>

				<section className="content-box">
					<h2 className="title">✧ discord ✧</h2>
					<DiscordStatus userId={DISCORD_ID} />
				</section>

				<section className="content-box">
					<h2 className="title">✧ projects im currently working on ✧</h2>
					<ul className="directory">
						<li><a href="https://git.neru.rip/neru/seallib" target="_blank" rel="noopener noreferrer">seallib</a></li>
						<li><a href="https://git.neru.rip/neru/tinymitm" target="_blank" rel="noopener noreferrer">tinymitm</a></li>
						<li><a href="https://git.neru.rip/neru/luma" target="_blank" rel="noopener noreferrer">luma</a></li>
					</ul>
				</section>

				<section className="content-box">
					<h2 className="title">✧ sites ✧</h2>
					<ul className="directory">
						<li><a href="https://git.neru.rip" target="_blank" rel="noopener noreferrer">gitea</a></li>
						<li><a href="https://zl.neru.rip" target="_blank" rel="noopener noreferrer">zipline</a></li>
						<li><a href="https://files.neru.rip" target="_blank" rel="noopener noreferrer">files</a></li>
					</ul>
				</section>

				<section className="content-box">
					<h2 className="title">✧ dumb stuff ✧</h2>
					<ul className="directory">
						<li><a href="discord://-/apps">break discord</a></li>
						<li><a href="discord://-/channels/@me/">fix discord</a></li>
					</ul>
				</section>

				<footer>
					<div className="marquee">
						<span>✧ ꒰ა˵• ﻌ •˵ა꒱ ✧ ฅ^•ﻌ•^ฅ ✧ ᶻ 𝗓 𐰁 /ᐠ. ｡ .ᐟ\ ✧ ฅ/ᐠ. ̫ .ᐟ\ฅ ✧ ꒰ა≽^•⩊•^≼໒꒱ ✧ ₍˄·͈༝·͈˄₎ ✧ /ᐠ. ⩊ .ᐟ\ﾉ ✧ 𓏲ּ ֶָ ࣪ /ᐠ .ᆺ. ᐟ\ﾉ ✧</span>
					</div>
					{/* <p style={{ fontSize: '0.65rem', opacity: 0.5 }}>✼　 ҉ 　✼　 ҉ 　✼　 ҉ 　✼</p> */}
				</footer>

				{isOpen && (
					<div className="modal-overlay" onClick={toggleModal}>
						<div className="modal-content" onClick={(e) => e.stopPropagation()}>
							<div className="modal-header">✧ discord info ✧</div>
							<div className="modal-body">
								<p><strong>User:</strong> {DISCORD_USER}</p>
								<p><strong>ID:</strong> {DISCORD_ID}</p>
							</div>
							<button className="modal-close-btn" onClick={toggleModal}>[ close ]</button>
						</div>
					</div>
				)}
			</div>
		</>
	);
}

export default function Home() {
	return (
		<Content />
	)
}