<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ product.name }} | Seed Vault</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;600&display=swap');
h1, h2, h3 { font-family: 'Playfair Display', serif; }
body { font-family: 'Inter', sans-serif; }
</style>
</head>
<body class="bg-stone-50 text-stone-800">
<!-- Navigation -->
<nav class="bg-white border-b border-stone-200 sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16 items-center">
<div class="flex items-center">
<a href="/" class="text-2xl font-bold text-emerald-800 flex items-center gap-2">
<i data-lucide="sprout"></i>
<span class="hidden sm:inline">Seed Vault</span>
</a>
</div>
<div class="flex items-center gap-4">
<button class="p-2 text-stone-600 hover:text-emerald-700 md:hidden">
<i data-lucide="search"></i>
</button>
<a href="/cart" class="p-2 text-stone-600 hover:text-emerald-700 relative">
<i data-lucide="shopping-cart"></i>
<span id="cart-count-badge" class="absolute top-0 right-0 bg-emerald-600 text-white text-[10px] rounded-full h-4 w-4 flex items-center justify-center">{{ cart_count }}</span>
</a>
</div>
</div>
</div>
</nav>
<!-- Toast Notification -->
<div id="toast" class="fixed bottom-5 right-5 bg-emerald-800 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-[100] flex items-center gap-3">
<i data-lucide="check-circle" class="w-5 h-5 text-emerald-400"></i>
<span id="toast-message">Added to cart!</span>
</div>
<!-- Product Detail Section -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<!-- Image -->
<div class="aspect-square rounded-2xl overflow-hidden shadow-lg bg-stone-200">
<img src="{{ product.image }}" alt="{{ product.name }}" class="w-full h-full object-cover">
</div>
<!-- Info -->
<div class="flex flex-col justify-center">
<nav class="flex mb-4 text-sm text-stone-500" aria-label="Breadcrumb">
<ol class="flex items-center space-x-2">
<li><a href="/" class="hover:text-emerald-700">Shop</a></li>
<li><i data-lucide="chevron-right" class="w-4 h-4"></i></li>
<li><a href="#" class="hover:text-emerald-700">{{ product.category }}</a></li>
</ol>
</nav>
<span class="text-emerald-600 font-semibold uppercase tracking-widest text-sm">{{ product.category }}</span>
<h1 class="text-4xl md:text-5xl font-bold text-stone-900 mt-2 mb-4">{{ product.name }}</h1>
<p class="text-3xl font-bold text-stone-900 mb-6">${{ "%.2f"|format(product.price) }}</p>
<div class="prose prose-stone mb-8">
<p class="text-lg text-stone-600 leading-relaxed">{{ product.description }}</p>
</div>
<div class="space-y-4">
<div class="flex items-center gap-4">
<div class="flex items-center border border-stone-300 rounded-lg">
<button class="px-4 py-2 text-stone-600 hover:bg-stone-100">-</button>
<span class="px-4 py-2 font-semibold">1</span>
<button class="px-4 py-2 text-stone-600 hover:bg-stone-100">+</button>
</div>
<button onclick="addToCart({{ product.id }})" class="flex-1 bg-emerald-700 hover:bg-emerald-800 text-white font-bold py-3 px-8 rounded-lg transition flex items-center justify-center gap-2">
<i data-lucide="shopping-basket" class="w-5 h-5"></i>
Add to Cart
</button>
</div>
<button class="w-full border border-stone-300 hover:bg-stone-100 text-stone-700 font-semibold py-3 px-8 rounded-lg transition">
Add to Wishlist
</button>
</div>
<div class="mt-12 pt-8 border-t border-stone-200">
<div class="grid grid-cols-2 gap-4 text-sm text-stone-500">
<div class="flex items-center gap-2">
<i data-lucide="truck" class="w-4 h-4"></i>
<span>Fast Shipping</span>
</div>
<div class="flex items-center gap-2">
<i data-lucide="shield-check" class="w-4 h-4"></i>
<span>Organic Certified</span>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-stone-900 text-stone-400 py-12 mt-24">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="flex justify-center items-center gap-2 text-white text-xl font-bold mb-6">
<i data-lucide="sprout"></i>
<span>Seed Vault</span>
</div>
<p class="mb-6">Nurturing food sovereignty, one seed at a time.</p>
<div class="flex justify-center space-x-6 mb-8">
<a href="#" class="hover:text-white transition">Instagram</a>
<a href="#" class="hover:text-white transition">Newsletter</a>
<a href="#" class="hover:text-white transition">Contact</a>
</div>
<div class="border-t border-stone-800 pt-8 text-sm">
© 2026 The Artisanal Seed Vault. All rights reserved.
</div>
</div>
</footer>
<script>
lucide.createIcons();
async function addToCart(productId) {
try {
const response = await fetch(`/cart/add/${productId}`, { method: 'POST' });
const data = await response.json();
if (data.status === 'success') {
const badge = document.getElementById('cart-count-badge');
if (badge) badge.innerText = data.cart_count;
showToast('Added to cart!');
}
} catch (error) {
console.error('Error adding to cart:', error);
}
}
function showToast(message) {
const toast = document.getElementById('toast');
const toastMsg = document.getElementById('toast-message');
toastMsg.innerText = message;
toast.classList.remove('translate-y-20', 'opacity-0');
toast.classList.add('translate-y-0', 'opacity-100');
setTimeout(() => {
toast.classList.add('translate-y-20', 'opacity-0');
toast.classList.remove('translate-y-0', 'opacity-100');
}, 3000);
}
</script>
</body>
</html>