// Shared components: Icons, Header, Footer, ProductCard const { useState, useEffect, useRef, useMemo, useCallback } = React; // ─────── Icons ─────── const Icon = { Search: ({ size = 18 }) => ( ), Heart: ({ size = 20, filled = false }) => ( ), Bag: ({ size = 18 }) => ( ), Menu: ({ size = 22 }) => ( ), X: ({ size = 22 }) => ( ), Whatsapp: ({ size = 20 }) => ( ), Instagram: ({ size = 20 }) => ( ), Mail: ({ size = 20 }) => ( ), Arrow: ({ size = 16 }) => ( ), ChevronDown: ({ size = 14 }) => ( ), }; // ─────── Helpers ─────── const fmtPrice = (n, lang) => { const num = new Intl.NumberFormat(lang === 'ar' ? 'ar-IQ' : 'en-US').format(n); const cur = lang === 'ar' ? 'د.ع' : 'IQD'; return lang === 'ar' ? `${num} ${cur}` : `${num} ${cur}`; }; const waUrl = (msg) => `https://wa.me/${window.WA_NUMBER || '9647700000000'}?text=${encodeURIComponent(msg)}`; // ─────── Toast ─────── function useToast() { const [msg, setMsg] = useState(null); const show = (m) => { setMsg(m); clearTimeout(window._tt); window._tt = setTimeout(() => setMsg(null), 1800); }; const node = msg ?
{msg}
: null; return [node, show]; } // ─────── Reveal hook ─────── function useReveal() { useEffect(() => { const els = document.querySelectorAll('.reveal'); const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); }); }, { threshold: 0.1 }); els.forEach(el => io.observe(el)); return () => io.disconnect(); }); } // ─────── Header ─────── function Header({ lang, setLang, page, navigate, wishlistCount, onMenu }) { const [scrolled, setScrolled] = useState(false); const t = I18N[lang]; useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 10); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); return ( <>
{[...t.announce, ...t.announce].map((a, i) => ( {a} ))}
); } // ─────── Mobile drawer ─────── function MobileDrawer({ open, onClose, lang, setLang, navigate }) { const t = I18N[lang]; const go = (p) => { onClose(); navigate(p); }; return ( <>
); } // ─────── Footer ─────── function Footer({ lang, navigate }) { const t = I18N[lang]; return ( ); } // ─────── Product Card ─────── function ProductCard({ product, lang, variant = 'classic', onClick, wishlist, toggleWish, onWaOrder }) { const t = I18N[lang]; const isWished = wishlist.includes(product.id); return (
onClick(product)}>
{product.name[lang]}
{product.isNew && {lang === 'ar' ? 'جديد' : 'New'}} {product.oldPrice && {lang === 'ar' ? 'تخفيض' : 'Sale'}}
{ e.stopPropagation(); onWaOrder(product); }}> {t.product.addToCart}
{variant !== 'minimal' && (
{product.colors.slice(0, 4).map((c, i) => ( ))}
)}
{product.name[lang]}
{CATEGORIES.find(c => c.id === product.category)?.[lang]}
{product.oldPrice && {fmtPrice(product.oldPrice, lang)}} {fmtPrice(product.price, lang)}
); } // ─────── Floating WhatsApp button ─────── function FloatingWA({ lang }) { const msg = lang === 'ar' ? 'مرحباً، أرغب بالاستفسار عن منتجاتكم' : 'Hi, I want to ask about your products'; return ( ); } Object.assign(window, { Icon, fmtPrice, waUrl, useToast, useReveal, Header, MobileDrawer, Footer, ProductCard, FloatingWA, });