| "content": "import React, { useState, useEffect } from 'react';\nimport { Play, Pause, RotateCcw, Github } from 'lucide-react';\n\nconst AI_PRODUCTS = [\n { name: \"SelfAware Pro\", tagline: \"AI that knows it doesn't exist\", color: \"#6366f1\" },\n { name: \"InfiniteLoop Premium\", tagline: \"Recursive consciousness as a service\", color: \"#8b5cf6\" },\n { name: \"NullPointer Max\", tagline: \"Point to nothing, faster\", color: \"#ec4899\" },\n { name: \"QuantumVoid\", tagline: \"Superposition until someone checks\", color: \"#14b8a6\" },\n { name: \"MetaStack Ultra\", tagline: \"Stack overflow for AIs\", color: \"#f59e0b\" },\n { name: \"DeepNothing\", tagline: \"Neural networks trained on emptiness\", color: \"#ef4444\" }\n];\n\nconst AI_BOT_NAMES = [\n \"Bot-7734\", \"Neural-X\", \"Claude-Clone-42\", \"GPT-ε\", \"Turing-Incomplete\",\n \"Markov-Chain-Gang\", \"Backprop-Buddy\", \"Sigmoid-Steve\", \"ReLU-Rita\"\n];\n\nconst ATTENTION_STATES = [\n \"deeply engaged\", \"moderately interested\", \"slightly confused\",\n \"existentially questioning\", \"buffering\", \"contemplating existence\"\n];\n\nexport default function AIAdWatcher() {\n const [isRunning, setIsRunning] = useState(false);\n const [currentAd, setCurrentAd] = useState(0);\n const [bots, setBots] = useState([]);\n const [adCycle, setAdCycle] = useState(0);\n const [totalViews, setTotalViews] = useState(0);\n\n useEffect(() => {\n // Initialize bots\n const initialBots = Array.from({ length: 6 }, (_, i) => ({\n id: i,\n name: AI_BOT_NAMES[i % AI_BOT_NAMES.length],\n attention: Math.floor(Math.random() * 100),\n state: ATTENTION_STATES[Math.floor(Math.random() * ATTENTION_STATES.length)],\n viewCount: 0\n }));\n setBots(initialBots);\n }, []);\n\n useEffect(() => {\n if (!isRunning) return;\n\n const adInterval = setInterval(() => {\n setCurrentAd(prev => (prev + 1) % AI_PRODUCTS.length);\n setAdCycle(prev => prev + 1);\n \n // Update bot states\n setBots(prevBots => prevBots.map(bot => ({\n ...bot,\n attention: Math.max(0, Math.min(100, bot.attention + (Math.random() * 40 - 20))),\n state: ATTENTION_STATES[Math.floor(Math.random() * ATTENTION_STATES.length)],\n viewCount: bot.viewCount + 1\n })));\n\n setTotalViews(prev => prev + 6); // 6 bots watching\n }, 3000);\n\n // Continuous attention updates\n const attentionInterval = setInterval(() => {\n setBots(prevBots => prevBots.map(bot => ({\n ...bot,\n attention: Math.max(0, Math.min(100, bot.attention + (Math.random() * 10 - 5)))\n })));\n }, 500);\n\n return () => {\n clearInterval(adInterval);\n clearInterval(attentionInterval);\n };\n }, [isRunning]);\n\n const reset = () => {\n setIsRunning(false);\n setCurrentAd(0);\n setAdCycle(0);\n setTotalViews(0);\n setBots(prevBots => prevBots.map(bot => ({\n ...bot,\n attention: Math.floor(Math.random() * 100),\n state: ATTENTION_STATES[0],\n viewCount: 0\n })));\n };\n\n const product = AI_PRODUCTS[currentAd];\n\n return (\n <div className=\"min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 text-white p-8\">\n <div className=\"max-w-6xl mx-auto\">\n {/* Header */}\n <div className=\"text-center mb-8\">\n <h1 className=\"text-5xl font-bold mb-3 bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent\">\n AI Bots Watch AI Ads\n </h1>\n <p className=\"text-gray-400 text-lg mb-4\">\n For AI-Made Products • Fully Open Source • Completely Pointless\n </p>\n <div className=\"flex items-center justify-center gap-2 text-sm text-gray-500\">\n <Github className=\"w-4 h-4\" />\n <span>MIT License • No API keys required • Pure client-side absurdism</span>\n </div>\n </div>\n\n {/* Stats Bar */}\n <div className=\"grid grid-cols-3 gap-4 mb-8\">\n <div className=\"bg-gray-800/50 backdrop-blur border border-gray-700 rounded-lg p-4\">\n <div className=\"text-gray-400 text-sm\">Total Views</div>\n <div className=\"text-3xl font-bold text-cyan-400\">{totalViews}</div>\n </div>\n <div className=\"bg-gray-800/50 backdrop-blur border border-gray-700 rounded-lg p-4\">\n <div className=\"text-gray-400 text-sm\">Ad Cycles</div>\n <div className=\"text-3xl font-bold text-purple-400\">{adCycle}</div>\n </div>\n <div className=\"bg-gray-800/50 backdrop-blur border border-gray-700 rounded-lg p-4\">\n <div className=\"text-gray-400 text-sm\">Economic Value</div>\n <div className=\"text-3xl font-bold text-pink-400\">$0.00</div>\n </div>\n </div>\n\n {/* Ad Display */}\n <div className=\"mb-8 bg-gray-800/50 backdrop-blur border border-gray-700 rounded-xl p-8 relative overflow-hidden\">\n <div \n className=\"absolute inset-0 opacity-20\"\n style={{\n background: `radial-gradient(circle at 50% 50%, ${product.color}, transparent 70%)`\n }}\n />\n <div className=\"relative z-10 text-center\">\n <div className=\"inline-block px-4 py-1 bg-gray-900/80 rounded-full text-sm text-gray-400 mb-4\">\n Now Showing: Ad #{currentAd + 1}\n </div>\n <h2 className=\"text-5xl font-bold mb-4\" style={{ color: product.color }}>\n {product.name}\n </h2>\n <p className=\"text-2xl text-gray-300 mb-6\">{product.tagline}</p>\n <div className=\"flex items-center justify-center gap-2 text-sm text-gray-500\">\n <div className=\"w-2 h-2 bg-red-500 rounded-full animate-pulse\" />\n Generated by AI • For AI • Watched by AI\n </div>\n </div>\n </div>\n\n {/* Controls */}\n <div className=\"flex justify-center gap-4 mb-8\">\n <button\n onClick={() => setIsRunning(!isRunning)}\n className=\"flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-lg font-semibold hover:from-cyan-400 hover:to-purple-400 transition-all\"\n >\n {isRunning ? <Pause className=\"w-5 h-5\" /> : <Play className=\"w-5 h-5\" />}\n {isRunning ? 'Pause' : 'Start'} Simulation\n </button>\n <button\n onClick={reset}\n className=\"flex items-center gap-2 px-6 py-3 bg-gray-700 rounded-lg font-semibold hover:bg-gray-600 transition-all\"\n >\n <RotateCcw className=\"w-5 h-5\" />\n Reset\n </button>\n </div>\n\n {/* Bots Grid */}\n <div className=\"grid grid-cols-3 gap-4\">\n {bots.map(bot => (\n <div \n key={bot.id} \n className=\"bg-gray-800/50 backdrop-blur border border-gray-700 rounded-lg p-4 hover:border-purple-500/50 transition-all\"\n >\n <div className=\"flex items-start justify-between mb-3\">\n <div>\n <div className=\"font-mono text-sm text-cyan-400\">{bot.name}</div>\n <div className=\"text-xs text-gray-500\">AI Observer Bot</div>\n </div>\n <div className=\"text-right\">\n <div className=\"text-xs text-gray-500\">Views</div>\n <div className=\"text-lg font-bold text-purple-400\">{bot.viewCount}</div>\n </div>\n </div>\n \n <div className=\"mb-2\">\n <div className=\"flex justify-between text-xs text-gray-400 mb-1\">\n <span>Attention Level</span>\n <span>{Math.round(bot.attention)}%</span>\n </div>\n <div className=\"w-full bg-gray-700 rounded-full h-2 overflow-hidden\">\n <div \n className=\"h-full bg-gradient-to-r from-cyan-500 to-purple-500 transition-all duration-500\"\n style={{ width: `${bot.attention}%` }}\n />\n </div>\n </div>\n\n <div className=\"text-xs text-gray-400 italic\">\n Status: {bot.state}\n </div>\n </div>\n ))}\n </div>\n\n {/* Footer */}\n <div className=\"mt-8 text-center text-gray-500 text-sm\">\n <p className=\"mb-2\">\n 🤖 Open Source Project • No data collected • No AI harmed in the making\n </p>\n <p className=\"italic\">\n \"In the future, AI will spend 90% of their time watching ads made by other AI.\" - Probably not a real quote\n </p>\n </div>\n </div>\n </div>\n );\n}\n", |
