<script lang="ts">
	import ParallaxLandscape from "$lib/components/ParallaxLandscape.svelte";
	import CloudSection from "$lib/components/CloudSection.svelte";
</script>

<div class="page-wrapper">
	<div class="desktop-bg">
		<ParallaxLandscape />
	</div>

	<div class="content-container">
		<CloudSection>
			<div class="header">
				<h1 class="page-title">Why We Exist</h1>
				<p class="subtitle">Our Mission & Goal</p>
			</div>

			<div class="grid-layout">
				<!-- Challenge / Problem Card -->
				<div class="card mission-card">
					<div class="icon-circle problem-icon">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width="40"
							height="40"
							viewBox="0 0 24 24"
						>
							<path
								fill="#e91429"
								d="M7 16q.425 0 .713-.288T8 15t-.288-.712T7 14t-.712.288T6 15t.288.713T7 16m-1-3h2V8H6zm4 2h8v-2h-8zm0-4h8V9h-8zm-6 9q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20z"
							/>
						</svg>
					</div>
					<h2 class="card-title">The Problem</h2>
					<p class="card-desc">
						"Greenwashing" is everywhere. Companies spend millions
						to make you believe their products are sustainable, when
						often they are not.
					</p>
					<div class="stat-highlight">
						<span class="stat-number">53%</span>
						<span class="stat-label"
							>of green claims are vague or misleading</span
						>
					</div>
				</div>

				<!-- Solution Card -->
				<div class="card mission-card">
					<div class="icon-circle solution-icon">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width="40"
							height="40"
							viewBox="0 0 24 24"
						>
							<path
								fill="#1ed760"
								d="m23.5 17l-5 5l-3.5-3.5l1.5-1.5l2 2l3.5-3.5zM12 9a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m0-4.5c5 0 9.27 3.11 11 7.5c-.25.65-.56 1.26-.92 1.85a5.8 5.8 0 0 0-1.9-.73l.64-1.12a9.821 9.821 0 0 0-17.64 0A9.82 9.82 0 0 0 12 17.5l1.21-.07c-.14.5-.21 1.03-.21 1.57v.46l-1 .04c-5 0-9.27-3.11-11-7.5c1.73-4.39 6-7.5 11-7.5"
							/>
						</svg>
					</div>
					<h2 class="card-title">The Solution</h2>
					<p class="card-desc">
						We believe in radical transparency. By using AI to
						analyze packaging and verify claims, we give power back
						to you, the consumer.
					</p>
					<ul class="benefit-list">
						<li>
							<iconify-icon
								icon="ri:check-line"
								style="color: #1ed760;"
							></iconify-icon>
							<span>Instant Fact-Checking</span>
						</li>
						<li>
							<iconify-icon
								icon="ri:check-line"
								style="color: #1ed760;"
							></iconify-icon>
							<span>Unbiased Eco-Ratings</span>
						</li>
						<li>
							<iconify-icon
								icon="ri:check-line"
								style="color: #1ed760;"
							></iconify-icon>
							<span>Real Sustainable Alternatives</span>
						</li>
					</ul>
				</div>

				<!-- Goal Card -->
				<div class="card goal-card">
					<div class="header-row">
						<h2 class="card-title large">Our Ultimate Goal</h2>
						<iconify-icon
							icon="ri:flag-fill"
							width="32"
							style="color: #1ed760;"
						></iconify-icon>
					</div>
					<p class="goal-text">
						To create a world where <span class="highlight"
							>sustainability is the default</span
						>, not a luxury. Where every purchase you make pushes
						the industry toward a cleaner, ethical future.
					</p>
				</div>
			</div>
		</CloudSection>
	</div>
</div>

<style>
	.page-wrapper {
		width: 100%;
		min-height: 100vh;
		background-color: #000000;
		overflow-x: hidden;
		position: relative;
	}

	.desktop-bg {
		display: none;
	}

	.content-container {
		position: relative;
		z-index: 10;
		padding: 80px 24px 120px;
		max-width: 800px;
		margin: 0 auto;
	}

	.header {
		text-align: center;
		margin-bottom: 40px;
		padding: 0 20px;
	}

	.page-title {
		color: #000000;
		font-size: 48px;
		font-weight: 900;
		margin: 0;
		letter-spacing: -2px;
	}

	.subtitle {
		color: #4b5563;
		font-size: 16px;
		margin: 16px 0 0 0;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 2px;
	}

	.grid-layout {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.card {
		background: #a1a1aa; /* Light Grey Card */
		padding: 40px;
		border-radius: 8px;
		box-shadow: none;
		position: relative;
		overflow: hidden;
	}

	.mission-card {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.goal-card {
		background: #a1a1aa;
		text-align: center;
		align-items: center;
		display: flex;
		flex-direction: column;
	}

	.icon-circle {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 24px;
	}

	.problem-icon {
		background: rgba(233, 20, 41, 0.1);
	}

	.solution-icon {
		background: rgba(34, 197, 94, 0.1); /* Eco Green tint */
	}

	.card-title {
		color: #1a1a1a;
		font-size: 24px;
		font-weight: 700;
		margin: 0 0 16px 0;
	}

	.card-title.large {
		font-size: 28px;
		margin-bottom: 0;
	}

	.card-desc {
		color: #333333;
		font-size: 16px;
		line-height: 1.6;
		margin: 0 0 24px 0;
	}

	.stat-highlight {
		background: #374151; /* Darker grey */
		padding: 16px 24px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		gap: 16px;
		width: 100%;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	.stat-number {
		font-size: 32px;
		font-weight: 900;
		color: #e91429;
	}

	.stat-label {
		color: #f3f4f6; /* Light text on dark bg */
		font-size: 14px;
		font-weight: 600;
		line-height: 1.4;
	}

	.benefit-list {
		list-style: none;
		padding: 0;
		margin: 0;
		width: 100%;
	}

	.benefit-list li {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 16px;
		font-size: 16px;
		color: #1a1a1a;
		font-weight: 700;
	}

	.header-row {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 24px;
	}

	.goal-text {
		color: #333333;
		font-size: 18px;
		line-height: 1.6;
		margin-bottom: 0;
		max-width: 600px;
	}

	.highlight {
		color: #166534;
		font-weight: 700;
	}

	@media (min-width: 768px) {
		.desktop-bg {
			display: block;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			pointer-events: none;
		}

		.page-wrapper {
			background: transparent;
		}
	}

	@media (max-width: 767px) {
		.content-container {
			padding: 40px 20px 100px;
		}

		.header {
			padding: 0;
			margin-bottom: 30px;
		}

		.page-title {
			font-size: 32px;
		}
	}
</style>
