File size: 13,704 Bytes
d491dc1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 | import React from 'react';
import { motion } from 'framer-motion';
const DiscoveryHub = ({
restaurants = [],
groceries = [],
selectedAddress,
activeTab = 'home',
setActiveTab = () => {},
onSelectRestaurant = () => {},
onAddToCart = () => {},
onOpenChat = () => {},
onOpenCheckout = () => {},
onOpenOps = () => {},
onOpenProfile = () => {},
onOpenModule = () => {},
cart = []
}) => {
const totalCartCount = cart.reduce((acc, item) => acc + (item.quantity || 1), 0);
return (
<div className="min-h-screen bg-[#07070B] text-white font-sans selection:bg-[#FF3366] selection:text-white">
{/* Ambient Lighting */}
<div className="fixed inset-0 pointer-events-none z-0">
<div className="absolute -top-32 -left-32 w-[500px] h-[500px] bg-[#FF3366] rounded-full blur-[160px] opacity-10"></div>
<div className="absolute -bottom-32 -right-32 w-[500px] h-[500px] bg-[#6C63FF] rounded-full blur-[160px] opacity-10"></div>
</div>
{/* Top Header Bar */}
<header className="fixed top-0 left-0 w-full z-50 px-6 py-4 bg-[#0A0A10]/90 backdrop-blur-xl border-b border-white/10">
<div className="max-w-7xl mx-auto flex items-center justify-between">
{/* Logo & Search */}
<div className="flex items-center gap-8">
<div className="flex items-center gap-3 cursor-pointer" onClick={() => setActiveTab('home')}>
<span className="text-2xl font-serif font-bold text-white tracking-tight">HyperFlow</span>
<span className="text-xs font-serif italic text-transparent bg-clip-text bg-gradient-to-r from-[#FF3366] to-[#FF4D6D] font-semibold">
3.0
</span>
</div>
<div className="hidden md:flex items-center bg-white/[0.04] rounded-full px-4 py-2 border border-white/10 w-80">
<span className="material-symbols-outlined text-white/40 text-xl mr-2">search</span>
<input
className="bg-transparent border-none outline-none text-sm text-white placeholder:text-white/40 w-full font-light"
placeholder="Search Instamart items, cuisines, slots..."
type="text"
/>
</div>
</div>
{/* Module Navigation Tabs */}
<div className="hidden lg:flex items-center gap-1 bg-white/[0.04] p-1.5 rounded-full border border-white/10">
{[
{ id: 'home', label: 'Hub', icon: 'grid_view' },
{ id: 'demand_oracle', label: 'Demand', icon: 'shopping_bag' },
{ id: 'eta_truth', label: 'ETA Truth', icon: 'schedule' },
{ id: 'refund_oracle', label: 'Refund', icon: 'verified_user' },
{ id: 'dineout_sniper', label: 'Dineout', icon: 'restaurant' },
{ id: 'dispatch_map', label: 'Dispatch', icon: 'local_shipping' },
].map((tab) => (
<button
key={tab.id}
onClick={() => onOpenModule(tab.id)}
className={`px-4 py-1.5 rounded-full text-xs font-medium transition-all flex items-center gap-1.5 cursor-pointer ${
activeTab === tab.id
? 'bg-gradient-to-r from-[#FF3366] to-[#FF4D6D] text-white font-semibold shadow-md shadow-[#FF3366]/20'
: 'text-white/60 hover:text-white hover:bg-white/[0.06]'
}`}
>
<span className="material-symbols-outlined text-base">{tab.icon}</span>
<span>{tab.label}</span>
</button>
))}
</div>
{/* User Controls & Location */}
<div className="flex items-center gap-4">
<div className="hidden sm:flex items-center gap-2 px-3 py-1.5 bg-white/[0.05] rounded-full border border-white/10 text-xs text-white/80">
<span className="material-symbols-outlined text-[#FF4D6D] text-sm">location_on</span>
<span className="truncate max-w-[150px]">{selectedAddress?.tag || 'Patia, Bhubaneswar'}</span>
</div>
<button
onClick={onOpenOps}
className="px-4 py-2 rounded-full bg-white/[0.06] hover:bg-white/[0.12] border border-white/15 text-white text-xs font-bold transition-all flex items-center gap-1.5 cursor-pointer"
>
<span className="material-symbols-outlined text-sm text-[#FF4D6D]">admin_panel_settings</span>
<span>Ops Control</span>
</button>
<button
onClick={onOpenChat}
className="p-2 rounded-full bg-[#FF3366]/15 border border-[#FF3366]/30 text-[#FF4D6D] hover:bg-[#FF3366]/25 transition-all cursor-pointer relative"
title="AI Commerce Agent"
>
<span className="material-symbols-outlined text-lg">chat</span>
<span className="w-2 h-2 rounded-full bg-[#FF3366] absolute top-1 right-1 animate-ping"></span>
</button>
</div>
</div>
</header>
{/* Main Content Area */}
<main className="pt-24 pb-16 max-w-7xl mx-auto px-6 relative z-10">
{/* Editorial Hero Banner */}
<motion.div
initial={{ opacity: 0, y: 15 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4 }}
className="w-full mb-10 rounded-3xl p-8 bg-[#101018]/90 border border-white/10 backdrop-blur-2xl shadow-2xl relative overflow-hidden flex flex-col md:flex-row items-start md:items-center justify-between gap-6"
>
<div className="max-w-xl space-y-3">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#FF3366]/10 border border-[#FF3366]/30">
<span className="w-2 h-2 rounded-full bg-[#FF3366] animate-pulse"></span>
<span className="text-[10px] font-bold tracking-[0.2em] text-[#FF4D6D] uppercase">
HYPERFLOW 4.0 ACTIVE OPERATING SYSTEM
</span>
</div>
<h1 className="text-3xl sm:text-4xl font-serif font-bold text-white tracking-tight leading-snug">
Boutique Operations. <br />
<span className="italic font-serif text-transparent bg-clip-text bg-gradient-to-r from-[#FF3366] to-[#FF758F]">
Simplified.
</span>
</h1>
<p className="text-sm text-[#9A9AB0] font-light">
Live Swiggy MCP Passthrough · OpenMeteo Weather Telemetry · Tobit MLE Stockout Predictions.
</p>
</div>
<div className="flex flex-wrap items-center gap-3">
<button
onClick={() => onOpenModule('demand_oracle')}
className="px-6 py-3 bg-gradient-to-r from-[#FF3366] to-[#FF4D6D] text-white rounded-full font-semibold text-xs shadow-lg shadow-[#FF3366]/20 hover:opacity-95 transition-all flex items-center gap-2 cursor-pointer"
>
<span>Explore Demand Oracle</span>
<span className="material-symbols-outlined text-sm">arrow_forward</span>
</button>
<button
onClick={() => onOpenModule('eta_truth')}
className="px-6 py-3 bg-white/[0.05] border border-white/15 text-white rounded-full font-semibold text-xs hover:bg-white/[0.1] transition-all flex items-center gap-2 cursor-pointer"
>
<span className="text-[#FF4D6D]">✦</span>
<span>Launch ETA Truth</span>
</button>
</div>
</motion.div>
{/* Feature Modules Quick Bar (5 Cards) */}
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4 mb-12">
{[
{ id: 'demand_oracle', title: 'Demand Oracle', desc: 'Instamart Stockout Risk', icon: 'shopping_bag', color: '#FF3366' },
{ id: 'eta_truth', title: 'ETA Truth', desc: 'Live WebSocket Smoother', icon: 'schedule', color: '#00D4AA' },
{ id: 'refund_oracle', title: 'Refund Oracle', desc: 'FraudGuard Triage', icon: 'verified_user', color: '#6C63FF' },
{ id: 'dineout_sniper', title: 'Dineout Sniper', desc: 'Slot Fill Time Scorer', icon: 'restaurant', color: '#FFB800' },
{ id: 'dispatch_map', title: 'Dispatch Map', desc: 'Route Batch Optimizer', icon: 'local_shipping', color: '#00D4FF' }
].map((mod) => (
<div
key={mod.id}
onClick={() => onOpenModule(mod.id)}
className="bg-[#101018]/80 border border-white/10 hover:border-[#FF3366]/50 rounded-2xl p-5 backdrop-blur-xl transition-all hover:-translate-y-1 cursor-pointer group flex flex-col justify-between"
>
<div className="w-10 h-10 rounded-xl bg-white/[0.05] border border-white/10 group-hover:bg-[#FF3366]/15 flex items-center justify-center mb-3">
<span className="material-symbols-outlined text-xl transition-colors" style={{ color: mod.color }}>
{mod.icon}
</span>
</div>
<div>
<h4 className="text-sm font-bold text-white group-hover:text-[#FF4D6D] transition-colors">{mod.title}</h4>
<p className="text-[11px] text-white/50 font-light mt-0.5">{mod.desc}</p>
</div>
</div>
))}
</div>
{/* Featured Restaurants / Items Grid */}
<div className="space-y-6">
<div className="flex items-center justify-between">
<div>
<h2 className="text-2xl font-serif font-bold text-white tracking-tight">Curated Merchants & Products</h2>
<p className="text-xs text-white/50 font-light">Real-time availability synced with Swiggy MCP</p>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{(restaurants && restaurants.length > 0 ? restaurants : [
{ id: 'rest_01', name: 'Behrouz Biryani', cuisine: 'Royal North Indian · Biryani', rating: 4.8, distance: '1.8 km', time: '22 min', image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuB3O6h3kN5v2ZfZDd3Ufds1_PUUHBmlla4WShhsUOwN1BiWVty9aGs9k-ujSiY3HWg0c-a6yUVCpufZJTK3hqLopqOy-INM9HYG-SKcVE0PbA__mUudSLa2FZF4yeu1q6fwxpjVZXn7yNLyelP_KZmven-uKjmR8Q3bG2PkZi64JiSya_N0Zb1Ww0kf3A7LW34llf4b4dpiTff9GbejYkJFooJR4Slc4fs85sLnGz-kZjWnuFABxdtocK8oviRGW5vmkB6XF1IMU4YS' },
{ id: 'rest_02', name: 'Yoko Ono Gourmet Sushi', cuisine: 'Modern Japanese · Fresh Sashimi', rating: 4.9, distance: '2.4 km', time: '18 min', image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuCBY63vuIkeBp6l5cHYDUYAUxyfZjekeIUDrgoaWXdYWfRsIItON9yVcNgasVY5EVJ_z9UCEYE7ifS6es_em8GXuQSZjL4elMAOcYKY-mFqvK7XoIYiCdoO9fXcs76s27BFjIlZ-jibt94sXMKAMiW-HDhL8Fx6YgFDMjXCKJuqgQvL6f2QokApfLDSvnpgf5uRCpVCyjlevWvENzKb2pD1gJvWBrOj_kU8HsHYg8siO1GP2yGFdEgOS79jFlelYdFjbEs_cIizY-X6' },
{ id: 'rest_03', name: 'Carbon Grill Artisanal Burgers', cuisine: 'Gourmet Burgers · Craft Drinks', rating: 4.7, distance: '3.1 km', time: '25 min', image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuD9C62CkwFO1Ta65rOPGt_zkQb3NWBfpIVfhSCWsS173P7Hw1t8O2CFnA1Swhsh03BFAJeCU4v8zMcs2FtgfS9UKrkQ-pgIxmQV0atKwEY1VvIrOO2nqjJirHB5LtlEy7v2E23zmpz5QUROCmGsEwpUTOxc6-W7bqEnwZTpjlEj84W0_wRNkm3oiChRsbQBbdUsj6iQ4IQ8MjgCXDjvXHjIGyb2EehurUmG2rcFE5E_2NQqMXhnC7sZPl5JUl0b-89s8s1A5HghkpjV' }
]).map((r) => (
<div
key={r.id}
onClick={() => onSelectRestaurant(r)}
className="bg-[#101018]/90 border border-white/10 rounded-3xl overflow-hidden hover:border-[#FF3366]/40 transition-all cursor-pointer group shadow-xl"
>
<div className="h-44 relative overflow-hidden bg-white/5">
<img src={r.image} alt={r.name} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
<div className="absolute top-3 right-3 bg-black/70 backdrop-blur-md px-3 py-1 rounded-full text-xs font-mono font-bold text-amber-400 border border-white/10 flex items-center gap-1">
<span>★</span>
<span>{r.rating}</span>
</div>
</div>
<div className="p-5 space-y-2">
<h3 className="text-lg font-serif font-bold text-white group-hover:text-[#FF4D6D] transition-colors">{r.name}</h3>
<p className="text-xs text-white/50 font-light">{r.cuisine}</p>
<div className="pt-3 flex items-center justify-between border-t border-white/10 text-xs font-mono">
<span className="text-[#FF4D6D] font-bold">{r.time}</span>
<span className="text-white/40">{r.distance}</span>
</div>
</div>
</div>
))}
</div>
</div>
</main>
{/* Floating Action Button: Cart Trigger */}
{totalCartCount > 0 && (
<div className="fixed bottom-6 right-6 z-50">
<button
onClick={onOpenCheckout}
className="flex items-center gap-3 px-6 py-3.5 bg-gradient-to-r from-[#FF3366] to-[#FF4D6D] text-white rounded-full font-bold text-xs shadow-2xl shadow-[#FF3366]/40 hover:scale-105 active:scale-95 transition-all cursor-pointer"
>
<span className="material-symbols-outlined text-lg">shopping_cart</span>
<span className="uppercase tracking-widest">Cart • {totalCartCount} Items</span>
</button>
</div>
)}
</div>
);
};
export default DiscoveryHub;
|