import React, { useState, useMemo } from 'react';
import {
Search,
MapPin,
Star,
Filter,
ChevronRight,
ShoppingCart,
Store,
ArrowRight,
Sliders,
User,
MessageSquare,
CheckCircle,
HelpCircle,
X,
Mail,
Check,
Globe,
Truck,
CreditCard,
SlidersHorizontal,
ChevronDown,
FileText,
ShieldCheck,
Zap,
Info
} from 'lucide-react';
// ==========================================
// OFFICIAL LOGO CONFIGURATIONS (EXACT LINKS)
// ==========================================
const HEADER_LOGO_URL = "https://assets.cdn.filesafe.space/13TQZsUkQYrVV75sNi0I/media/6a5392d3708c41d4df28f4f2.jpeg";
const FOOTER_BADGE_URL = "https://assets.cdn.filesafe.space/13TQZsUkQYrVV75sNi0I/media/6a5392d3eada8c1f4587471c.png";
// Primary Horizontal Logo (Header & Hero)
const PrimaryLogo = ({ className = "h-11 sm:h-14 w-auto object-contain" }) => {
return (
);
};
// Specialized Shield Badge Logo (Footer & Trust Markers)
const FooterBadgeLogo = ({ className = "h-36 w-auto object-contain" }) => {
return (
);
};
// ==========================================
// MOCK DATA: STORES & PRODUCTS (UPDATED)
// ==========================================
const BRANDS = [
"Traxxas", "Axial", "Vanquish", "Element", "Furitek",
"Injora", "Boom Racing", "Hobbywing", "AGFRC", "Tamiya"
];
const STORES = [
{
id: "sassyturbo",
subdomain: "sassyturbo.rccart.ph",
name: "SassyTurbo Hobbies",
rating: 4.9,
reviewsCount: 142,
productCount: 48,
banner: "https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&q=80&w=1200",
logo: "🏎️",
location: "Quezon City, Metro Manila",
description: "The premier source of premium scale accessories, custom high-speed nitro options, and high-performance option parts in the Philippines.",
verified: true,
paymentMethods: ["GCash", "Maya", "BDO Bank Transfer", "COD"],
featuredBrands: ["Vanquish", "Injora", "Boom Racing"]
},
{
id: "hardcorehobbiesph",
subdomain: "hardcorehobbiesph.rccart.ph",
name: "HardcoreHobbiesPH",
rating: 4.7,
reviewsCount: 89,
productCount: 32,
banner: "https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=1200",
logo: "🦾",
location: "Mandaue City, Cebu",
description: "Fast shipping and absolute professional-grade performance electronics. Hardcore motors, speed controllers, and high-torque competition servos.",
verified: true,
paymentMethods: ["GCash", "Maya", "BPI", "COD Available"],
featuredBrands: ["Hobbywing", "AGFRC", "Furitek"]
},
{
id: "myblue",
subdomain: "myblue.rccart.ph",
name: "MyBlue Hobby Shop",
rating: 4.8,
reviewsCount: 210,
productCount: 65,
banner: "https://images.unsplash.com/photo-1532601224476-15c79f2f7a51?auto=format&fit=crop&q=80&w=1200",
logo: "🔵",
location: "Davao City, Davao",
description: "Your ultimate scale adventure and crawling hub down south. Authorized stockist of Traxxas, Axial, and custom chassis assemblies.",
verified: true,
paymentMethods: ["GCash", "Palawan Express", "Metrobank", "COD"],
featuredBrands: ["Traxxas", "Axial", "Element"]
}
];
const PRODUCTS = [
{
id: "prd-1",
title: "Vanquish VRD Carbon Kit",
price: 39995,
category: "RC Crawlers",
brand: "Vanquish",
scale: "1/10",
vehicleType: "Crawler",
stock: 3,
sellerId: "sassyturbo",
rating: 5.0,
reviews: 18,
image: "https://images.unsplash.com/photo-1594787318286-3d835c1d207f?auto=format&fit=crop&q=80&w=600",
description: "The VRD Carbon Kit is a competitive-focused platform designed by Vanquish Products. Utilizing state-of-the-art carbon fiber frame rails and high-clearance portals to deliver unparalleled climbing ability.",
specifications: {
"Chassis": "Carbon Fiber Rails",
"Axles": "VFD Portal Axles",
"Transmission": "VFD Twin Transmission",
"Scale": "1/10 Scale",
"Build Type": "Kit (Assembly Required)"
}
},
{
id: "prd-2",
title: "Furitek Titan Brushless System for TRX-4M",
price: 15995,
category: "Electronics",
brand: "Furitek",
scale: "1/18",
vehicleType: "Crawler",
stock: 5,
sellerId: "hardcorehobbiesph",
rating: 4.9,
reviews: 24,
image: "https://images.unsplash.com/photo-1517059224940-d4af9eec41b7?auto=format&fit=crop&q=80&w=600",
description: "Premium brushless upgrade for ultra-smooth power delivery and micro control. Ultimate low-speed crawling torque combined with blistering wheel speed when you need to bump it up.",
specifications: {
"Motor Type": "Brushless Outrunner",
"ESC Rating": "30A constant, support 2-3S LiPo",
"Application": "Traxxas TRX-4M Upgrade",
"App Control": "Bluetooth Connectivity via Furitek App"
}
},
{
id: "prd-3",
title: "Hobbywing QuicRun Fusion Pro 2300KV",
price: 5995,
category: "Motors",
brand: "Hobbywing",
scale: "1/10",
vehicleType: "Universal",
stock: 12,
sellerId: "hardcorehobbiesph",
rating: 4.8,
reviews: 41,
image: "https://images.unsplash.com/photo-1558089687-f282ffcbd1d5?auto=format&fit=crop&q=80&w=600",
description: "The best 2-in-1 motor/ESC combination ever created for scale crawlers. Saves incredible weight and space in your chassis while offering FOC (Field Oriented Control) for precision descent braking.",
specifications: {
"KV Rating": "2300KV",
"Input Voltage": "2-3S LiPo",
"Waterproof": "Yes (IP67 Grade)",
"Length": "58mm",
"Shaft Diameter": "3.175mm"
}
},
{
id: "prd-4",
title: "AGFRC 40kg Waterproof High-Torque Servo",
price: 3495,
category: "Servos",
brand: "AGFRC",
scale: "1/10",
vehicleType: "Universal",
stock: 8,
sellerId: "hardcorehobbiesph",
rating: 4.7,
reviews: 14,
image: "https://images.unsplash.com/photo-1504624268593-a6641ab3430a?auto=format&fit=crop&q=80&w=600",
description: "Extremely powerful, steel geared, full aluminum case high-torque digital servo. Programable options available with native direct power support up to 8.4V.",
specifications: {
"Torque": "40kg-cm @ 8.4V",
"Gears": "Hardened Steel",
"Case": "Full CNC Aluminum Case",
"Operating Voltage": "4.8V to 8.4V"
}
},
{
id: "prd-5",
title: "Boom Racing Krait 1.9 Beadlock Wheels (4pcs)",
price: 4995,
category: "Wheels",
brand: "Boom Racing",
scale: "1/10",
vehicleType: "Crawler",
stock: 2,
sellerId: "sassyturbo",
rating: 4.9,
reviews: 9,
image: "https://images.unsplash.com/photo-1486006920555-c77dce18193b?auto=format&fit=crop&q=80&w=600",
description: "Premium CNC machined beadlock wheels featuring the classic dual scale profile and heavy-duty locking rings to make tire mounting completely painless.",
specifications: {
"Size": "1.9 Inch",
"Type": "True Beadlock",
"Material": "CNC Aluminum",
"Quantity": "Set of 4 Wheels"
}
},
{
id: "prd-6",
title: "Axial SCX10 III Jeep CJ-7 RTR",
price: 34500,
category: "RC Crawlers",
brand: "Axial",
scale: "1/10",
vehicleType: "Crawler",
stock: 4,
sellerId: "myblue",
rating: 4.8,
reviews: 32,
image: "https://images.unsplash.com/photo-1594787318286-3d835c1d207f?auto=format&fit=crop&q=80&w=600",
description: "A gorgeous throwback body style coupled with the ultra-capable modern SCX10 III platform. Fully loaded with replica detailing, lights, and fully functioning components right out of the box.",
specifications: {
"Type": "Ready-to-Run (RTR)",
"Motor": "Brushed 35T Motor",
"ESC": "Spektrum 40A Smart ESC",
"Scale": "1/10 Scale",
"Radio System": "Spektrum SLT3 Included"
}
},
{
id: "prd-7",
title: "Traxxas Slash 4X4 VXL Brushless Truck",
price: 28995,
category: "RC Trucks",
brand: "Traxxas",
scale: "1/10",
vehicleType: "Short Course",
stock: 6,
sellerId: "myblue",
rating: 4.9,
reviews: 57,
image: "https://images.unsplash.com/photo-1594787318286-3d835c1d207f?auto=format&fit=crop&q=80&w=600",
description: "The gold standard of high-speed short course racing. Powered by Velineon brushless power to reach speeds in excess of 60+ MPH over dirt, rocks, mud and snow.",
specifications: {
"Top Speed": "60+ MPH (With 3S LiPo)",
"Drivetrain": "Shaft-Driven 4WD",
"Electronics": "Waterproof VXL-3s system",
"Battery Config": "Traxxas iD Equipped"
}
}
];
export default function App() {
const [currentScreen, setCurrentScreen] = useState('home');
const [selectedProductId, setSelectedProductId] = useState('');
const [selectedStoreId, setSelectedStoreId] = useState('');
const [searchQuery, setSearchQuery] = useState('');
const [cart, setCart] = useState([]);
const [notification, setNotification] = useState(null);
const [messageModal, setMessageModal] = useState({ open: false, storeName: '', subject: '' });
const [sellerApplication, setSellerApplication] = useState({
storeName: '',
ownerName: '',
email: '',
phone: '',
location: '',
preferredPayment: 'GCash',
brands: '',
submitted: false
});
// Filters
const [shopCategory, setShopCategory] = useState('All');
const [shopBrand, setShopBrand] = useState('All');
const [shopPriceRange, setShopPriceRange] = useState(50000);
const [shopScale, setShopScale] = useState('All');
const [shopVehicleType, setShopVehicleType] = useState('All');
const [shopSeller, setShopSeller] = useState('All');
const [shopLocation, setShopLocation] = useState('All');
const [sellerSearch, setSellerSearch] = useState('');
const [sellerLocation, setSellerLocation] = useState('All');
const [sellerBrand, setSellerBrand] = useState('All');
const showNotification = (message) => {
setNotification(message);
setTimeout(() => setNotification(null), 3000);
};
const formatPHP = (num) => {
return new Intl.NumberFormat('en-PH', {
style: 'currency',
currency: 'PHP',
minimumFractionDigits: 0
}).format(num);
};
const addToCart = (product, quantity = 1) => {
setCart(prevCart => {
const existing = prevCart.find(item => item.product.id === product.id);
if (existing) {
showNotification(`Updated quantity of ${product.title} in cart!`);
return prevCart.map(item =>
item.product.id === product.id ? { ...item, quantity: item.quantity + quantity } : item
);
}
showNotification(`${product.title} added to cart!`);
return [...prevCart, { product, quantity }];
});
};
const removeFromCart = (productId) => {
setCart(prevCart => prevCart.filter(item => item.product.id !== productId));
showNotification("Item removed from cart.");
};
const clearCart = () => {
setCart([]);
showNotification("Split checkout payments routed directly to sellers.");
};
const filteredProducts = useMemo(() => {
return PRODUCTS.filter(p => {
const matchesSearch = p.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
p.brand.toLowerCase().includes(searchQuery.toLowerCase()) ||
p.category.toLowerCase().includes(searchQuery.toLowerCase());
const matchesCategory = shopCategory === 'All' || p.category === shopCategory;
const matchesBrand = shopBrand === 'All' || p.brand === shopBrand;
const matchesPrice = p.price <= shopPriceRange;
const matchesScale = shopScale === 'All' || p.scale === shopScale;
const matchesVehicle = shopVehicleType === 'All' || p.vehicleType === shopVehicleType;
return matchesSearch && matchesCategory && matchesBrand && matchesPrice && matchesScale && matchesVehicle;
});
}, [searchQuery, shopCategory, shopBrand, shopPriceRange, shopScale, shopVehicleType]);
const filteredSellers = useMemo(() => {
return STORES.filter(s => {
const matchesSearch = s.name.toLowerCase().includes(sellerSearch.toLowerCase()) ||
s.description.toLowerCase().includes(sellerSearch.toLowerCase());
const matchesLocation = sellerLocation === 'All' || s.location.includes(sellerLocation);
const matchesBrand = sellerBrand === 'All' || s.featuredBrands.includes(sellerBrand);
return matchesSearch && matchesLocation && matchesBrand;
});
}, [sellerSearch, sellerLocation, sellerBrand]);
const openProductDetail = (id) => {
setSelectedProductId(id);
setCurrentScreen('product-detail');
window.scrollTo({ top: 0, behavior: 'smooth' });
};
const openStorefront = (storeId) => {
setSelectedStoreId(storeId);
setCurrentScreen('storefront');
window.scrollTo({ top: 0, behavior: 'smooth' });
};
const selectHomeCategory = (cat) => {
setShopCategory(cat);
setCurrentScreen('shop');
window.scrollTo({ top: 0, behavior: 'smooth' });
};
const handleSellerApply = (e) => {
e.preventDefault();
setSellerApplication(prev => ({ ...prev, submitted: true }));
showNotification("Seller application submitted successfully!");
};
return (
{/* Toast Alert Banner */}
{notification && (
{notification}
)}
{/* Direct Contact Modal */}
{messageModal.open && (
Message {messageModal.storeName}
)}
{/* HEADER SECTION */}
{/* Banner Announcement */}
The Philippines' Central RC Hub — Buy directly from verified local shops!
{/* Header Branding Logo */}
{ setCurrentScreen('home'); setSearchQuery(''); }}>
{/* Navigation Links */}
{/* Cart & Utility Row */}
{/* MAIN CONTAINER */}
{/* SCREEN: HOME */}
{currentScreen === 'home' && (
{/* HERO BANNER SECTION */}
PH's Specialized RC Marketplace
{/* Primary Hero Logo Alignment */}
One Marketplace
Everything RC
Connecting RC enthusiasts, hobby shops, and sellers nationwide.
{/* CTA Row */}
{/* SEARCH COMPONENT */}
{/* SCROLLING BRAND BAR */}
Shop by Leading RC Brands
setCurrentScreen('shop')}>View all brands →
{BRANDS.concat(BRANDS).map((brand, idx) => (
{
setShopBrand(brand);
setCurrentScreen('shop');
}}
className="text-neutral-400 hover:text-neutral-900 font-black text-xl tracking-tight cursor-pointer transition-colors px-4 py-1"
>
★ {brand.toUpperCase()}
))}
{/* SHOP BY CATEGORY GRID */}
Shop by Category
Configure scale crawler option parts and high-voltage electronics directly.
{[
{ name: "RC Crawlers", icon: "⛰️", count: "24 items" },
{ name: "RC Cars", icon: "🏎️", count: "11 items" },
{ name: "RC Trucks", icon: "🛞", count: "16 items" },
{ name: "Electronics", icon: "⚡", count: "32 items" },
{ name: "Motors", icon: "⚙️", count: "18 items" },
{ name: "Servos", icon: "🦾", count: "12 items" }
].map((cat, idx) => (
selectHomeCategory(cat.name)}
className="bg-white hover:bg-neutral-900 hover:text-white p-6 rounded-2xl border border-neutral-200 hover:border-neutral-900 cursor-pointer transition-all group text-center flex flex-col justify-between items-center h-40 shadow-sm"
>
{cat.icon}
))}
{/* STORE HIGHLIGHTS */}
Featured Verified Stores
{STORES.map((store) => (
{store.subdomain}
{store.logo}
{store.name}
{store.verified && }
{store.location}
{store.paymentMethods[0]}
))}
{/* BEST SELLING PRODUCTS */}
Marketplace Best Sellers
{PRODUCTS.map((p) => {
const seller = STORES.find(s => s.id === p.sellerId);
return (
openProductDetail(p.id)}>
{p.scale} Scale
{p.brand}
{p.title}
{p.rating} ({p.reviews})
Price
{formatPHP(p.price)}
{seller && (
openStorefront(seller.id)}>
{seller.logo}
SOLD BY
{seller.name}
{seller.verified && }
)}
);
})}
{filteredProducts.map(p => (
openProductDetail(p.id)} />
{p.brand}
openProductDetail(p.id)}>{p.title}
{formatPHP(p.price)}
))}
)}
{/* SCREEN: SELLER DIRECTORY */}
{currentScreen === 'sellers' && (
Verified Seller Directory
{filteredSellers.map((store) => (
{store.logo}
{store.name}
{store.verified && }
{store.location}
{store.description}
Subdomain: {store.subdomain}
))}
)}
{/* SCREEN: STOREFRONT */}
{currentScreen === 'storefront' && (
(() => {
const store = STORES.find(s => s.id === selectedStoreId);
if (!store) return Seller not found.
;
const sellerProducts = PRODUCTS.filter(p => p.sellerId === store.id);
return (
{store.subdomain}
{store.logo}
{store.name}
{store.location}
{sellerProducts.map(p => (
{p.title}
{formatPHP(p.price)}
))}
);
})()
)}
{/* SCREEN: PRODUCT DETAIL */}
{currentScreen === 'product-detail' && (
(() => {
const product = PRODUCTS.find(p => p.id === selectedProductId);
if (!product) return Product not found.
;
const seller = STORES.find(s => s.id === product.sellerId);
return (
{product.brand}
{product.title}
{formatPHP(product.price)}
{product.description}
{seller && (
)}
);
})()
)}
{/* SCREEN: BECOME A SELLER */}
{currentScreen === 'become-seller' && (
)}
{/* SCREEN: CART */}
{currentScreen === 'cart' && (
Your Cart
{cart.length === 0 ? (
Your shopping cart is currently empty.
) : (
{cart.map(item => (
{item.product.title}
Sold by {STORES.find(s => s.id === item.product.sellerId)?.name || "Partner Store"}
{formatPHP(item.product.price)}
))}
Total Purchase Summary
Grand Total:
{formatPHP(cart.reduce((sum, item) => sum + (item.product.price * item.quantity), 0))}
)}
)}
{/* FOOTER SECTION */}
);
}