<script lang="ts">
	import { onMount } from "svelte";
	import { fly, fade } from "svelte/transition";
	import ParallaxLandscape from "$lib/components/ParallaxLandscape.svelte";
	import CloudSection from "$lib/components/CloudSection.svelte";

	const news = [
		{
			id: 1,
			title: "Ocean Cleanup Hits 500 Tons",
			desc: "Major milestone reached in the Pacific.",
			date: "2h ago",
		},
		{
			id: 2,
			title: "Plastic Ban Starts Today",
			desc: "Big cities are saying no to single-use.",
			date: "5h ago",
		},
		{
			id: 3,
			title: "Ethix Launches Globally",
			desc: "Now available worldwide.",
			date: "1d ago",
		},
	];

	const scanHistory = [
		{
			name: "Plastic Water Bottle",
			date: "Today, 10:45 AM",
			severity: "High",
		},
		{ name: "Organic Banana", date: "Yesterday, 3:20 PM", severity: "Low" },
		{ name: "Aluminum Soda Can", date: "Mon, 12:15 PM", severity: "Low" },
		{ name: "Takeout Container", date: "Sun, 8:30 PM", severity: "Medium" },
		{ name: "Shampoo Bottle", date: "Sat, 11:00 AM", severity: "High" },
	];

	const features = [
		{
			title: "Scan It",
			desc: "Point your camera at any product.",
			customSvg:
				"M13 9h5l-5-5zM6 22q-.825 0-1.412-.587T4 20v-3h16v3q0 .825-.587 1.413T18 22zm-5-7v-2h22v2zm3-4V4q0-.825.588-1.412T6 2h8l6 6v3z",
		},
		{
			title: "Get Real Info",
			desc: "AI breaks down the real impact.",
			customSvg:
				"M11 17h2v-6h-2zm1-8q.425 0 .713-.288T13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9m0 13q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8",
		},
		{
			title: "Find Better",
			desc: "See eco-friendly swaps instantly.",
			customSvg:
				"M7 21v-2h4v-3.1q-1.225-.275-2.187-1.037T7.4 12.95q-1.875-.225-3.137-1.637T3 8V5h4V3h10v2h4v3q0 1.9-1.263 3.313T16.6 12.95q-.45 1.15-1.412 1.913T13 15.9V19h4v2zm0-10.2V7H5v1q0 .95.55 1.713T7 10.8m5 3.2q1.25 0 2.125-.875T15 11V5H9v6q0 1.25.875 2.125T12 14m5-3.2q.9-.325 1.45-1.088T19 8V7h-2zm-5-1.3",
		},
		{
			title: "Call It Out",
			desc: "Report misleading green claims.",
			customSvg:
				"M3 22V2h13v4.675L10.675 12H7v8h3.675l2 2zM9.5 7q.425 0 .713-.288T10.5 6t-.288-.712T9.5 5t-.712.288T8.5 6t.288.713T9.5 7M15 21.5L11.5 18H9v-4h2.5l3.5-3.5zm2 1.425v-2q1.75-.375 2.875-1.75T21 16t-1.125-3.175T17 11.1v-2q2.6.35 4.3 2.313T23 16t-1.7 4.588t-4.3 2.337m0-4.125v-5.625q.875.3 1.438 1.075T19 16t-.562 1.738T17 18.8",
		},
	];

	const stats = [
		{ value: "50K+", label: "Scans" },
		{ value: "12K", label: "Users" },
		{ value: "98%", label: "Accuracy" },
		{ value: "24/7", label: "Support" },
	];

	let scrollY = $state(0);

	// Score Rotation Logic with 2D images
	let scoreIndex = $state(0);
	const scores = [
		{
			label: "Fiji Water",
			score: "94/100",
			color: "#1ed760",
			image: "/water-bottle.png",
			blendMode: "multiply",
			scale: 0.7,
		},
		{
			label: "Plastic Bag",
			score: "12/100",
			color: "#e91429",
			image: "/plastic-bag.png",
			blendMode: "multiply",
			scale: 0.75,
		},
		{
			label: "Starbucks",
			score: "65/100",
			color: "#f59b23",
			image: "/coffee-cup.png",
			blendMode: "multiply",
			scale: 1,
		},
	];

	onMount(() => {
		const handleScroll = () => {
			scrollY = window.scrollY;
		};

		window.addEventListener("scroll", handleScroll);

		const interval = setInterval(() => {
			scoreIndex = (scoreIndex + 1) % scores.length;
		}, 4000); // 4 seconds per item

		return () => {
			window.removeEventListener("scroll", handleScroll);
			clearInterval(interval);
		};
	});
</script>

<!-- Desktop Web View -->
<div class="web-page">
	<!-- Cartoon Parallax Landscape -->
	<ParallaxLandscape />

	<!-- Hero Section -->
	<section class="hero">
		<div
			class="hero-content"
			style="transform: translateY({scrollY * 0.15}px)"
		>
			<div class="hero-badge">
				<iconify-icon icon="ri:eye-line" width="16"></iconify-icon>
				<span>See the real impact</span>
			</div>
			<h1 class="hero-title">
				Know What <br /> You Buy.
			</h1>
			<p class="hero-desc">
				Scan a product. See if it's actually good for the planet. Find
				better alternatives if it's not. Simple as that.
			</p>
			<div class="hero-actions">
				<a
					href="/catalogue"
					class="cta-primary"
					style="text-decoration: none;"
				>
					<iconify-icon icon="ri:store-2-fill" width="20"
					></iconify-icon>
					<span>Browse Database</span>
				</a>
			</div>
		</div>

		<!-- 2D Product Carousel -->
		<div
			class="hero-visual"
			style="transform: translateY({scrollY * -0.2}px)"
		>
			<div class="visual-container">
				<div class="hero-image">
					{#key scoreIndex}
						<div
							class="product-image-wrapper"
							in:fly={{ x: 100, duration: 500, opacity: 0 }}
							out:fly={{ x: -100, duration: 500, opacity: 0 }}
						>
							<img
								src={scores[scoreIndex].image}
								alt={scores[scoreIndex].label}
								class="product-image"
								style="mix-blend-mode: {scores[scoreIndex]
									.blendMode}; transform: scale({scores[
									scoreIndex
								].scale});"
							/>
						</div>
					{/key}
				</div>
				<div class="orbit orbit-1"></div>
				<div class="orbit orbit-2"></div>

				<!-- Floating Status Card (Simple Fade) -->
				<div class="floating-card">
					{#key scoreIndex}
						<div class="score-content" in:fade={{ duration: 300 }}>
							<iconify-icon
								icon="ri:checkbox-circle-fill"
								width="24"
								style="color: {scores[scoreIndex].color};"
							></iconify-icon>
							<div>
								<div class="card-label">
									{scores[scoreIndex].label}
								</div>
								<div class="card-value">
									{scores[scoreIndex].score}
								</div>
							</div>
						</div>
					{/key}
				</div>
			</div>
		</div>
	</section>

	<!-- Journey Spacer -->
	<div class="spacer-section" style="height: 30vh;"></div>

	<!-- Stats Section with Cartoony Cloud -->
	<div style="transform: translateY({scrollY * 0.05}px)">
		<CloudSection>
			<div class="stats-content">
				{#each stats as stat}
					<div class="stat-item">
						<div class="stat-value">{stat.value}</div>
						<div class="stat-label">{stat.label}</div>
					</div>
				{/each}
			</div>
		</CloudSection>
	</div>

	<!-- Features Section with Cartoony Cloud -->
	<CloudSection>
		<div class="section-header">
			<h2 class="section-title cloud-title">How It Works</h2>
			<p class="section-desc cloud-desc">
				Tools to help you shop smarter.
			</p>
		</div>
		<div class="features-grid">
			{#each features as feature}
				<div class="feature-card">
					<div class="feature-icon">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width="32"
							height="32"
							viewBox="0 0 24 24"
						>
							<path fill="currentColor" d={feature.customSvg} />
						</svg>
					</div>
					<h3 class="feature-title">{feature.title}</h3>
					<p class="feature-desc">{feature.desc}</p>
				</div>
			{/each}
		</div>
	</CloudSection>

	<!-- News Section -->
	<CloudSection>
		<div class="section-header">
			<h2 class="section-title cloud-title">Latest News</h2>
			<p class="section-desc cloud-desc">
				Updates from the world of sustainability.
			</p>
		</div>
		<div class="news-grid">
			{#each news as item (item.id)}
				<article class="news-card">
					<div class="news-image">
						<iconify-icon icon="ri:article-line" width="48"
						></iconify-icon>
					</div>
					<div class="news-meta">{item.date}</div>
					<h3 class="news-title">{item.title}</h3>
					<p class="news-desc">{item.desc}</p>
					<a href="#" class="news-link">
						Read
						<iconify-icon icon="ri:arrow-right-line" width="16"
						></iconify-icon>
					</a>
				</article>
			{/each}
		</div>
	</CloudSection>
</div>

<!-- Mobile View (Scan History) -->
<div class="mobile-page">
	<div class="safe-area">
		<div class="header">
			<h1 class="page-title">Scan History</h1>
			<p class="subtitle">Your recent findings</p>
		</div>

		<div class="scroll-content">
			{#each scanHistory as item}
				<div class="history-item">
					<div class="history-icon">
						<iconify-icon icon="ri:barcode-box-line" width="24"
						></iconify-icon>
					</div>
					<div class="history-details">
						<h3 class="history-title">{item.name}</h3>
						<p class="history-time">{item.date}</p>
					</div>
					<div class="severity-badge {item.severity.toLowerCase()}">
						{item.severity}
					</div>
				</div>
			{/each}
		</div>
	</div>
</div>

<style>
	/* Hide mobile view on desktop, hide web view on mobile */
	.web-page {
		display: none;
	}
	.mobile-page {
		display: block;
	}

	@media (min-width: 768px) {
		.web-page {
			display: block;
		}
		.mobile-page {
			display: none;
		}
	}

	/* ===== WEB PAGE DESIGN ===== */
	.web-page {
		width: 100%;
		overflow-x: hidden;
		position: relative;
		z-index: 10;
	}

	/* Common Section Container */
	.section-container {
		background: #121212;
		padding: 40px;
		border-radius: 32px; /* ROUNDED STYLING */
		border: none;
		box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); /* Better shadow depth */
	}

	/* Hero Section */
	.hero {
		min-height: 100vh;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 80px;
		align-items: center;
		padding: 120px 60px;
		max-width: 1400px;
		margin: 0 auto;
		position: relative;
	}

	.hero-content {
		background: rgba(0, 0, 0, 0.4); /* Highly transparent black square */
		backdrop-filter: blur(8px); /* Subtle blur for readability */
		padding: 40px;
		border-radius: 32px; /* Rounded corners */
		border: 1px solid rgba(255, 255, 255, 0.05);
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
		max-width: 650px; /* Constrain width slightly */
	}

	.hero-badge {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		background: rgba(34, 197, 94, 0.1);
		color: #22c55e;
		padding: 8px 16px;
		border-radius: 50px;
		font-size: 14px;
		font-weight: 700;
		margin-bottom: 24px;
		border: 1px solid rgba(34, 197, 94, 0.2);
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	.hero-title {
		font-size: 80px;
		font-weight: 900;
		line-height: 1;
		color: white;
		margin: 0 0 32px 0;
		letter-spacing: -3px;
		/* Gradient Text for Aesthetics */
		background: linear-gradient(135deg, #ffffff 0%, #b3b3b3 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	.hero-desc {
		font-size: 20px;
		line-height: 1.6;
		color: #b3b3b3;
		margin: 0 0 40px 0;
		max-width: 540px;
		font-weight: 500;
	}

	.hero-actions {
		display: flex;
		gap: 16px;
	}

	.cta-primary {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 20px 48px;
		border-radius: 500px;
		font-size: 18px;
		font-weight: 800;
		cursor: pointer;
		transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy transition */
		border: none;
		background: #22c55e;
		color: #000000;
		text-transform: uppercase;
		letter-spacing: 1px;
		box-shadow: 0 10px 40px rgba(34, 197, 94, 0.3);
	}

	.cta-primary:hover {
		transform: scale(1.05) translateY(-2px);
		background-color: #16a34a;
		box-shadow: 0 20px 60px rgba(34, 197, 94, 0.5);
	}

	/* Visual & Earth */
	.hero-visual {
		position: relative;
		height: 500px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.visual-container {
		position: relative;
		width: 450px;
		height: 450px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: radial-gradient(
			circle,
			rgba(255, 255, 255, 0.05) 0%,
			rgba(0, 0, 0, 0) 60%
		);
		z-index: 5;
	}

	.hero-image {
		width: 380px;
		height: 380px;
		background: transparent;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #22c55e;
		/* No animation here, wrapper animates */
		position: relative;
		z-index: 2;
		overflow: hidden;
	}

	.product-icon-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.product-image-wrapper {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.product-image {
		width: 320px;
		height: 320px;
		object-fit: contain;
		filter: drop-shadow(0 10px 40px rgba(34, 197, 94, 0.3));
	}

	.orbit {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		z-index: 1;
		animation: spin 20s linear infinite;
	}

	.orbit-1 {
		width: 350px;
		height: 350px;
	}
	.orbit-2 {
		width: 500px;
		height: 500px;
		opacity: 0.3;
		animation-duration: 40s;
		animation-direction: reverse;
	}

	@keyframes spin {
		from {
			transform: translate(-50%, -50%) rotate(0deg);
		}
		to {
			transform: translate(-50%, -50%) rotate(360deg);
		}
	}

	/* Floating Cards */
	.floating-card {
		position: absolute;
		right: 0;
		bottom: 60px;
		background: rgba(0, 0, 0, 0.6); /* Transparent background */
		backdrop-filter: blur(8px);
		border: 1px solid rgba(255, 255, 255, 0.1);
		padding: 20px 24px;
		border-radius: 24px;
		min-width: 260px; /* Fixed width to prevent jumping */
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: flex-start; /* items align start */
		box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
		z-index: 10;
		animation: float 3s ease-in-out infinite;
	}

	@keyframes float {
		0%,
		100% {
			transform: translateY(0px);
		}
		50% {
			transform: translateY(-12px);
		}
	}

	.score-content {
		display: flex;
		align-items: center;
		gap: 16px;
		width: 100%;
	}

	@keyframes floatCards {
		0%,
		100% {
			transform: translateY(0px) rotate(0deg);
		}
		50% {
			transform: translateY(-15px) rotate(1deg);
		}
	}

	.card-label {
		font-size: 11px;
		color: #b3b3b3;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 1px;
	}
	.card-value {
		font-size: 24px;
		color: white;
		font-weight: 900;
	}

	.stats-content {
		position: relative;
		z-index: 2;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 40px;
		padding: 20px;
	}

	.stat-item {
		text-align: center;
	}

	.stat-value {
		font-size: 64px;
		font-weight: 900;
		color: #166534;
		margin-bottom: 8px;
		letter-spacing: -2px;
	}

	.stat-label {
		font-size: 16px;
		color: #111827; /* Darker black for readability on grey */
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	/* Features Cloud Section */
	.features-cloud {
		max-width: 1400px;
	}

	.cloud-features-inner {
		display: block;
	}

	.cloud-title {
		color: #000000 !important;
	}

	.section-title {
		color: #000000 !important;
	}

	.cloud-desc {
		color: #555555;
	}

	.features-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 24px;
		margin-top: 40px;
	}

	.feature-card {
		background: #a1a1aa; /* Darker than container #d4d4d8 */
		border: 1px solid rgba(0, 0, 0, 0.08);
		padding: 40px 32px;
		border-radius: 32px;
		transition: all 0.3s ease;
		text-align: center;
		box-shadow: none;
	}

	.feature-card:hover {
		transform: translateY(-8px);
		background: #b0b0b9;
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
		border-color: #166534;
	}

	.feature-icon {
		color: #15803d;
		margin-bottom: 24px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 64px;
		height: 64px;
		background: rgba(21, 128, 61, 0.15);
		border-radius: 50%; /* Circle icons */
	}

	.feature-title {
		color: #111827;
		font-size: 22px;
		margin-bottom: 12px;
		font-weight: 800;
	}

	.feature-desc {
		color: #4b5563;
		line-height: 1.6;
		font-size: 16px;
	}

	/* News Section */
	.news-section {
		padding: 60px;
		max-width: 1400px;
		margin: 0 auto 100px;
		position: relative;
		z-index: 10;
	}

	.news-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 32px;
		margin-top: 40px;
	}

	.news-card {
		background: #a1a1aa;
		border: 1px solid rgba(0, 0, 0, 0.08); /* Consistent with feature cards */
		padding: 24px;
		border-radius: 32px;
		transition: all 0.3s ease;
		box-shadow: none;
		display: flex;
		flex-direction: column;
	}

	.news-card:hover {
		transform: translateY(-8px);
		background: #b0b0b9;
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
		border-color: #166534;
	}

	.news-image {
		background: #f0fdf4;
		height: 200px;
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #166534;
		margin-bottom: 20px;
		overflow: hidden;
	}

	.news-meta {
		color: #166534;
		font-size: 12px;
		font-weight: 800;
		text-transform: uppercase;
		margin-bottom: 12px;
		letter-spacing: 1px;
	}

	.news-title {
		color: #1a1a1a;
		font-weight: 800;
		font-size: 24px;
		margin: 0 0 12px 0;
		line-height: 1.2;
	}
	.news-desc {
		color: #555555;
		flex-grow: 1;
		margin-bottom: 24px;
		line-height: 1.6;
		font-size: 16px;
	}

	.news-link {
		color: #166534;
		text-decoration: none;
		font-weight: 800;
		font-size: 14px;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		text-transform: uppercase;
		letter-spacing: 1px;
		background: rgba(255, 255, 255, 0.1);
		padding: 12px 24px;
		border-radius: 50px;
		width: fit-content;
		transition: all 0.2s ease;
	}

	.news-link:hover {
		background: white;
		color: black;
	}

	/* Section Headers */
	.section-header {
		text-align: left;
		margin-bottom: 40px;
		padding-left: 10px;
	}

	.section-title {
		color: white;
		margin: 0;
		font-size: 48px;
		font-weight: 900;
		letter-spacing: -2px;
	}

	/* Mobile Styles */
	.mobile-page {
		background: #000000;
		color: white;
		min-height: 100vh;
	}

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

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

	.page-title {
		font-size: 32px;
		font-weight: 700;
		margin: 0;
		letter-spacing: -1px;
	}

	.subtitle {
		color: #b3b3b3;
		font-size: 14px;
		font-weight: 600;
		margin: 4px 0 0 0;
	}

	.scroll-content {
		padding: 0 20px 140px 20px;
	}

	.history-item {
		display: flex;
		align-items: center;
		padding: 16px;
		background: #121212;
		border-radius: 8px;
		margin-bottom: 12px;
		gap: 16px;
	}

	.history-icon {
		width: 40px;
		height: 40px;
		background: #2a2a2a;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #b3b3b3;
	}

	.history-details {
		flex: 1;
	}

	.history-title {
		margin: 0;
		font-size: 16px;
		font-weight: 700;
		color: white;
	}

	.history-time {
		margin: 4px 0 0 0;
		font-size: 12px;
		color: #b3b3b3;
	}

	.severity-badge {
		padding: 4px 12px;
		border-radius: 50px;
		font-size: 11px;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.severity-badge.low {
		background: rgba(30, 215, 96, 0.2);
		color: #1ed760;
	}

	.severity-badge.medium {
		background: rgba(245, 155, 35, 0.2);
		color: #f59b23;
	}

	.severity-badge.high {
		background: rgba(233, 20, 41, 0.2);
		color: #e91429;
	}
</style>
