// components.jsx — Shared UI components const { useState, useEffect, useRef, useMemo } = React; const fmt = (n) => "₹" + Math.round(n).toLocaleString("en-IN"); // ---------- ICONS ---------- const Icon = ({ name, size = 20, ...rest }) => { const paths = { leaf: , mortar: , heart: , shield: , pin: , pot: , bag: , user: , search: , menu: , close: , plus: , minus: , arrow: , check: , star: , whatsapp: , truck: , flame: , chat: , mail: , phone: , insta: , fb: , }; return ( {paths[name]} ); }; const Stars = ({ rating = 5, size = 14 }) => { const full = Math.floor(rating); return ( {[1,2,3,4,5].map(i => ( ))} ); }; // ---------- BRAND MARK ---------- const BrandMark = ({ size = 38 }) => (
Shudh Jain
); // ---------- HEADER ---------- const Header = ({ goto, cartCount, openCart }) => { const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { document.body.style.overflow = menuOpen ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [menuOpen]); const navTo = (page) => { setMenuOpen(false); goto(page); }; return (
setMenuOpen(false)} style={{height:'100vh'}}>
); }; // ---------- FOOTER ---------- const Footer = ({ goto }) => ( ); // ---------- TRUST STRIP ---------- const TrustStrip = () => (
{[ "100% Jain — No Onion, No Garlic", "Free Shipping Across India", "No Preservatives · No Artificial Colours", "Small Batch · Made in Indore", "FSSAI Certified Kitchen", "5% OFF on all Prepaid Orders", "100% Jain — No Onion, No Garlic", "Free Shipping Across India", "No Preservatives · No Artificial Colours", "Small Batch · Made in Indore", "FSSAI Certified Kitchen", "5% OFF on all Prepaid Orders", ].map((t,i)=>({t}))}
); // ---------- PRODUCT CARD ---------- const ProductCard = ({ product, goto, onAdd }) => { const [selectedVariant, setSelectedVariant] = useState(product.variants[0]); const minPrice = Math.min(...product.variants.map(v=>v.price)); return (
goto('product-'+product.id)} style={{cursor:'pointer'}}> {product.name} {product.tag && {product.tag}}
{e.preventDefault();goto('product-'+product.id);}} style={{cursor:'pointer',textDecoration:'none'}}>{product.name}
{product.tagline}
({product.reviewCount})
{product.variants.length > 1 && (
{product.variants.map((v,i)=>{ const isSel = selectedVariant.weight === v.weight; return ( ); })}
)} +5% off on prepaid orders
{fmt(selectedVariant.price)}
); }; // ---------- WHY US ---------- const WhyUs = () => { const items = [ { badge: 'assets/badge-jain-v3.png', title: '100% Jain', sub: 'No onion, no garlic. Pure Jain recipe.' }, { badge: 'assets/badge-no-preservatives-v3.png', title: 'No Preservatives', sub: 'No artificial colours or chemicals.' }, { badge: 'assets/badge-homemade-v2.png', title: 'Homemade Taste', sub: 'Ghar jaisa swad, har bite mein.' }, { badge: 'assets/badge-small-batch-v3.png', title: 'Small Batch', sub: 'Freshly prepared in small quantities.' }, { badge: 'assets/badge-premium-v3.png', title: 'Premium Ingredients', sub: 'Carefully selected, hand-pounded spices.' }, { badge: 'assets/badge-authentic-indori-v3.png', title: 'Authentic Indori', sub: 'Made in Indore, the original way.' }, ]; return (
{items.map((it,i)=>(
{it.badge ? (
{it.title}
) : (
)}
{it.title}
{it.sub}
))}
); }; // ---------- WHATSAPP FLOATING WIDGET ---------- const WhatsAppFloat = ({ phone = "918770167063", message = "Hi! I'd like to know more about Shudh Jain achar." }) => { const [open, setOpen] = useState(false); const url = "https://wa.me/" + phone + "?text=" + encodeURIComponent(message); return (
{open && (
Shudh Jain
Typically replies in minutes
Namaste! 🙏 How can we help you today? Ask us about our Jain achar, Indori Jeeravan, or bulk orders.
Start Chat
)}
); }; // expose Object.assign(window, { Icon, Stars, BrandMark, Header, Footer, TrustStrip, ProductCard, WhyUs, WhatsAppFloat, fmt });