import React, { useState } from 'react';

import { Wallet, Coins, Gift, Lock, Star, ShoppingCart, Users, TrendingUp, Award, Zap, Crown, Shield, Leaf, Flame, Dice1 } from 'lucide-react';

const HempTokenCBDPlatform = () => {
const [walletConnected, setWalletConnected] = useState(false);
const [algorandAddress, setAlgorandAddress] = useState('');
const [hempTokenBalance, setHempTokenBalance] = useState(0);
const [weedTokenBalance, setWeedTokenBalance] = useState(0);
const [algoBalance, setAlgoBalance] = useState(0);
const [usdcBalance, setUsdcBalance] = useState(0);
const [stakedTokens, setStakedTokens] = useState(500000);
const [activeTab, setActiveTab] = useState('dashboard');
const [stakingAmount, setStakingAmount] = useState('');
const [isSpinning, setIsSpinning] = useState(false);
const [spinResult, setSpinResult] = useState(null);

// Algorand ASA Information
const HEMP_ASA_ID = 2675148574;
const WEED_ASA_ID = 2676316280;
const VAULT_ADDRESS = '420vault.algo';

// Mock Algorand wallet connection
const connectAlgoWallet = async () => {
try {
const mockAddress = 'HEMP7X4A3QZXKJYB2NWVF8H5M9GTCR6PLQS1EUDKA8YW3V2TZRI4BJLM6A';
setAlgorandAddress(mockAddress);
setWalletConnected(true);
setHempTokenBalance(12500000);
setWeedTokenBalance(2500);
setAlgoBalance(150);
setUsdcBalance(1250);
} catch (error) {
console.error('Wallet connection failed:', error);
}
};

const disconnectWallet = () => {
setWalletConnected(false);
setAlgorandAddress('');
setHempTokenBalance(0);
setWeedTokenBalance(0);
};

// Calculate staking tier based on staked amount
const calculateStakingTier = (stakedAmount) => {
if (stakedAmount >= 1000000) return { name: 'Gold', discount: 50, apy: 10, shipping: 'Priority', color: 'from-yellow-400 to-yellow-600' };
if (stakedAmount >= 500000) return { name: 'Silver', discount: 30, apy: 5, shipping: 'Faster', color: 'from-gray-300 to-gray-500' };
if (stakedAmount >= 100000) return { name: 'Bronze', discount: 20, apy: 3, shipping: 'Faster', color: 'from-orange-400 to-orange-600' };
return { name: 'None', discount: 0, apy: 0, shipping: 'Standard', color: 'from-gray-600 to-gray-700' };
};

const currentStakingTier = calculateStakingTier(stakedTokens);

// CBD Gold 510 ceramic vapes
const cbdVapes = [
{
id: 1,
name: 'Northern Lights CBD',
strain: 'Northern Lights',
type: 'Indica-dominant',
flavor: 'Sweet Pine & Earth',
effects: 'Deeply Relaxing',
priceAlgo: 15,
priceUsdc: 45.99,
hempEarned: 90000,
potency: '66.6% CBD',
terpenes: ['Myrcene', 'Pinene', 'Caryophyllene'],
color: 'from-purple-500 to-indigo-600',
emoji: '🌌'
},
{
id: 2,
name: 'Sour Diesel CBD',
strain: 'Sour Diesel',
type: 'Sativa-dominant',
flavor: 'Citrus Fuel & Herbs',
effects: 'Energizing Focus',
priceAlgo: 16,
priceUsdc: 47.99,
hempEarned: 95000,
potency: '66.6% CBD',
terpenes: ['Limonene', 'Caryophyllene', 'Myrcene'],
color: 'from-yellow-500 to-orange-600',
emoji: '⚡'
},
{
id: 3,
name: 'OG Kush CBD',
strain: 'OG Kush',
type: 'Hybrid',
flavor: 'Earthy Lemon Pine',
effects: 'Balanced Euphoria',
priceAlgo: 17,
priceUsdc: 49.99,
hempEarned: 100000,
potency: '66.6% CBD',
terpenes: ['Myrcene', 'Limonene', 'Caryophyllene'],
color: 'from-green-500 to-emerald-600',
emoji: '👑'
}
];

// Staking pools
const stakingPools = [
{
id: 1,
name: 'Bronze Tier',
minStake: 100000,
discount: 20,
apy: 3,
shipping: 'Faster',
benefits: ['20% off CBD Gold Vapes', 'Faster shipping', 'Community access'],
color: 'from-orange-400 to-orange-600'
},
{
id: 2,
name: 'Silver Tier',
minStake: 500000,
discount: 30,
apy: 5,
shipping: 'Faster',
benefits: ['30% off CBD Gold Vapes', 'Faster shipping', 'Exclusive strains', 'New releases'],
color: 'from-gray-300 to-gray-500'
},
{
id: 3,
name: 'Gold Tier',
minStake: 1000000,
discount: 50,
apy: 10,
shipping: 'Priority',
benefits: ['50% off CBD Gold Vapes', 'Priority shipping', 'VIP event tickets', 'All exclusive access'],
color: 'from-yellow-400 to-yellow-600'
}
];

// Governance proposals
const governanceProposals = [
{
id: 1,
title: 'New Strain: Zkittlez CBD',
description: 'Vote to add Zkittlez-inspired terpene profile with 66.6% CBD potency',
votingPower: Math.floor(weedTokenBalance / 0.001),
status: 'Active',
timeLeft: '5 days',
weedRequired: 1
},
{
id: 2,
title: 'Limited Edition: 24K Gold Hardware',
description: 'Propose gold-plated ceramic tips for premium tier members',
votingPower: Math.floor(weedTokenBalance / 0.001),
status: 'Active',
timeLeft: '12 days',
weedRequired: 2.5
}
];

// Slot machine game
const spinForGold = async (vape) => {
if (isSpinning) return;

setIsSpinning(true);
setSpinResult(null);

setTimeout(() => {
const outcomes = [
{ type: 'hemp', amount: 50000, probability: 0.4 },
{ type: 'hemp', amount: 100000, probability: 0.25 },
{ type: 'hemp', amount: 200000, probability: 0.15 },
{ type: 'discount', amount: 10, probability: 0.1 },
{ type: 'discount', amount: 25, probability: 0.05 },
{ type: 'jackpot', amount: 1000000, probability: 0.05 }
];

const random = Math.random();
let cumulative = 0;

for (let outcome of outcomes) {
cumulative += outcome.probability;
if (random <= cumulative) {
if (outcome.type === 'hemp' || outcome.type === 'jackpot') {
setHempTokenBalance(prev => prev + outcome.amount);
}
setSpinResult(outcome);
break;
}
}

setIsSpinning(false);
}, 3000);
};

const purchaseWithAlgo = (vape) => {
const discountedPrice = vape.priceAlgo * (1 - currentStakingTier.discount / 100);

if (algoBalance >= discountedPrice) {
setAlgoBalance(prev => prev - discountedPrice);
setHempTokenBalance(prev => prev + vape.hempEarned);

alert(`Purchased ${vape.name} with ALGO!\n\nCost: ${discountedPrice.toFixed(2)} ALGO (${currentStakingTier.discount}% ${currentStakingTier.name} discount)\nEarned: ${vape.hempEarned.toLocaleString()} HEMP\nLP Contribution: ALGO/HEMP pool\nShipping: ${currentStakingTier.shipping}`);
} else {
alert(`Insufficient ALGO! Need ${discountedPrice.toFixed(2)} ALGO`);
}
};

const purchaseWithUsdc = (vape) => {
const discountedPrice = vape.priceUsdc * (1 - currentStakingTier.discount / 100);

if (usdcBalance >= discountedPrice) {
setUsdcBalance(prev => prev - discountedPrice);
setHempTokenBalance(prev => prev + vape.hempEarned);

alert(`Purchased ${vape.name} with USDC!\n\nCost: $${discountedPrice.toFixed(2)} USDC (${currentStakingTier.discount}% ${currentStakingTier.name} discount)\nEarned: ${vape.hempEarned.toLocaleString()} HEMP\nLP Contribution: USDC/HEMP pool\nWEED tokens purchased for ${VAULT_ADDRESS}\nShipping: ${currentStakingTier.shipping}`);
} else {
alert(`Insufficient USDC! Need $${discountedPrice.toFixed(2)} USDC`);
}
};

const stakeTokens = async (pool) => {
const amount = parseInt(stakingAmount);

if (amount && amount <= hempTokenBalance && amount >= pool.minStake) {
setHempTokenBalance(prev => prev - amount);
setStakedTokens(prev => prev + amount);
setStakingAmount('');

alert(`Successfully staked ${amount.toLocaleString()} HEMP tokens!\n\nTier: ${pool.name}\nDiscount: ${pool.discount}% off CBD Gold Vapes\nAPY: ${pool.apy}% HEMP\nShipping: ${pool.shipping}\nBenefits unlocked: ${pool.benefits.join(', ')}`);
} else {
alert('Invalid staking amount or insufficient balance!');
}
};

const TabButton = ({ id, label, icon: Icon, active, onClick }) => (
<button
onClick={onClick}
className={`flex items-center space-x-2 px-6 py-3 rounded-lg font-semibold transition-all duration-300 ${
active
? 'bg-gradient-to-r from-green-400 to-green-600 text-black shadow-lg transform scale-105'
: 'bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white'
}`}
>
<Icon size={20} />
<span>{label}</span>
</button>
);

const GlassCard = ({ children, className = '' }) => (
<div className={`bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 shadow-2xl ${className}`}>
{children}
</div>
);

const renderDashboard = () => (
<div className="space-y-8">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<GlassCard className="p-6">
<div className="flex items-center justify-between mb-4">
<h3 className="text-xl font-bold text-white flex items-center">
<Leaf className="mr-2 text-green-400" />
Multi-Token Wallet
</h3>
<button onClick={disconnectWallet} className="text-sm text-red-400 hover:text-red-300">
Disconnect
</button>
</div>
<div className="bg-black/30 rounded-lg p-4 space-y-3">
<div>
<p className="text-sm text-gray-300">Algorand Address:</p>
<p className="font-mono text-xs text-green-400 break-all">{algorandAddress}</p>
</div>
<div className="grid grid-cols-2 gap-4 text-sm">
<div>
<p className="text-gray-300">HEMP:</p>
<p className="text-green-400 font-bold">{hempTokenBalance.toLocaleString()}</p>
<p className="text-xs text-gray-500">ASA: {HEMP_ASA_ID}</p>
</div>
<div>
<p className="text-gray-300">WEED:</p>
<p className="text-purple-400 font-bold">{weedTokenBalance.toL

README.md

@@ -1,10 +1,12 @@
 ---
-title: Cbdgold
-emoji: 🐨
-colorFrom: pink
-colorTo: indigo
+title: cbdgold
+emoji: 🐳
+colorFrom: purple
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,983 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HEMP Token Platform</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <style>
+        body {
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            color: white;
+            min-height: 100vh;
+        }
+        .glass-card {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+        }
+        .gradient-text {
+            background-clip: text;
+            -webkit-background-clip: text;
+            color: transparent;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .spinning {
+            animation: spin 1s linear infinite;
+        }
+    </style>
+</head>
+<body class="font-sans">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="flex justify-between items-center mb-8">
+            <div class="flex items-center">
+                <div class="w-10 h-10 bg-gradient-to-r from-green-400 to-green-600 rounded-full flex items-center justify-center mr-3">
+                    <i data-feather="leaf" class="text-white"></i>
+                </div>
+                <h1 class="text-2xl font-bold">CBD Gold Ecosystem</h1>
+            </div>
+            <button id="connectWalletBtn" class="bg-gradient-to-r from-green-400 to-green-600 px-6 py-2 rounded-full font-semibold hover:from-green-500 hover:to-green-700 transition-all">
+                Connect Wallet
+            </button>
+        </header>
+
+        <!-- Wallet Modal -->
+        <div id="walletModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+            <div class="glass-card rounded-2xl p-6 max-w-md w-full" data-aos="zoom-in">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-xl font-bold">Wallet Connected</h3>
+                    <button id="closeModalBtn" class="text-gray-400 hover:text-white">
+                        <i data-feather="x"></i>
+                    </button>
+                </div>
+                <div class="bg-black bg-opacity-30 rounded-lg p-4 mb-4">
+                    <p class="text-sm text-gray-300 mb-1">Algorand Address:</p>
+                    <p id="walletAddress" class="font-mono text-xs text-green-400 break-all">HEMP7X4A3QZXKJYB2NWVF8H5M9GTCR6PLQS1EUDKA8YW3V2TZRI4BJLM6A</p>
+                </div>
+                <div class="grid grid-cols-2 gap-4 text-sm mb-4">
+                    <div>
+                        <p class="text-gray-300">HEMP:</p>
+                        <p class="text-green-400 font-bold">12,500,000</p>
+                        <p class="text-xs text-gray-500">ASA: 2675148574</p>
+                    </div>
+                    <div>
+                        <p class="text-gray-300">WEED:</p>
+                        <p class="text-purple-400 font-bold">2,500</p>
+                        <p class="text-xs text-gray-500">ASA: 2676316280</p>
+                    </div>
+                    <div>
+                        <p class="text-gray-300">ALGO:</p>
+                        <p class="text-blue-400 font-bold">150.00</p>
+                    </div>
+                    <div>
+                        <p class="text-gray-300">USDC:</p>
+                        <p class="text-yellow-400 font-bold">$1,250.00</p>
+                    </div>
+                </div>
+                <button id="disconnectWalletBtn" class="w-full bg-gradient-to-r from-red-500 to-red-600 py-2 rounded-lg font-semibold hover:from-red-600 hover:to-red-700 transition-all">
+                    Disconnect Wallet
+                </button>
+            </div>
+        </div>
+
+        <!-- Navigation Tabs -->
+        <div class="flex flex-wrap gap-2 mb-8">
+            <button data-tab="dashboard" class="tab-btn active flex items-center space-x-2 px-6 py-3 rounded-lg font-semibold bg-gradient-to-r from-green-400 to-green-600 text-black shadow-lg transform scale-105">
+                <i data-feather="home"></i>
+                <span>Dashboard</span>
+            </button>
+            <button data-tab="vapes" class="tab-btn flex items-center space-x-2 px-6 py-3 rounded-lg font-semibold bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white">
+                <i data-feather="shopping-bag"></i>
+                <span>CBD Vapes</span>
+            </button>
+            <button data-tab="staking" class="tab-btn flex items-center space-x-2 px-6 py-3 rounded-lg font-semibold bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white">
+                <i data-feather="lock"></i>
+                <span>Staking</span>
+            </button>
+            <button data-tab="governance" class="tab-btn flex items-center space-x-2 px-6 py-3 rounded-lg font-semibold bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white">
+                <i data-feather="users"></i>
+                <span>Governance</span>
+            </button>
+        </div>
+
+        <!-- Content Sections -->
+        <div id="contentSections">
+            <!-- Dashboard Section -->
+            <div id="dashboardSection" class="space-y-8">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div class="glass-card rounded-2xl p-6">
+                        <div class="flex items-center justify-between mb-4">
+                            <h3 class="text-xl font-bold text-white flex items-center">
+                                <i data-feather="leaf" class="mr-2 text-green-400"></i>
+                                Multi-Token Wallet
+                            </h3>
+                            <button id="disconnectBtn" class="text-sm text-red-400 hover:text-red-300 hidden">
+                                Disconnect
+                            </button>
+                        </div>
+                        <div class="bg-black bg-opacity-30 rounded-lg p-4 space-y-3">
+                            <div>
+                                <p class="text-sm text-gray-300">Algorand Address:</p>
+                                <p id="addressDisplay" class="font-mono text-xs text-green-400 break-all"></p>
+                            </div>
+                            <div class="grid grid-cols-2 gap-4 text-sm">
+                                <div>
+                                    <p class="text-gray-300">HEMP:</p>
+                                    <p id="hempBalance" class="text-green-400 font-bold">0</p>
+                                    <p class="text-xs text-gray-500">ASA: 2675148574</p>
+                                </div>
+                                <div>
+                                    <p class="text-gray-300">WEED:</p>
+                                    <p id="weedBalance" class="text-purple-400 font-bold">0</p>
+                                    <p class="text-xs text-gray-500">ASA: 2676316280</p>
+                                </div>
+                                <div>
+                                    <p class="text-gray-300">ALGO:</p>
+                                    <p id="algoBalance" class="text-blue-400 font-bold">0.00</p>
+                                </div>
+                                <div>
+                                    <p class="text-gray-300">USDC:</p>
+                                    <p id="usdcBalance" class="text-yellow-400 font-bold">$0.00</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="glass-card rounded-2xl p-6">
+                        <div class="flex items-center justify-between mb-4">
+                            <h3 class="text-xl font-bold text-white flex items-center">
+                                <i data-feather="award" class="mr-2 text-orange-400"></i>
+                                Staking Tier Status
+                            </h3>
+                        </div>
+                        <div id="tierDisplay" class="bg-gradient-to-r from-gray-600 to-gray-700 rounded-lg p-4 mb-3">
+                            <div class="flex items-center justify-between">
+                                <div>
+                                    <p class="text-black font-bold text-lg">None Tier</p>
+                                    <p class="text-black/80 text-sm">0% Off • 0% APY</p>
+                                </div>
+                                <i data-feather="award" class="text-black"></i>
+                            </div>
+                        </div>
+                        <div class="text-sm space-y-1">
+                            <div class="flex justify-between">
+                                <span class="text-gray-300">Staked HEMP:</span>
+                                <span id="stakedBalance" class="text-green-400">0</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="text-gray-300">Shipping:</span>
+                                <span id="shippingStatus" class="text-blue-400">Standard</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="text-gray-300">Voting Power:</span>
+                                <span id="votingPower" class="text-purple-400">0</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
+                    <div class="glass-card rounded-2xl p-6">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="text-gray-300 text-sm">Available HEMP</p>
+                                <p id="availableHemp" class="text-3xl font-bold text-green-400">0</p>
+                                <p class="text-xs text-gray-400">Ready to spend</p>
+                            </div>
+                            <i data-feather="leaf" class="text-green-400"></i>
+                        </div>
+                    </div>
+
+                    <div class="glass-card rounded-2xl p-6">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="text-gray-300 text-sm">Staked HEMP</p>
+                                <p id="stakedHemp" class="text-3xl font-bold text-blue-400">0</p>
+                                <p id="apyDisplay" class="text-xs text-gray-400">Earning 0% APY</p>
+                            </div>
+                            <i data-feather="lock" class="text-blue-400"></i>
+                        </div>
+                    </div>
+
+                    <div class="glass-card rounded-2xl p-6">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="text-gray-300 text-sm">WEED Governance</p>
+                                <p id="weedGov" class="text-3xl font-bold text-purple-400">0</p>
+                                <p id="votesDisplay" class="text-xs text-gray-400">0 votes</p>
+                            </div>
+                            <i data-feather="users" class="text-purple-400"></i>
+                        </div>
+                    </div>
+
+                    <div class="glass-card rounded-2xl p-6">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="text-gray-300 text-sm">LP Contributions</p>
+                                <p class="text-3xl font-bold text-yellow-400">0</p>
+                                <p class="text-xs text-gray-400">ALGO & USDC pools</p>
+                            </div>
+                            <i data-feather="trending-up" class="text-yellow-400"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Vapes Section (hidden by default) -->
+            <div id="vapesSection" class="space-y-8 hidden">
+                <div class="text-center">
+                    <h2 class="text-3xl font-bold text-white mb-2">CBD Gold 510 Ceramic Vapes</h2>
+                    <p class="text-gray-300">Premium CBD 510 ceramic vapes with 66.6% CBD potency</p>
+                    <div class="flex justify-center items-center space-x-4 mt-4">
+                        <div id="currentTierBadge" class="px-4 py-2 rounded-lg bg-gradient-to-r from-gray-600 to-gray-700">
+                            <span class="text-white font-semibold">None Tier - 0% Off All Vapes</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="spinResult" class="glass-card rounded-2xl p-6 text-center hidden">
+                    <h3 class="text-xl font-bold text-white mb-4">🎰 Spin Result - Verified on Algorand!</h3>
+                    <div class="bg-black bg-opacity-30 rounded-lg p-4">
+                        <p id="spinResultText" class="font-bold"></p>
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <!-- Vape cards will be inserted here by JavaScript -->
+                </div>
+            </div>
+
+            <!-- Staking Section (hidden by default) -->
+            <div id="stakingSection" class="space-y-8 hidden">
+                <div class="text-center">
+                    <h2 class="text-3xl font-bold text-white mb-2">HEMP Token Staking Tiers</h2>
+                    <p class="text-gray-300">Stake HEMP tokens to unlock tiered discounts and exclusive benefits</p>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <!-- Staking pools will be inserted here by JavaScript -->
+                </div>
+            </div>
+
+            <!-- Governance Section (hidden by default) -->
+            <div id="governanceSection" class="space-y-8 hidden">
+                <div class="text-center">
+                    <h2 class="text-3xl font-bold text-white mb-2">WEED Governance</h2>
+                    <p class="text-gray-300">Participate in platform governance with your WEED tokens</p>
+                </div>
+
+                <div class="glass-card rounded-2xl p-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <h3 class="text-xl font-bold text-white flex items-center">
+                            <i data-feather="users" class="mr-2 text-purple-400"></i>
+                            Active Proposals
+                        </h3>
+                        <span id="votingPowerDisplay" class="text-sm text-purple-400">Voting Power: 0</span>
+                    </div>
+
+                    <div class="space-y-4">
+                        <!-- Proposals will be inserted here by JavaScript -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Initialize AOS animations
+        AOS.init({
+            duration: 800,
+            easing: 'ease-in-out',
+            once: true
+        });
+
+        // Initialize Feather Icons
+        feather.replace();
+
+        // App State
+        const state = {
+            walletConnected: false,
+            algorandAddress: '',
+            hempTokenBalance: 0,
+            weedTokenBalance: 0,
+            algoBalance: 0,
+            usdcBalance: 0,
+            stakedTokens: 0,
+            activeTab: 'dashboard',
+            stakingAmount: '',
+            isSpinning: false,
+            spinResult: null,
+            HEMP_ASA_ID: 2675148574,
+            WEED_ASA_ID: 2676316280,
+            VAULT_ADDRESS: '420vault.algo'
+        };
+
+        // CBD Vapes Data
+        const cbdVapes = [
+            {
+                id: 1,
+                name: 'Northern Lights CBD',
+                strain: 'Northern Lights',
+                type: 'Indica-dominant',
+                flavor: 'Sweet Pine & Earth',
+                effects: 'Deeply Relaxing',
+                priceAlgo: 15,
+                priceUsdc: 45.99,
+                hempEarned: 90000,
+                potency: '66.6% CBD',
+                terpenes: ['Myrcene', 'Pinene', 'Caryophyllene'],
+                color: 'from-purple-500 to-indigo-600',
+                emoji: '🌌'
+            },
+            {
+                id: 2,
+                name: 'Sour Diesel CBD',
+                strain: 'Sour Diesel',
+                type: 'Sativa-dominant',
+                flavor: 'Citrus Fuel & Herbs',
+                effects: 'Energizing Focus',
+                priceAlgo: 16,
+                priceUsdc: 47.99,
+                hempEarned: 95000,
+                potency: '66.6% CBD',
+                terpenes: ['Limonene', 'Caryophyllene', 'Myrcene'],
+                color: 'from-yellow-500 to-orange-600',
+                emoji: '⚡'
+            },
+            {
+                id: 3,
+                name: 'OG Kush CBD',
+                strain: 'OG Kush',
+                type: 'Hybrid',
+                flavor: 'Earthy Lemon Pine',
+                effects: 'Balanced Euphoria',
+                priceAlgo: 17,
+                priceUsdc: 49.99,
+                hempEarned: 100000,
+                potency: '66.6% CBD',
+                terpenes: ['Myrcene', 'Limonene', 'Caryophyllene'],
+                color: 'from-green-500 to-emerald-600',
+                emoji: '👑'
+            }
+        ];
+
+        // Staking Pools Data
+        const stakingPools = [
+            {
+                id: 1,
+                name: 'Bronze Tier',
+                minStake: 100000,
+                discount: 20,
+                apy: 3,
+                shipping: 'Faster',
+                benefits: ['20% off CBD Gold Vapes', 'Faster shipping', 'Community access'],
+                color: 'from-orange-400 to-orange-600'
+            },
+            {
+                id: 2,
+                name: 'Silver Tier',
+                minStake: 500000,
+                discount: 30,
+                apy: 5,
+                shipping: 'Faster',
+                benefits: ['30% off CBD Gold Vapes', 'Faster shipping', 'Exclusive strains', 'New releases'],
+                color: 'from-gray-300 to-gray-500'
+            },
+            {
+                id: 3,
+                name: 'Gold Tier',
+                minStake: 1000000,
+                discount: 50,
+                apy: 10,
+                shipping: 'Priority',
+                benefits: ['50% off CBD Gold Vapes', 'Priority shipping', 'VIP event tickets', 'All exclusive access'],
+                color: 'from-yellow-400 to-yellow-600'
+            }
+        ];
+
+        // Governance Proposals Data
+        const governanceProposals = [
+            {
+                id: 1,
+                title: 'New Strain: Zkittlez CBD',
+                description: 'Vote to add Zkittlez-inspired terpene profile with 66.6% CBD potency',
+                status: 'Active',
+                timeLeft: '5 days',
+                weedRequired: 1
+            },
+            {
+                id: 2,
+                title: 'Limited Edition: 24K Gold Hardware',
+                description: 'Propose gold-plated ceramic tips for premium tier members',
+                status: 'Active',
+                timeLeft: '12 days',
+                weedRequired: 2.5
+            }
+        ];
+
+        // DOM Elements
+        const connectWalletBtn = document.getElementById('connectWalletBtn');
+        const disconnectWalletBtn = document.getElementById('disconnectWalletBtn');
+        const disconnectBtn = document.getElementById('disconnectBtn');
+        const walletModal = document.getElementById('walletModal');
+        const closeModalBtn = document.getElementById('closeModalBtn');
+        const addressDisplay = document.getElementById('addressDisplay');
+        const walletAddress = document.getElementById('walletAddress');
+        const hempBalance = document.getElementById('hempBalance');
+        const weedBalance = document.getElementById('weedBalance');
+        const algoBalance = document.getElementById('algoBalance');
+        const usdcBalance = document.getElementById('usdcBalance');
+        const tierDisplay = document.getElementById('tierDisplay');
+        const stakedBalance = document.getElementById('stakedBalance');
+        const shippingStatus = document.getElementById('shippingStatus');
+        const votingPower = document.getElementById('votingPower');
+        const availableHemp = document.getElementById('availableHemp');
+        const stakedHemp = document.getElementById('stakedHemp');
+        const apyDisplay = document.getElementById('apyDisplay');
+        const weedGov = document.getElementById('weedGov');
+        const votesDisplay = document.getElementById('votesDisplay');
+        const currentTierBadge = document.getElementById('currentTierBadge');
+        const spinResult = document.getElementById('spinResult');
+        const spinResultText = document.getElementById('spinResultText');
+        const votingPowerDisplay = document.getElementById('votingPowerDisplay');
+        const tabButtons = document.querySelectorAll('.tab-btn');
+        const contentSections = document.getElementById('contentSections');
+        const dashboardSection = document.getElementById('dashboardSection');
+        const vapesSection = document.getElementById('vapesSection');
+        const stakingSection = document.getElementById('stakingSection');
+        const governanceSection = document.getElementById('governanceSection');
+        const vapesContainer = document.querySelector('#vapesSection > div:last-child');
+        const stakingContainer = document.querySelector('#stakingSection > div:last-child');
+        const governanceContainer = document.querySelector('#governanceSection > div:last-child > div:last-child');
+
+        // Helper Functions
+        function formatNumber(num) {
+            return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        }
+
+        function calculateStakingTier(stakedAmount) {
+            if (stakedAmount >= 1000000) return { 
+                name: 'Gold', 
+                discount: 50, 
+                apy: 10, 
+                shipping: 'Priority', 
+                color: 'from-yellow-400 to-yellow-600' 
+            };
+            if (stakedAmount >= 500000) return { 
+                name: 'Silver', 
+                discount: 30, 
+                apy: 5, 
+                shipping: 'Faster', 
+                color: 'from-gray-300 to-gray-500' 
+            };
+            if (stakedAmount >= 100000) return { 
+                name: 'Bronze', 
+                discount: 20, 
+                apy: 3, 
+                shipping: 'Faster', 
+                color: 'from-orange-400 to-orange-600' 
+            };
+            return { 
+                name: 'None', 
+                discount: 0, 
+                apy: 0, 
+                shipping: 'Standard', 
+                color: 'from-gray-600 to-gray-700' 
+            };
+        }
+
+        function updateUI() {
+            const currentStakingTier = calculateStakingTier(state.stakedTokens);
+            
+            // Update dashboard
+            addressDisplay.textContent = state.algorandAddress || 'Not connected';
+            walletAddress.textContent = state.algorandAddress || 'Not connected';
+            hempBalance.textContent = formatNumber(state.hempTokenBalance);
+            weedBalance.textContent = formatNumber(state.weedTokenBalance);
+            algoBalance.textContent = state.algoBalance.toFixed(2);
+            usdcBalance.textContent = `$${state.usdcBalance.toFixed(2)}`;
+            
+            // Update tier display
+            tierDisplay.className = `bg-gradient-to-r ${currentStakingTier.color} rounded-lg p-4 mb-3`;
+            tierDisplay.innerHTML = `
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p class="text-black font-bold text-lg">${currentStakingTier.name} Tier</p>
+                        <p class="text-black/80 text-sm">${currentStakingTier.discount}% Off • ${currentStakingTier.apy}% APY</p>
+                    </div>
+                    <i data-feather="award" class="text-black"></i>
+                </div>
+            `;
+            
+            stakedBalance.textContent = formatNumber(state.stakedTokens);
+            shippingStatus.textContent = currentStakingTier.shipping;
+            votingPower.textContent = formatNumber(Math.floor(state.weedTokenBalance / 0.001));
+            availableHemp.textContent = (state.hempTokenBalance / 1000000).toFixed(1) + 'M';
+            stakedHemp.textContent = (state.stakedTokens / 1000000).toFixed(1) + 'M';
+            apyDisplay.textContent = `Earning ${currentStakingTier.apy}% APY`;
+            weedGov.textContent = formatNumber(state.weedTokenBalance);
+            votesDisplay.textContent = `${formatNumber(Math.floor(state.weedTokenBalance / 0.001))} votes`;
+            currentTierBadge.className = `px-4 py-2 rounded-lg bg-gradient-to-r ${currentStakingTier.color}`;
+            currentTierBadge.innerHTML = `<span class="text-black font-semibold">${currentStakingTier.name} Tier - ${currentStakingTier.discount}% Off All Vapes</span>`;
+            votingPowerDisplay.textContent = `Voting Power: ${formatNumber(Math.floor(state.weedTokenBalance / 0.001))}`;
+            
+            // Update vapes section
+            renderVapes();
+            
+            // Update staking section
+            renderStakingPools();
+            
+            // Update governance section
+            renderGovernanceProposals();
+            
+            // Update tab states
+            updateTabStates();
+            
+            // Update wallet connection state
+            updateWalletConnectionState();
+            
+            // Refresh feather icons
+            feather.replace();
+        }
+
+        function updateTabStates() {
+            tabButtons.forEach(button => {
+                const tab = button.getAttribute('data-tab');
+                if (tab === state.activeTab) {
+                    button.classList.remove('bg-gray-800', 'text-gray-300', 'hover:bg-gray-700', 'hover:text-white');
+                    button.classList.add('bg-gradient-to-r', 'from-green-400', 'to-green-600', 'text-black', 'shadow-lg', 'transform', 'scale-105');
+                } else {
+                    button.classList.remove('bg-gradient-to-r', 'from-green-400', 'to-green-600', 'text-black', 'shadow-lg', 'transform', 'scale-105');
+                    button.classList.add('bg-gray-800', 'text-gray-300', 'hover:bg-gray-700', 'hover:text-white');
+                }
+            });
+        }
+
+        function updateWalletConnectionState() {
+            if (state.walletConnected) {
+                connectWalletBtn.textContent = 'Wallet Connected';
+                connectWalletBtn.classList.remove('from-green-400', 'to-green-600', 'hover:from-green-500', 'hover:to-green-700');
+                connectWalletBtn.classList.add('from-blue-400', 'to-blue-600', 'hover:from-blue-500', 'hover:to-blue-700');
+                disconnectBtn.classList.remove('hidden');
+            } else {
+                connectWalletBtn.textContent = 'Connect Wallet';
+                connectWalletBtn.classList.remove('from-blue-400', 'to-blue-600', 'hover:from-blue-500', 'hover:to-blue-700');
+                connectWalletBtn.classList.add('from-green-400', 'to-green-600', 'hover:from-green-500', 'hover:to-green-700');
+                disconnectBtn.classList.add('hidden');
+            }
+        }
+
+        function renderVapes() {
+            vapesContainer.innerHTML = '';
+            
+            cbdVapes.forEach(vape => {
+                const currentStakingTier = calculateStakingTier(state.stakedTokens);
+                const discountedAlgoPrice = vape.priceAlgo * (1 - currentStakingTier.discount / 100);
+                const discountedUsdcPrice = vape.priceUsdc * (1 - currentStakingTier.discount / 100);
+                
+                const vapeCard = document.createElement('div');
+                vapeCard.className = 'glass-card rounded-2xl p-6 overflow-hidden relative';
+                vapeCard.innerHTML = `
+                    <div class="absolute top-0 right-0 w-20 h-20 bg-gradient-to-br ${vape.color} opacity-20 rounded-full -mr-10 -mt-10"></div>
+                    <div class="relative">
+                        <div class="flex items-center justify-between mb-4">
+                            <div class="text-3xl">${vape.emoji}</div>
+                            <div class="px-3 py-1 rounded-full text-xs font-semibold ${
+                                vape.type.includes('Indica') ? 'bg-purple-600 text-white' :
+                                vape.type.includes('Sativa') ? 'bg-yellow-600 text-black' :
+                                'bg-green-600 text-white'
+                            }">
+                                ${vape.type}
+                            </div>
+                        </div>
+
+                        <h3 class="font-bold text-white text-lg mb-1">${vape.name}</h3>
+                        <p class="text-sm text-gray-300 mb-2">Based on ${vape.strain}</p>
+                        
+                        <div class="bg-black bg-opacity-30 rounded-lg p-3 mb-4 space-y-2">
+                            <div class="flex justify-between text-sm">
+                                <span class="text-gray-300">Flavor:</span>
+                                <span class="text-yellow-400">${vape.flavor}</span>
+                            </div>
+                            <div class="flex justify-between text-sm">
+                                <span class="text-gray-300">Effects:</span>
+                                <span class="text-green-400">${vape.effects}</span>
+                            </div>
+                            <div class="flex justify-between text-sm">
+                                <span class="text-gray-300">Potency:</span>
+                                <span class="text-blue-400 font-bold">${vape.potency}</span>
+                            </div>
+                        </div>
+
+                        <div class="mb-4">
+                            <p class="text-xs text-gray-400 mb-1">Key Terpenes:</p>
+                            <div class="flex flex-wrap gap-1">
+                                ${vape.terpenes.map(terpene => `
+                                    <span class="px-2 py-1 bg-green-600/30 text-green-300 text-xs rounded-full">
+                                        ${terpene}
+                                    </span>
+                                `).join('')}
+                            </div>
+                        </div>
+
+                        <div class="bg-black bg-opacity-30 rounded-lg p-3 mb-4">
+                            <div class="text-center mb-2">
+                                <p class="text-lg font-bold text-blue-400">${discountedAlgoPrice.toFixed(2)} ALGO</p>
+                                <p class="text-lg font-bold text-yellow-400">$${discountedUsdcPrice.toFixed(2)} USDC</p>
+                                ${currentStakingTier.discount > 0 ? `
+                                    <p class="text-xs text-green-400">(${currentStakingTier.discount}% ${currentStakingTier.name} discount applied)</p>
+                                ` : ''}
+                            </div>
+                            <div class="text-xs text-center">
+                                <p class="text-green-300">Earn: ${formatNumber(vape.hempEarned)} HEMP</p>
+                            </div>
+                        </div>
+
+                        <div class="space-y-2">
+                            <button 
+                                onclick="purchaseWithAlgo(${vape.id})"
+                                ${state.algoBalance >= discountedAlgoPrice ? '' : 'disabled'}
+                                class="w-full py-2 px-4 rounded-lg font-semibold transition-all duration-300 ${
+                                    state.algoBalance >= discountedAlgoPrice
+                                        ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700'
+                                        : 'bg-gray-600 text-gray-400 cursor-not-allowed'
+                                }"
+                            >
+                                <i data-feather="dollar-sign" class="inline mr-2"></i>
+                                Buy with ALGO
+                            </button>
+                            
+                            <button 
+                                onclick="purchaseWithUsdc(${vape.id})"
+                                ${state.usdcBalance >= discountedUsdcPrice ? '' : 'disabled'}
+                                class="w-full py-2 px-4 rounded-lg font-semibold transition-all duration-300 ${
+                                    state.usdcBalance >= discountedUsdcPrice
+                                        ? 'bg-gradient-to-r from-yellow-500 to-yellow-600 text-black hover:from-yellow-600 hover:to-yellow-700'
+                                        : 'bg-gray-600 text-gray-400 cursor-not-allowed'
+                                }"
+                            >
+                                <i data-feather="shopping-cart" class="inline mr-2"></i>
+                                Buy with USDC
+                            </button>
+                            
+                            <button 
+                                onclick="spinForGold(${vape.id})"
+                                ${state.isSpinning ? 'disabled' : ''}
+                                class="w-full py-2 px-4 rounded-lg font-semibold transition-all duration-300 ${
+                                    state.isSpinning
+                                        ? 'bg-gray-600 text-gray-400 cursor-not-allowed'
+                                        : 'bg-gradient-to-r from-purple-500 to-pink-600 text-white hover:from-purple-600 hover:to-pink-700'
+                                }"
+                            >
+                                <i data-feather="refresh-cw" class="inline mr-2 ${state.isSpinning ? 'spinning' : ''}"></i>
+                                ${state.isSpinning ? 'SPINNING...' : 'SPIN FOR GOLD'}
+                            </button>
+                        </div>
+                    </div>
+                `;
+                
+                vapesContainer.appendChild(vapeCard);
+            });
+            
+            feather.replace();
+        }
+
+        function renderStakingPools() {
+            stakingContainer.innerHTML = '';
+            
+            stakingPools.forEach(pool => {
+                const poolCard = document.createElement('div');
+                poolCard.className = 'glass-card rounded-2xl p-6';
+                poolCard.innerHTML = `
+                    <div class="text-center">
+                        <div class="w-16 h-16 bg-gradient-to-br ${pool.color} rounded-full mx-auto mb-4 flex items-center justify-center">
+                            <i data-feather="lock" class="text-white"></i>
+                        </div>
+                        
+                        <h3 class="font-bold text-white text-xl mb-2">${pool.name}</h3>
+                        
+                        <div class="inline-block px-4 py-2 rounded-full mb-4 bg-gradient-to-r ${pool.color}">
+                            <span class="text-black font-bold">${pool.discount}% OFF</span>
+                        </div>
+                        
+                        <div class="bg-black bg-opacity-30 rounded-lg p-3 mb-4">
+                            <div class="text-sm space-y-2">
+                                <div class="flex justify-between">
+                                    <span class="text-gray-300">Min Stake:</span>
+                                    <span class="text-green-400">${(pool.minStake / 1000000).toFixed(1)}M HEMP</span>
+                                </div>
+                                <div class="flex justify-between">
+                                    <span class="text-gray-300">APY:</span>
+                                    <span class="text-blue-400">${pool.apy}%</span>
+                                </div>
+                                <div class="flex justify-between">
+                                    <span class="text-gray-300">Shipping:</span>
+                                    <span class="text-purple-400">${pool.shipping}</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="bg-black bg-opacity-30 rounded-lg p-3 mb-4">
+                            <p class="text-xs text-gray-300 font-semibold mb-2">Benefits:</p>
+                            <div class="space-y-1">
+                                ${pool.benefits.map(benefit => `
+                                    <p class="text-xs text-yellow-400">• ${benefit}</p>
+                                `).join('')}
+                            </div>
+                        </div>
+
+                        <div class="space-y-3">
+                            <input
+                                type="number"
+                                placeholder="Min ${(pool.minStake / 1000000).toFixed(1)}M HEMP"
+                                id="stakingAmount${pool.id}"
+                                class="w-full bg-black bg-opacity-30 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-gray-400 text-sm"
+                            />
+                            
+                            <button
+                                onclick="stakeTokens(${pool.id})"
+                                class="w-full py-3 px-4 rounded-lg font-semibold transition-all duration-300 bg-gradient-to-r ${pool.color} text-black hover:opacity-90"
+                            >
+                                Stake HEMP Tokens
+                            </button>
+                        </div>
+                    </div>
+                `;
+                
+                stakingContainer.appendChild(poolCard);
+            });
+            
+            feather.replace();
+        }
+
+        function renderGovernanceProposals() {
+            governanceContainer.innerHTML = '';
+            
+            governanceProposals.forEach(proposal => {
+                const proposalCard = document.createElement('div');
+                proposalCard.className = 'glass-card rounded-lg p-4 mb-4';
+                proposalCard.innerHTML = `
+                    <div class="flex justify-between items-start mb-2">
+                        <h4 class="font-bold text-white">${proposal.title}</h4>
+                        <span class="text-xs px-2 py-1 rounded-full ${
+                            proposal.status === 'Active' ? 'bg-green-600 text-white' : 'bg-gray-600 text-gray-300'
+                        }">
+                            ${proposal.status}
+                        </span>
+                    </div>
+                    <p class="text-sm text-gray-300 mb-3">${proposal.description}</p>
+                    <div class="flex justify-between items-center text-xs">
+                        <span class="text-gray-400">${proposal.timeLeft} left</span>
+                        <div>
+                            <span class="text-purple-400 mr-2">${proposal.weedRequired} WEED to vote</span>
+                            <button 
+                                onclick="voteOnProposal(${proposal.id})"
+                                ${state.weedTokenBalance >= proposal.weedRequired ? '' : 'disabled'}
+                                class="px-3 py-1 rounded-full text-xs font-semibold ${
+                                    state.weedTokenBalance >= proposal.weedRequired
+                                        ? 'bg-purple-600 text-white hover:bg-purple-700'
+                                        : 'bg-gray-600 text-gray-400 cursor-not-allowed'
+                                }"
+                            >
+                                Vote
+                            </button>
+                        </div>
+                    </div>
+                `;
+                
+                governanceContainer.appendChild(proposalCard);
+            });
+        }
+
+        // Event Handlers
+        function connectWallet() {
+            const mockAddress = 'HEMP7X4A3QZXKJYB2NWVF8H5M9GTCR6PLQS1EUDKA8YW3V2TZRI4BJLM6A';
+            
+            state.walletConnected = true;
+            state.algorandAddress = mockAddress;
+            state.hempTokenBalance = 12500000;
+            state.weedTokenBalance = 2500;
+            state.algoBalance = 150;
+            state.usdcBalance = 1250;
+            state.stakedTokens = 500000;
+            
+            walletModal.classList.remove('hidden');
+            updateUI();
+        }
+
+        function disconnectWallet() {
+            state.walletConnected = false;
+            state.algorandAddress = '';
+            state.hempTokenBalance = 0;
+            state.weedTokenBalance = 0;
+            state.algoBalance = 0;
+            state.usdcBalance = 0;
+            state.stakedTokens = 0;
+            
+            walletModal.classList.add('hidden');
+            updateUI();
+        }
+
+        function switchTab(tab) {
+            state.activeTab = tab;
+            
+            dashboardSection.classList.add('hidden');
+            vapesSection.classList.add('hidden');
+            stakingSection.classList.add('hidden');
+            governanceSection.classList.add('hidden');
+            
+            if (tab === 'dashboard') dashboardSection.classList.remove('hidden');
+            if (tab === 'vapes') vapesSection.classList.remove('hidden');
+            if (tab === 'staking') stakingSection.classList.remove('hidden');
+            if (tab === 'governance') governanceSection.classList.remove('hidden');
+            
+            updateTabStates();
+        }
+
+        function purchaseWithAlgo(vapeId) {
+            const vape = cbdVapes.find(v => v.id === vapeId);
+            const currentStakingTier = calculateStakingTier(state.stakedTokens);
+            const discountedPrice = vape.priceAlgo * (1 - currentStakingTier.discount / 100);
+            
+            if (state.algoBalance >= discountedPrice) {
+                state.algoBalance -= discountedPrice;
+                state.hempTokenBalance += vape.hempEarned;
+                
+                alert(`Purchased ${vape.name} with ALGO!\n\nCost: ${discountedPrice.toFixed(2)} ALGO (${currentStakingTier.discount}% ${currentStakingTier.name} discount)\nEarned: ${formatNumber(vape.hempEarned)} HEMP\nLP Contribution: ALGO/HEMP pool\nShipping: ${currentStakingTier.shipping}`);
+                updateUI();
+            } else {
+                alert(`Insufficient ALGO! Need ${discountedPrice.toFixed(2)} ALGO`);
+            }
+        }
+
+        function purchaseWithUsdc(vapeId) {
+            const vape = cbdVapes.find(v => v.id === vapeId);
+            const currentStakingTier = calculateStakingTier(state.stakedTokens);
+            const discountedPrice = vape.priceUsdc * (1 - currentStakingTier.discount / 100);
+            
+            if (state.usdcBalance >= discountedPrice) {
+                state.usdcBalance -= discountedPrice;
+                state.hempTokenBalance += vape.hempEarned;
+                
+                alert(`Purchased ${vape.name} with USDC!\n\nCost: $${discountedPrice.toFixed(2)} USDC (${currentStakingTier.discount}% ${currentStakingTier.name} discount)\nEarned: ${formatNumber(vape.hempEarned)} HEMP\nLP Contribution: USDC/HEMP pool\nWEED tokens purchased for ${state.VAULT_ADDRESS}\nShipping: ${currentStakingTier.shipping}`);
+                updateUI();
+            } else {
+                alert(`Insufficient USDC! Need $${discountedPrice.toFixed(2)} USDC`);
+            }
+        }
+
+        function spinForGold(vapeId) {
+            if (state.isSpinning) return;
+            
+            state.isSpinning = true;
+            state.spinResult = null;
+            spinResult.classList.add('hidden');
+            updateUI();
+            
+            setTimeout(() => {
+                const outcomes = [
+                    { type: 'hemp', amount: 50000, probability: 0.4 },
+                    { type: 'hemp', amount: 100000, probability: 0.25 },
+                    { type: 'hemp', amount: 200000, probability: 0.15 },
+                    { type: 'discount', amount: 10, probability: 0.1 },
+                    { type: 'discount', amount: 25, probability: 0.05 },
+                    { type: 'jackpot', amount: 1000000, probability: 0.05 }
+                ];
+                
+                const random = Math.random();
+                let cumulative = 0;
+                
+                for (let outcome of outcomes) {
+                    cumulative += outcome.probability;
+                    if (random <= cumulative) {
+                        if (outcome.type === 'hemp' || outcome.type === 'jackpot') {
+                            state.hempTokenBalance += outcome.amount;
+                        }
+                        state.spinResult = outcome;
+                        break;
+                    }
+                }
+                
+                state.isSpinning = false;
+                
+                // Show spin result
+                if (state.spinResult) {
+                    if (state.spinResult.type === 'hemp') {
+                        spinResultText.textContent = `Won ${formatNumber(state.spinResult.amount)} HEMP tokens!`;
+                        spinResultText.className = 'font-bold text-green-400';
+                    } else if (state.spinResult.type === 'discount') {
+                        spinResultText.textContent = `Won ${state.spinResult.amount}% additional discount!`;
+                        spinResultText.className = 'font-bold text-yellow-400';
+                    } else if (state.spinResult.type === 'jackpot') {
+                        spinResultText.textContent = `🎉 JACKPOT! Won ${formatNumber(state.spinResult.amount)} HEMP tokens!`;
+                        spinResultText.className = 'font-bold text-purple-400';
+                    }
+                    
+                    spinResult.classList.remove('hidden');
+                }
+                
+                updateUI();
+            }, 3000);
+        }
+
+        function stakeTokens(poolId) {
+            const pool = stakingPools.find(p => p.id === poolId);
+            const amount = parseInt(document.getElementById(`stakingAmount${poolId}`).value);
+            
+            if (amount && amount <= state.hempTokenBalance && amount >= pool.minStake) {
+                state.hempTokenBalance -= amount;
+                state.stakedTokens += amount;
+                
+                alert(`Successfully staked ${formatNumber(amount)} HEMP tokens!\n\nTier: ${pool.name}\nDiscount: ${pool.discount}% off CBD Gold Vapes\nAPY: ${pool.apy}% HEMP\nShipping: ${pool.shipping}\nBenefits unlocked: ${pool.benefits.join(', ')}`);
+                updateUI();
+            } else {
+                alert('Invalid staking amount or insufficient balance!');
+            }
+        }
+
+        function voteOnProposal(proposalId) {
+            const proposal = governanceProposals.find(p => p.id === proposalId);
+            
+            if (state.weedTokenBalance >= proposal.weedRequired) {
+                state.weedTokenBalance -= proposal.weedRequired;
+                alert(`Voted on proposal: ${proposal.title}\n\n${proposal.weedRequired} WEED tokens used for voting`);
+                updateUI();
+            } else {
+                alert(`You need at least ${proposal.weedRequired} WEED tokens to vote on this proposal`);
+            }
+        }
+
+        // Global functions for button clicks
+        window.purchaseWithAlgo = purchaseWithAlgo;
+        window.purchaseWithUsdc = purchaseWithUsdc;
+        window.spinForGold = spinForGold;
+        window.stakeTokens = stakeTokens;
+        window.voteOnProposal = voteOnProposal;
+
+        // Event Listeners
+        connectWalletBtn.addEventListener('click', connectWallet);
+        disconnectWalletBtn.addEventListener('click', disconnectWallet);
+        disconnectBtn.addEventListener('click', disconnectWallet);
+        closeModalBtn.addEventListener('click', () => walletModal.classList.add('hidden'));
+        
+        tabButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                const tab = button.getAttribute('data-tab');
+                switchTab(tab);
+            });
+        });
+
+        // Initialize UI
+        updateUI();
+    </script>
+</body>
 </html>

prompts.txt

@@ -0,0 +1,581 @@
+import React, { useState } from 'react';
+import { Wallet, Coins, Gift, Lock, Star, ShoppingCart, Users, TrendingUp, Award, Zap, Crown, Shield, Leaf, Flame, Dice1 } from 'lucide-react';
+
+const HempTokenCBDPlatform = () => {
+  const [walletConnected, setWalletConnected] = useState(false);
+  const [algorandAddress, setAlgorandAddress] = useState('');
+  const [hempTokenBalance, setHempTokenBalance] = useState(0);
+  const [weedTokenBalance, setWeedTokenBalance] = useState(0);
+  const [algoBalance, setAlgoBalance] = useState(0);
+  const [usdcBalance, setUsdcBalance] = useState(0);
+  const [stakedTokens, setStakedTokens] = useState(500000);
+  const [activeTab, setActiveTab] = useState('dashboard');
+  const [stakingAmount, setStakingAmount] = useState('');
+  const [isSpinning, setIsSpinning] = useState(false);
+  const [spinResult, setSpinResult] = useState(null);
+
+  // Algorand ASA Information
+  const HEMP_ASA_ID = 2675148574;
+  const WEED_ASA_ID = 2676316280;
+  const VAULT_ADDRESS = '420vault.algo';
+  
+  // Mock Algorand wallet connection
+  const connectAlgoWallet = async () => {
+    try {
+      const mockAddress = 'HEMP7X4A3QZXKJYB2NWVF8H5M9GTCR6PLQS1EUDKA8YW3V2TZRI4BJLM6A';
+      setAlgorandAddress(mockAddress);
+      setWalletConnected(true);
+      setHempTokenBalance(12500000);
+      setWeedTokenBalance(2500);
+      setAlgoBalance(150);
+      setUsdcBalance(1250);
+    } catch (error) {
+      console.error('Wallet connection failed:', error);
+    }
+  };
+
+  const disconnectWallet = () => {
+    setWalletConnected(false);
+    setAlgorandAddress('');
+    setHempTokenBalance(0);
+    setWeedTokenBalance(0);
+  };
+
+  // Calculate staking tier based on staked amount
+  const calculateStakingTier = (stakedAmount) => {
+    if (stakedAmount >= 1000000) return { name: 'Gold', discount: 50, apy: 10, shipping: 'Priority', color: 'from-yellow-400 to-yellow-600' };
+    if (stakedAmount >= 500000) return { name: 'Silver', discount: 30, apy: 5, shipping: 'Faster', color: 'from-gray-300 to-gray-500' };
+    if (stakedAmount >= 100000) return { name: 'Bronze', discount: 20, apy: 3, shipping: 'Faster', color: 'from-orange-400 to-orange-600' };
+    return { name: 'None', discount: 0, apy: 0, shipping: 'Standard', color: 'from-gray-600 to-gray-700' };
+  };
+
+  const currentStakingTier = calculateStakingTier(stakedTokens);
+
+  // CBD Gold 510 ceramic vapes
+  const cbdVapes = [
+    {
+      id: 1,
+      name: 'Northern Lights CBD',
+      strain: 'Northern Lights',
+      type: 'Indica-dominant',
+      flavor: 'Sweet Pine & Earth',
+      effects: 'Deeply Relaxing',
+      priceAlgo: 15,
+      priceUsdc: 45.99,
+      hempEarned: 90000,
+      potency: '66.6% CBD',
+      terpenes: ['Myrcene', 'Pinene', 'Caryophyllene'],
+      color: 'from-purple-500 to-indigo-600',
+      emoji: '🌌'
+    },
+    {
+      id: 2,
+      name: 'Sour Diesel CBD',
+      strain: 'Sour Diesel',
+      type: 'Sativa-dominant',
+      flavor: 'Citrus Fuel & Herbs',
+      effects: 'Energizing Focus',
+      priceAlgo: 16,
+      priceUsdc: 47.99,
+      hempEarned: 95000,
+      potency: '66.6% CBD',
+      terpenes: ['Limonene', 'Caryophyllene', 'Myrcene'],
+      color: 'from-yellow-500 to-orange-600',
+      emoji: '⚡'
+    },
+    {
+      id: 3,
+      name: 'OG Kush CBD',
+      strain: 'OG Kush',
+      type: 'Hybrid',
+      flavor: 'Earthy Lemon Pine',
+      effects: 'Balanced Euphoria',
+      priceAlgo: 17,
+      priceUsdc: 49.99,
+      hempEarned: 100000,
+      potency: '66.6% CBD',
+      terpenes: ['Myrcene', 'Limonene', 'Caryophyllene'],
+      color: 'from-green-500 to-emerald-600',
+      emoji: '👑'
+    }
+  ];
+
+  // Staking pools
+  const stakingPools = [
+    {
+      id: 1,
+      name: 'Bronze Tier',
+      minStake: 100000,
+      discount: 20,
+      apy: 3,
+      shipping: 'Faster',
+      benefits: ['20% off CBD Gold Vapes', 'Faster shipping', 'Community access'],
+      color: 'from-orange-400 to-orange-600'
+    },
+    {
+      id: 2,
+      name: 'Silver Tier',
+      minStake: 500000,
+      discount: 30,
+      apy: 5,
+      shipping: 'Faster',
+      benefits: ['30% off CBD Gold Vapes', 'Faster shipping', 'Exclusive strains', 'New releases'],
+      color: 'from-gray-300 to-gray-500'
+    },
+    {
+      id: 3,
+      name: 'Gold Tier',
+      minStake: 1000000,
+      discount: 50,
+      apy: 10,
+      shipping: 'Priority',
+      benefits: ['50% off CBD Gold Vapes', 'Priority shipping', 'VIP event tickets', 'All exclusive access'],
+      color: 'from-yellow-400 to-yellow-600'
+    }
+  ];
+
+  // Governance proposals
+  const governanceProposals = [
+    {
+      id: 1,
+      title: 'New Strain: Zkittlez CBD',
+      description: 'Vote to add Zkittlez-inspired terpene profile with 66.6% CBD potency',
+      votingPower: Math.floor(weedTokenBalance / 0.001),
+      status: 'Active',
+      timeLeft: '5 days',
+      weedRequired: 1
+    },
+    {
+      id: 2,
+      title: 'Limited Edition: 24K Gold Hardware',
+      description: 'Propose gold-plated ceramic tips for premium tier members',
+      votingPower: Math.floor(weedTokenBalance / 0.001),
+      status: 'Active',
+      timeLeft: '12 days',
+      weedRequired: 2.5
+    }
+  ];
+
+  // Slot machine game
+  const spinForGold = async (vape) => {
+    if (isSpinning) return;
+    
+    setIsSpinning(true);
+    setSpinResult(null);
+    
+    setTimeout(() => {
+      const outcomes = [
+        { type: 'hemp', amount: 50000, probability: 0.4 },
+        { type: 'hemp', amount: 100000, probability: 0.25 },
+        { type: 'hemp', amount: 200000, probability: 0.15 },
+        { type: 'discount', amount: 10, probability: 0.1 },
+        { type: 'discount', amount: 25, probability: 0.05 },
+        { type: 'jackpot', amount: 1000000, probability: 0.05 }
+      ];
+      
+      const random = Math.random();
+      let cumulative = 0;
+      
+      for (let outcome of outcomes) {
+        cumulative += outcome.probability;
+        if (random <= cumulative) {
+          if (outcome.type === 'hemp' || outcome.type === 'jackpot') {
+            setHempTokenBalance(prev => prev + outcome.amount);
+          }
+          setSpinResult(outcome);
+          break;
+        }
+      }
+      
+      setIsSpinning(false);
+    }, 3000);
+  };
+
+  const purchaseWithAlgo = (vape) => {
+    const discountedPrice = vape.priceAlgo * (1 - currentStakingTier.discount / 100);
+    
+    if (algoBalance >= discountedPrice) {
+      setAlgoBalance(prev => prev - discountedPrice);
+      setHempTokenBalance(prev => prev + vape.hempEarned);
+      
+      alert(`Purchased ${vape.name} with ALGO!\n\nCost: ${discountedPrice.toFixed(2)} ALGO (${currentStakingTier.discount}% ${currentStakingTier.name} discount)\nEarned: ${vape.hempEarned.toLocaleString()} HEMP\nLP Contribution: ALGO/HEMP pool\nShipping: ${currentStakingTier.shipping}`);
+    } else {
+      alert(`Insufficient ALGO! Need ${discountedPrice.toFixed(2)} ALGO`);
+    }
+  };
+
+  const purchaseWithUsdc = (vape) => {
+    const discountedPrice = vape.priceUsdc * (1 - currentStakingTier.discount / 100);
+    
+    if (usdcBalance >= discountedPrice) {
+      setUsdcBalance(prev => prev - discountedPrice);
+      setHempTokenBalance(prev => prev + vape.hempEarned);
+      
+      alert(`Purchased ${vape.name} with USDC!\n\nCost: $${discountedPrice.toFixed(2)} USDC (${currentStakingTier.discount}% ${currentStakingTier.name} discount)\nEarned: ${vape.hempEarned.toLocaleString()} HEMP\nLP Contribution: USDC/HEMP pool\nWEED tokens purchased for ${VAULT_ADDRESS}\nShipping: ${currentStakingTier.shipping}`);
+    } else {
+      alert(`Insufficient USDC! Need $${discountedPrice.toFixed(2)} USDC`);
+    }
+  };
+
+  const stakeTokens = async (pool) => {
+    const amount = parseInt(stakingAmount);
+    
+    if (amount && amount <= hempTokenBalance && amount >= pool.minStake) {
+      setHempTokenBalance(prev => prev - amount);
+      setStakedTokens(prev => prev + amount);
+      setStakingAmount('');
+      
+      alert(`Successfully staked ${amount.toLocaleString()} HEMP tokens!\n\nTier: ${pool.name}\nDiscount: ${pool.discount}% off CBD Gold Vapes\nAPY: ${pool.apy}% HEMP\nShipping: ${pool.shipping}\nBenefits unlocked: ${pool.benefits.join(', ')}`);
+    } else {
+      alert('Invalid staking amount or insufficient balance!');
+    }
+  };
+
+  const TabButton = ({ id, label, icon: Icon, active, onClick }) => (
+    <button
+      onClick={onClick}
+      className={`flex items-center space-x-2 px-6 py-3 rounded-lg font-semibold transition-all duration-300 ${
+        active 
+          ? 'bg-gradient-to-r from-green-400 to-green-600 text-black shadow-lg transform scale-105' 
+          : 'bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white'
+      }`}
+    >
+      <Icon size={20} />
+      <span>{label}</span>
+    </button>
+  );
+
+  const GlassCard = ({ children, className = '' }) => (
+    <div className={`bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 shadow-2xl ${className}`}>
+      {children}
+    </div>
+  );
+
+  const renderDashboard = () => (
+    <div className="space-y-8">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <GlassCard className="p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-xl font-bold text-white flex items-center">
+              <Leaf className="mr-2 text-green-400" />
+              Multi-Token Wallet
+            </h3>
+            <button onClick={disconnectWallet} className="text-sm text-red-400 hover:text-red-300">
+              Disconnect
+            </button>
+          </div>
+          <div className="bg-black/30 rounded-lg p-4 space-y-3">
+            <div>
+              <p className="text-sm text-gray-300">Algorand Address:</p>
+              <p className="font-mono text-xs text-green-400 break-all">{algorandAddress}</p>
+            </div>
+            <div className="grid grid-cols-2 gap-4 text-sm">
+              <div>
+                <p className="text-gray-300">HEMP:</p>
+                <p className="text-green-400 font-bold">{hempTokenBalance.toLocaleString()}</p>
+                <p className="text-xs text-gray-500">ASA: {HEMP_ASA_ID}</p>
+              </div>
+              <div>
+                <p className="text-gray-300">WEED:</p>
+                <p className="text-purple-400 font-bold">{weedTokenBalance.toLocaleString()}</p>
+                <p className="text-xs text-gray-500">ASA: {WEED_ASA_ID}</p>
+              </div>
+              <div>
+                <p className="text-gray-300">ALGO:</p>
+                <p className="text-blue-400 font-bold">{algoBalance.toFixed(2)}</p>
+              </div>
+              <div>
+                <p className="text-gray-300">USDC:</p>
+                <p className="text-yellow-400 font-bold">${usdcBalance.toFixed(2)}</p>
+              </div>
+            </div>
+          </div>
+        </GlassCard>
+
+        <GlassCard className="p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-xl font-bold text-white flex items-center">
+              <Crown className="mr-2 text-orange-400" />
+              Staking Tier Status
+            </h3>
+          </div>
+          <div className={`bg-gradient-to-r ${currentStakingTier.color} rounded-lg p-4 mb-3`}>
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-black font-bold text-lg">{currentStakingTier.name} Tier</p>
+                <p className="text-black/80 text-sm">{currentStakingTier.discount}% Off • {currentStakingTier.apy}% APY</p>
+              </div>
+              <Crown className="text-black" size={32} />
+            </div>
+          </div>
+          <div className="text-sm space-y-1">
+            <div className="flex justify-between">
+              <span className="text-gray-300">Staked HEMP:</span>
+              <span className="text-green-400">{stakedTokens.toLocaleString()}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-gray-300">Shipping:</span>
+              <span className="text-blue-400">{currentStakingTier.shipping}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-gray-300">Voting Power:</span>
+              <span className="text-purple-400">{Math.floor(weedTokenBalance / 0.001).toLocaleString()}</span>
+            </div>
+          </div>
+        </GlassCard>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+        <GlassCard className="p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-300 text-sm">Available HEMP</p>
+              <p className="text-3xl font-bold text-green-400">{(hempTokenBalance / 1000000).toFixed(1)}M</p>
+              <p className="text-xs text-gray-400">Ready to spend</p>
+            </div>
+            <Leaf className="text-green-400" size={32} />
+          </div>
+        </GlassCard>
+
+        <GlassCard className="p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-300 text-sm">Staked HEMP</p>
+              <p className="text-3xl font-bold text-blue-400">{(stakedTokens / 1000000).toFixed(1)}M</p>
+              <p className="text-xs text-gray-400">Earning {currentStakingTier.apy}% APY</p>
+            </div>
+            <Lock className="text-blue-400" size={32} />
+          </div>
+        </GlassCard>
+
+        <GlassCard className="p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-300 text-sm">WEED Governance</p>
+              <p className="text-3xl font-bold text-purple-400">{weedTokenBalance.toLocaleString()}</p>
+              <p className="text-xs text-gray-400">{Math.floor(weedTokenBalance / 0.001).toLocaleString()} votes</p>
+            </div>
+            <Users className="text-purple-400" size={32} />
+          </div>
+        </GlassCard>
+
+        <GlassCard className="p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-300 text-sm">LP Contributions</p>
+              <p className="text-3xl font-bold text-yellow-400">42</p>
+              <p className="text-xs text-gray-400">ALGO & USDC pools</p>
+            </div>
+            <TrendingUp className="text-yellow-400" size={32} />
+          </div>
+        </GlassCard>
+      </div>
+    </div>
+  );
+
+  const renderVapes = () => (
+    <div className="space-y-8">
+      <div className="text-center">
+        <h2 className="text-3xl font-bold text-white mb-2">CBD Gold 510 Ceramic Vapes</h2>
+        <p className="text-gray-300">Premium CBD 510 ceramic vapes with 66.6% CBD potency</p>
+        <div className="flex justify-center items-center space-x-4 mt-4">
+          <div className={`px-4 py-2 rounded-lg bg-gradient-to-r ${currentStakingTier.color}`}>
+            <span className="text-black font-semibold">{currentStakingTier.name} Tier - {currentStakingTier.discount}% Off All Vapes</span>
+          </div>
+        </div>
+      </div>
+
+      {spinResult && (
+        <GlassCard className="p-6 text-center">
+          <h3 className="text-xl font-bold text-white mb-4">🎰 Spin Result - Verified on Algorand!</h3>
+          <div className="bg-black/30 rounded-lg p-4">
+            {spinResult.type === 'hemp' && (
+              <p className="text-green-400 font-bold">Won {spinResult.amount.toLocaleString()} HEMP tokens!</p>
+            )}
+            {spinResult.type === 'discount' && (
+              <p className="text-yellow-400 font-bold">Won {spinResult.amount}% additional discount!</p>
+            )}
+            {spinResult.type === 'jackpot' && (
+              <p className="text-purple-400 font-bold">🎉 JACKPOT! Won {spinResult.amount.toLocaleString()} HEMP tokens!</p>
+            )}
+          </div>
+        </GlassCard>
+      )}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {cbdVapes.map(vape => {
+          const discountedAlgoPrice = vape.priceAlgo * (1 - currentStakingTier.discount / 100);
+          const discountedUsdcPrice = vape.priceUsdc * (1 - currentStakingTier.discount / 100);
+
+          return (
+            <GlassCard key={vape.id} className="p-6 overflow-hidden relative">
+              <div className={`absolute top-0 right-0 w-20 h-20 bg-gradient-to-br ${vape.color} opacity-20 rounded-full -mr-10 -mt-10`}></div>
+              
+              <div className="relative">
+                <div className="flex items-center justify-between mb-4">
+                  <div className="text-3xl">{vape.emoji}</div>
+                  <div className={`px-3 py-1 rounded-full text-xs font-semibold ${
+                    vape.type.includes('Indica') ? 'bg-purple-600 text-white' :
+                    vape.type.includes('Sativa') ? 'bg-yellow-600 text-black' :
+                    'bg-green-600 text-white'
+                  }`}>
+                    {vape.type}
+                  </div>
+                </div>
+
+                <h3 className="font-bold text-white text-lg mb-1">{vape.name}</h3>
+                <p className="text-sm text-gray-300 mb-2">Based on {vape.strain}</p>
+                
+                <div className="bg-black/30 rounded-lg p-3 mb-4 space-y-2">
+                  <div className="flex justify-between text-sm">
+                    <span className="text-gray-300">Flavor:</span>
+                    <span className="text-yellow-400">{vape.flavor}</span>
+                  </div>
+                  <div className="flex justify-between text-sm">
+                    <span className="text-gray-300">Effects:</span>
+                    <span className="text-green-400">{vape.effects}</span>
+                  </div>
+                  <div className="flex justify-between text-sm">
+                    <span className="text-gray-300">Potency:</span>
+                    <span className="text-blue-400 font-bold">{vape.potency}</span>
+                  </div>
+                </div>
+
+                <div className="mb-4">
+                  <p className="text-xs text-gray-400 mb-1">Key Terpenes:</p>
+                  <div className="flex flex-wrap gap-1">
+                    {vape.terpenes.map(terpene => (
+                      <span key={terpene} className="px-2 py-1 bg-green-600/30 text-green-300 text-xs rounded-full">
+                        {terpene}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="bg-black/30 rounded-lg p-3 mb-4">
+                  <div className="text-center mb-2">
+                    <p className="text-lg font-bold text-blue-400">{discountedAlgoPrice.toFixed(2)} ALGO</p>
+                    <p className="text-lg font-bold text-yellow-400">${discountedUsdcPrice.toFixed(2)} USDC</p>
+                    {currentStakingTier.discount > 0 && (
+                      <p className="text-xs text-green-400">({currentStakingTier.discount}% {currentStakingTier.name} discount applied)</p>
+                    )}
+                  </div>
+                  <div className="text-xs text-center">
+                    <p className="text-green-300">Earn: {vape.hempEarned.toLocaleString()} HEMP</p>
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <button 
+                    onClick={() => purchaseWithAlgo(vape)}
+                    disabled={algoBalance < discountedAlgoPrice}
+                    className={`w-full py-2 px-4 rounded-lg font-semibold transition-all duration-300 ${
+                      algoBalance >= discountedAlgoPrice
+                        ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700'
+                        : 'bg-gray-600 text-gray-400 cursor-not-allowed'
+                    }`}
+                  >
+                    <Coins className="inline mr-2" size={16} />
+                    Buy with ALGO
+                  </button>
+                  
+                  <button 
+                    onClick={() => purchaseWithUsdc(vape)}
+                    disabled={usdcBalance < discountedUsdcPrice}
+                    className={`w-full py-2 px-4 rounded-lg font-semibold transition-all duration-300 ${
+                      usdcBalance >= discountedUsdcPrice
+                        ? 'bg-gradient-to-r from-yellow-500 to-yellow-600 text-black hover:from-yellow-600 hover:to-yellow-700'
+                        : 'bg-gray-600 text-gray-400 cursor-not-allowed'
+                    }`}
+                  >
+                    <ShoppingCart className="inline mr-2" size={16} />
+                    Buy with USDC
+                  </button>
+                  
+                  <button 
+                    onClick={() => spinForGold(vape)}
+                    disabled={isSpinning}
+                    className={`w-full py-2 px-4 rounded-lg font-semibold transition-all duration-300 ${
+                      isSpinning
+                        ? 'bg-gray-600 text-gray-400 cursor-not-allowed'
+                        : 'bg-gradient-to-r from-purple-500 to-pink-600 text-white hover:from-purple-600 hover:to-pink-700'
+                    }`}
+                  >
+                    <Dice1 className={`inline mr-2 ${isSpinning ? 'animate-spin' : ''}`} size={16} />
+                    {isSpinning ? 'SPINNING...' : 'SPIN FOR GOLD'}
+                  </button>
+                </div>
+              </div>
+            </GlassCard>
+          );
+        })}
+      </div>
+    </div>
+  );
+
+  const renderStaking = () => (
+    <div className="space-y-8">
+      <div className="text-center">
+        <h2 className="text-3xl font-bold text-white mb-2">HEMP Token Staking Tiers</h2>
+        <p className="text-gray-300">Stake HEMP tokens to unlock tiered discounts and exclusive benefits</p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {stakingPools.map(pool => (
+          <GlassCard key={pool.id} className="p-6">
+            <div className="text-center">
+              <div className={`w-16 h-16 bg-gradient-to-br ${pool.color} rounded-full mx-auto mb-4 flex items-center justify-center`}>
+                <Lock className="text-white" size={24} />
+              </div>
+              
+              <h3 className="font-bold text-white text-xl mb-2">{pool.name}</h3>
+              
+              <div className={`inline-block px-4 py-2 rounded-full mb-4 bg-gradient-to-r ${pool.color}`}>
+                <span className="text-black font-bold">{pool.discount}% OFF</span>
+              </div>
+              
+              <div className="bg-black/30 rounded-lg p-3 mb-4">
+                <div className="text-sm space-y-2">
+                  <div className="flex justify-between">
+                    <span className="text-gray-300">Min Stake:</span>
+                    <span className="text-green-400">{(pool.minStake / 1000000).toFixed(1)}M HEMP</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-300">APY:</span>
+                    <span className="text-blue-400">{pool.apy}%</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-300">Shipping:</span>
+                    <span className="text-purple-400">{pool.shipping}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="bg-black/30 rounded-lg p-3 mb-4">
+                <p className="text-xs text-gray-300 font-semibold mb-2">Benefits:</p>
+                <div className="space-y-1">
+                  {pool.benefits.map((benefit, index) => (
+                    <p key={index} className="text-xs text-yellow-400">• {benefit}</p>
+                  ))}
+                </div>
+              </div>
+
+              <div className="space-y-3">
+                <input
+                  type="number"
+                  placeholder={`Min ${(pool.minStake / 1000000).toFixed(1)}M HEMP`}
+                  value={stakingAmount}
+                  onChange={(e) => setStakingAmount(e.target.value)}
+                  className="w-full bg-black/30 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-gray-400 text-sm"
+                />
+                
+                <button
+                  onClick={() => stakeTokens(pool)}
+                  disabled={!stakingAmount || parseInt(stakingAmount) < pool.minStake || parseInt(stakingAmount) > hempTokenBalance}
+                  className={`w-full py-3 px-4 rounded-lg font-semibold transition-all duration-300 ${
+                    stakingAmount && parseInt(stakingAmount) >= pool.minStake && parseInt(stakingAmount) <= hempTokenBalance
+                      ? `bg-gradient-to-r ${pool.color} text-black hover:opacity-90`
+                      : '
+
+
+Please Check for errors and fix