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

	const categories = ["All", "Food", "Fashion", "Tech", "Home"];
	let selectedCategory = $state("All");
	let searchQuery = $state("");

	const products = [
		{
			id: 1,
			name: "Eco-Water Bottle",
			brand: "PureLife",
			category: "Home",
			score: 92,
			grade: "A",
			image: "ri:cup-line",
			color: "#1ed760" // Spotify Green
		},
		{
			id: 2,
			name: "Fast Fashion Tee",
			brand: "TrendZ",
			category: "Fashion",
			score: 35,
			grade: "D",
			image: "ri:t-shirt-2-line",
			color: "#e91429" // Spotify Red (Error)
		},
		{
			id: 3,
			name: "Organic Coffee",
			brand: "BeanGreen",
			category: "Food",
			score: 88,
			grade: "B+",
			image: "ri:cup-fill",
			color: "#b49bc8" // Lavender
		},
		{
			id: 4,
			name: "Smartphone X",
			brand: "TechGiant",
			category: "Tech",
			score: 45,
			grade: "C",
			image: "ri:smartphone-line",
			color: "#f59b23" // Spotify Orange
		},
		{
			id: 5,
			name: "Bamboo Toothbrush",
			brand: "SmileEco",
			category: "Home",
			score: 98,
			grade: "A+",
			image: "ri:brush-line",
			color: "#1db954" // Slightly darker green
		},
		{
			id: 6,
			name: "Plastic Straws",
			brand: "SingleUse Inc",
			category: "Home",
			score: 12,
			grade: "F",
			image: "ri:forbid-2-line",
			color: "#e91429"
		}
	];

	let filteredProducts = $derived(
		products.filter(p => {
			const matchesCategory = selectedCategory === "All" || p.category === selectedCategory;
			const matchesSearch = p.name.toLowerCase().includes(searchQuery.toLowerCase()) || 
								  p.brand.toLowerCase().includes(searchQuery.toLowerCase());
			return matchesCategory && matchesSearch;
		})
	);
</script>

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

	<div class="content-container">
		<div class="header">
			<h1 class="page-title">Product Database</h1>
			<p class="subtitle">Search our verified sustainability ratings</p>
		</div>

		<!-- Search Bar -->
		<div class="search-container">
			<iconify-icon icon="ri:search-line" class="search-icon"></iconify-icon>
			<input 
				type="text" 
				class="search-input" 
				placeholder="Search for products, brands..." 
				bind:value={searchQuery}
			/>
		</div>

		<!-- Category Filter -->
		<div class="filter-bar">
			{#each categories as category}
				<button
					class="filter-chip"
					class:active={selectedCategory === category}
					on:click={() => selectedCategory = category}
				>
					{category}
				</button>
			{/each}
		</div>

		<!-- Product Grid -->
		<div class="product-grid">
			{#each filteredProducts as product}
				<div class="product-card">
					<div class="card-image-placeholder">
						<iconify-icon icon={product.image} width="64" style="color: {product.color};"></iconify-icon>
					</div>
					
					<div class="product-info">
						<h3 class="product-name">{product.name}</h3>
						<p class="product-brand">{product.brand}</p>
					</div>

					<div class="score-badge" style="background-color: {product.color};">
						<span class="score-text">{product.score}</span>
					</div>
				</div>
			{/each}
		</div>
	</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: 100px 24px 120px;
		max-width: 1200px;
		margin: 0 auto;
	}

	.header {
		text-align: left;
		margin-bottom: 32px;
		padding: 0 12px;
	}

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

	.subtitle {
		color: #b3b3b3;
		font-size: 16px;
		margin: 8px 0 0 0;
		font-weight: 500;
	}

	/* Search Bar */
	.search-container {
		position: relative;
		margin-bottom: 24px;
		padding: 0 12px;
	}

	.search-input {
		width: 100%;
		background: #2a2a2a;
		border: none;
		border-radius: 500px; /* Capsule */
		padding: 14px 48px;
		color: white;
		font-size: 16px;
		font-weight: 500;
		outline: none;
		transition: background 0.2s;
	}

	.search-input:focus {
		background: #333333;
		box-shadow: 0 0 0 2px white; /* Focus ring */
	}

	.search-input::placeholder {
		color: #b3b3b3;
	}

	.search-icon {
		position: absolute;
		left: 32px;
		top: 50%;
		transform: translateY(-50%);
		color: #b3b3b3;
		font-size: 20px;
		pointer-events: none;
	}

	/* Filters */
	.filter-bar {
		display: flex;
		gap: 12px;
		margin-bottom: 32px;
		flex-wrap: wrap;
		padding: 0 12px;
	}

	.filter-chip {
		background: #2a2a2a; /* Pill bg */
		color: white;
		border: none;
		padding: 8px 16px;
		border-radius: 500px;
		font-weight: 600;
		font-size: 14px;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.filter-chip:hover {
		background: #333333;
	}

	.filter-chip.active {
		background: #1ed760;
		color: #000000;
	}

	/* Grid */
	.product-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 24px;
		padding: 0 12px;
	}

	.product-card {
		background: #181818; /* Spotify Card */
		border-radius: 8px;
		padding: 16px;
		transition: background-color 0.3s ease;
		display: flex;
		flex-direction: column;
		cursor: pointer;
		position: relative;
	}

	.product-card:hover {
		background-color: #282828;
	}

	.card-image-placeholder {
		width: 100%;
		aspect-ratio: 1;
		background: #333333;
		border-radius: 4px; /* Slightly rounded images */
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16px;
		box-shadow: 0 8px 24px rgba(0,0,0,0.5);
	}

	.product-info {
		flex-grow: 1;
	}

	.product-name {
		color: white;
		font-size: 16px;
		font-weight: 700;
		margin: 0 0 4px 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.product-brand {
		color: #b3b3b3;
		font-size: 14px;
		margin: 0;
	}

	.score-badge {
		position: absolute;
		top: 24px;
		right: 24px;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 8px rgba(0,0,0,0.3);
	}

	.score-text {
		color: #000000;
		font-weight: 900;
		font-size: 12px;
	}

	@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;
		}
	}
</style>
