<script lang="ts">
	const news = [
		{
			id: 1,
			title: "Ocean Cleanup hits milestone",
			desc: "500 tons removed from Pacific patch.",
			date: "2h ago",
		},
		{
			id: 2,
			title: "New Plastic Ban in effect",
			desc: "Major cities adopt strict policies.",
			date: "5h ago",
		},
		{
			id: 3,
			title: "Ethix App launches globally",
			desc: "Empowering users to make better choices.",
			date: "1d ago",
		},
	];
</script>

<div class="page-container">
	<div class="safe-area">
		<div class="header">
			<h1 class="page-title">Eco News</h1>
			<p class="subtitle">Latest sustainability updates</p>
		</div>

		<div class="scroll-content">
			{#each news as item (item.id)}
				<div class="news-card">
					<div class="news-image"></div>
					<p class="news-meta">{item.date} • Trending</p>
					<h2 class="news-title">{item.title}</h2>
					<p class="news-desc">{item.desc}</p>
				</div>
			{/each}
		</div>
	</div>
</div>

<style>
	.page-container {
		width: 100%;
		height: 100vh;
		background-color: #0f172a;
		overflow-y: auto;
	}

	.safe-area {
		padding-top: 50px;
		padding-bottom: 120px;
	}

	.header {
		padding: 24px;
		padding-top: 30px;
	}

	.page-title {
		color: white;
		font-size: 34px;
		font-weight: 800;
		letter-spacing: -0.5px;
		margin: 0;
	}

	.subtitle {
		color: #94a3b8;
		font-size: 14px;
		margin: 4px 0 0 0;
	}

	.scroll-content {
		padding: 24px;
		padding-bottom: 140px;
	}

	.news-card {
		background-color: rgba(30, 41, 59, 0.9);
		padding: 20px;
		border-radius: 24px;
		border: 1px solid #334155;
		margin-bottom: 16px;
	}

	.news-image {
		height: 120px;
		background-color: #334155;
		border-radius: 12px;
		margin-bottom: 12px;
	}

	.news-meta {
		color: #94a3b8;
		font-size: 12px;
		margin: 0 0 4px 0;
	}

	.news-title {
		color: white;
		font-weight: bold;
		font-size: 18px;
		margin: 4px 0 8px 0;
	}

	.news-desc {
		color: #cbd5e1;
		margin: 0;
	}
</style>
