<script>
	import Cover from '../components/Cover.svelte';
	import Footer from '../components/Footer.svelte';
	import { onMount } from 'svelte';

	let isScrolling = false;
	let scrollContainer;

	onMount(() => {
		// Get the scroll container from the parent layout
		scrollContainer = document.querySelector('.main');
		
		if (scrollContainer) {
			scrollContainer.addEventListener('scroll', handleScroll);
		}

		return () => {
			if (scrollContainer) {
				scrollContainer.removeEventListener('scroll', handleScroll);
			}
		};
	});

	function handleScroll() {
		if (isScrolling || !scrollContainer) return;

		const scrollTop = scrollContainer.scrollTop;
		const coverHeight = window.innerHeight;
		const threshold = coverHeight * 0.1; // 20% of cover height

		// If user scrolled past 20% of the cover, auto-complete the scroll
		if (scrollTop > threshold && scrollTop < coverHeight) {
			isScrolling = true;
			scrollContainer.scrollTo({
				top: coverHeight - 50,
				behavior: 'smooth'
			});
			
			// Reset flag after animation completes
			setTimeout(() => {
				isScrolling = false;
			}, 500);
		}
	}

	function scrollToCon() {
		if (!scrollContainer) {
			scrollContainer = document.querySelector('.main');
		}
		
		if (scrollContainer) {
			isScrolling = true;
			scrollContainer.scrollTo({
				top: window.innerHeight,
				behavior: 'smooth'
			});
			
			setTimeout(() => {
				isScrolling = false;
			}, 500);
		}
	}
</script>

<Cover onScrollDown={scrollToCon} />
<div class="page" id="content">
	<div class="container">
		<div class="content">
			<div class="content__main">
				<div class="post">
					<div class="post__header">
						<div class="post__category">SERVER NEWS</div>
						<div class="post__date">January 3, 2026</div>
					</div>
					<div class="post__title">
						<h2>Winter Update: New Frozen Peaks Dimension!</h2>
					</div>
					<div class="post__content">
						<p>We're excited to announce the launch of our brand new Frozen Peaks dimension! Explore icy caves, battle frost giants, and discover legendary winter gear. This update includes:</p>
						<ul>
							<li>New boss: The Ice Warden</li>
							<li>15+ unique winter items and weapons</li>
							<li>Custom ice physics and parkour challenges</li>
							<li>Exclusive cosmetic rewards</li>
						</ul>
					</div>
					<div class="post__footer">
						<span class="post__author">Posted by Admin_Steve</span>
						<span class="post__comments">24 Comments</span>
					</div>
				</div>

				<div class="post">
					<div class="post__header">
						<div class="post__category">EVENTS</div>
						<div class="post__date">December 28, 2025</div>
					</div>
					<div class="post__title">
						<h2>Double XP Weekend Starts Friday!</h2>
					</div>
					<div class="post__content">
						<p>Get ready for an epic weekend! Starting Friday at 6 PM EST, all players will receive 2x experience across all game modes. Perfect time to level up your skills and climb the leaderboards!</p>
					</div>
					<div class="post__footer">
						<span class="post__author">Posted by Mod_Alex</span>
						<span class="post__comments">89 Comments</span>
					</div>
				</div>

				<div class="post">
					<div class="post__header">
						<div class="post__category">COMMUNITY</div>
						<div class="post__date">December 20, 2025</div>
					</div>
					<div class="post__title">
						<h2>December Building Contest Winners Announced!</h2>
					</div>
					<div class="post__content">
						<p>Congratulations to all participants in our holiday building contest! The creativity this month was outstanding. Check out the winning builds in the showcase area at spawn.</p>
						<p><strong>Winners:</strong></p>
						<ul>
							<li>1st Place: CraftyBuilder22 - "Winter Wonderland Castle"</li>
							<li>2nd Place: BlockMaster99 - "Santa's Workshop"</li>
							<li>3rd Place: RedstoneQueen - "Automated Snow Village"</li>
						</ul>
					</div>
					<div class="post__footer">
						<span class="post__author">Posted by Admin_Emma</span>
						<span class="post__comments">156 Comments</span>
					</div>
				</div>

				<div class="pagination">
					<button class="pagination__btn pagination__btn--disabled">← Previous</button>
					<div class="pagination__pages">
						<button class="pagination__page pagination__page--active">1</button>
						<button class="pagination__page">2</button>
						<button class="pagination__page">3</button>
						<span class="pagination__dots">...</span>
						<button class="pagination__page">12</button>
					</div>
					<button class="pagination__btn">Next →</button>
				</div>
			</div>

			<div class="content__sidebar">
				<div class="sidebar-widget">
					<h3 class="sidebar-widget__title">Server Status</h3>
					<div class="server-status">
						<div class="server-status__indicator server-status__indicator--online"></div>
						<div class="server-status__info">
							<div class="server-status__text">ONLINE</div>
							<div class="server-status__players">1,247 / 2,000 players</div>
						</div>
					</div>
					<button class="btn btn--primary">Join Now</button>
				</div>

				<div class="sidebar-widget">
					<h3 class="sidebar-widget__title">Quick Links</h3>
					<ul class="quick-links">
						<li><a href="#">Store</a></li>
						<li><a href="#">Discord</a></li>
						<li><a href="#">Vote for Us</a></li>
						<li><a href="#">Rules</a></li>
					</ul>
				</div>

				<div class="sidebar-widget">
					<h3 class="sidebar-widget__title">Top Voters</h3>
					<ol class="leaderboard">
						<li>
							<span class="leaderboard__rank">1.</span>
							<span class="leaderboard__name">DiamondHunter</span>
							<span class="leaderboard__value">156</span>
						</li>
						<li>
							<span class="leaderboard__rank">2.</span>
							<span class="leaderboard__name">EnderWarrior</span>
							<span class="leaderboard__value">142</span>
						</li>
						<li>
							<span class="leaderboard__rank">3.</span>
							<span class="leaderboard__name">NetherKing</span>
							<span class="leaderboard__value">138</span>
						</li>
						<li>
							<span class="leaderboard__rank">4.</span>
							<span class="leaderboard__name">CreeperSlayer</span>
							<span class="leaderboard__value">127</span>
						</li>
						<li>
							<span class="leaderboard__rank">5.</span>
							<span class="leaderboard__name">MineMaster</span>
							<span class="leaderboard__value">119</span>
						</li>
					</ol>
				</div>

				<div class="sidebar-widget">
					<h3 class="sidebar-widget__title">Discord</h3>
					<div class="discord-widget">
						<p>Join our community!</p>
						<div class="discord-widget__stats">
							<span>🟢 3,429 online</span>
							<span>12,847 members</span>
						</div>
						<button class="btn btn--discord">Join Discord</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<Footer />

<style lang="scss">
	.page {
		padding: 50px 0;
	}
	
	.content {
		display: flex;
		gap: 15px;

		&__main {
			flex-grow: 1;
			flex-shrink: 0;
			width: calc(100% - 295px);
		}

		&__sidebar {
			width: 280px;
			flex-shrink: 0;
		}
	}

	.post {
		background: white;
		border-radius: 5px;
		padding: 15px;
		margin-bottom: 15px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

		&__header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 5px;
		}

		&__category {
			background: #ff6b35;
			color: white;
			padding: 4px 12px;
			border-radius: 4px;
			font-size: 12px;
			font-weight: bold;
		}

		&__date {
			color: #888;
			font-size: 14px;
		}

		&__title {
			margin-bottom: 20px;

			h2 {
				margin: 0;
				color: #2c3e50;
				font-size: 24px;
			}
		}

		&__content {
			color: #555;
			line-height: 1.6;
			margin-bottom: 20px;

			p {
				margin-bottom: 15px;
			}

			ul {
				margin-left: 20px;
				margin-bottom: 15px;
			}

			li {
				margin-bottom: 8px;
			}
		}

		&__footer {
			display: flex;
			justify-content: space-between;
			padding-top: 20px;
			border-top: 1px solid #eee;
			font-size: 14px;
			color: #888;
		}

		&__comments {
			color: #3498db;
			cursor: pointer;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	.pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
		margin-top: 30px;

		&__btn {
			padding: 10px 20px;
			background: white;
			border: 1px solid #ddd;
			border-radius: 6px;
			cursor: pointer;
			font-weight: 500;
			transition: all 0.2s;

			&:hover:not(&--disabled) {
				background: #3498db;
				color: white;
				border-color: #3498db;
			}

			&--disabled {
				opacity: 0.5;
				cursor: not-allowed;
			}
		}

		&__pages {
			display: flex;
			gap: 5px;
		}

		&__page {
			width: 40px;
			height: 40px;
			background: white;
			border: 1px solid #ddd;
			border-radius: 6px;
			cursor: pointer;
			transition: all 0.2s;

			&:hover {
				background: #ecf0f1;
			}

			&--active {
				background: #3498db;
				color: white;
				border-color: #3498db;
			}
		}

		&__dots {
			display: flex;
			align-items: center;
			padding: 0 10px;
			color: #888;
		}
	}

	.sidebar-widget {
		background: white;
		border-radius: 5px;
		padding: 20px;
		margin-bottom: 20px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

		&__title {
			margin: 0 0 15px 0;
			font-size: 18px;
			color: #2c3e50;
			border-bottom: 2px solid #3498db;
			padding-bottom: 10px;
		}
	}

	.server-status {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 15px;

		&__indicator {
			width: 16px;
			height: 16px;
			border-radius: 50%;
			
			&--online {
				background: #2ecc71;
				box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
			}
		}

		&__text {
			font-weight: bold;
			color: #2ecc71;
			font-size: 16px;
		}

		&__players {
			font-size: 14px;
			color: #666;
			margin-top: 2px;
		}
	}

	.btn {
		width: 100%;
		padding: 12px 24px;
		border: none;
		border-radius: 6px;
		font-weight: bold;
		cursor: pointer;
		transition: all 0.2s;
		font-size: 14px;

		&--primary {
			background: #2ecc71;
			color: white;

			&:hover {
				background: #27ae60;
				transform: translateY(-2px);
				box-shadow: 0 4px 8px rgba(46, 204, 113, 0.3);
			}
		}

		&--discord {
			background: #5865f2;
			color: white;

			&:hover {
				background: #4752c4;
			}
		}
	}

	.quick-links {
		list-style: none;
		padding: 0;
		margin: 0;

		li {
			margin-bottom: 10px;
		}

		a {
			color: #555;
			text-decoration: none;
			display: block;
			padding: 8px 0;
			transition: all 0.2s;

			&:hover {
				color: #3498db;
				padding-left: 8px;
			}
		}
	}

	.leaderboard {
		list-style: none;
		padding: 0;
		margin: 0;

		li {
			display: flex;
			align-items: center;
			padding: 10px 0;
			border-bottom: 1px solid #eee;

			&:last-child {
				border-bottom: none;
			}
		}

		&__rank {
			font-weight: bold;
			color: #3498db;
			margin-right: 10px;
			min-width: 25px;
		}

		&__name {
			flex-grow: 1;
			color: #555;
		}

		&__value {
			font-weight: bold;
			color: #2c3e50;
		}
	}

	.discord-widget {
		p {
			margin: 0 0 12px 0;
			color: #666;
		}

		&__stats {
			display: flex;
			flex-direction: column;
			gap: 5px;
			margin-bottom: 15px;
			font-size: 14px;
			color: #555;
		}
	}

	@media (max-width: 768px) {
		.content {
			flex-direction: column;

			&__sidebar {
				width: 100%;
			}
		}
	}
</style>