// Pages for wridachic young const { useState: u2S, useEffect: u2E, useMemo: u2M } = React; // ======== HOME ======== const HomeYoung = ({ lang, onNav, onProduct, wishlist, toggleWish }) => { const t = WC_TR[lang]; const year = 2026; return (
{/* ── HERO ── */}
{/* Text side */}
{lang === 'fr' ? `Printemps ${year}` : `ربيع ${year}`} / {lang === 'fr' ? 'Nouveau chaque semaine' : 'جديد كل أسبوع'}

{lang === 'fr' ? ( <>Le style marocain
au naturel. ) : ( <>أناقة مغربية
أصيلة. )}

{lang === 'fr' ? 'Tenues de prière, robes & essentiels — dès 149 MAD, livrés partout au Maroc en 2–5 jours.' : 'ملابس صلاة، فساتين وأساسيات — ابتداءً من 149 درهم، توصيل في كل المغرب.'}

{/* Stats */}
{[ { n: '150+', l: lang === 'fr' ? 'Styles disponibles' : 'ستايل متاح' }, { n: '48h', l: lang === 'fr' ? 'Livraison express' : 'توصيل سريع' }, { n: '★ 4.9', l: lang === 'fr' ? 'Avis clientes' : 'تقييم الزبونات' }, ].map((s, i) => (
{s.n} {s.l}
))}
{/* Collage side */}
{lang === 'fr' ? '✦ dès 149 MAD' : '✦ من 149 درهم'}
{lang === 'fr' ? 'COD partout ✓' : 'دفع عند الاستلام ✓'}
{/* ── PROMISE TICKER ── */}
{[...Array(4)].map((_, k) => ( ✦ {lang === 'fr' ? 'Livraison partout au Maroc' : 'توصيل في كل المغرب'} ✦ {lang === 'fr' ? 'Paiement à la livraison' : 'الدفع عند التسليم'} ✦ {lang === 'fr' ? 'Tenues de prière' : 'ملابس الصلاة'} ✦ {lang === 'fr' ? 'Retours 14 jours' : 'إرجاع 14 يوماً'} ✦ Made in 🇲🇦 ))}
{/* ── SHOP BY MOOD ── */}
01 / {lang === 'fr' ? 'catégories' : 'أقسام'}

{lang === 'fr' ? 'Shop by mood' : 'تسوقي حسب المود'}

onNav('shop')}>{lang === 'ar' ? '← كل المتجر' : '→ Voir tout'}
{/* Main — Espace Prière */}
onNav('prayer')}>
PRIÈRE / 01
{lang === 'fr' ? 'Prière' : 'الصلاة'}
{lang === 'fr' ? 'Jilbab · Khimar · Ensemble' : 'جلباب · خمار · طقم صلاة'}
{lang === 'fr' ? 'Dès 149 MAD ✦' : 'من 149 درهم ✦'}
{/* Side — Robes & Ensembles + Denim */}
onNav('shop')}>
ROBES / 02
{lang === 'fr' ? 'Robes & Ensembles' : 'فساتين وأطقم'}
onNav('shop')}>
DENIM / 03
{lang === 'fr' ? 'Denim' : 'جينز'}
{/* ── BEST SELLERS ── */}
02 / {lang === 'fr' ? 'tendance' : 'الأكثر طلباً'}

{lang === 'fr' ? 'Coups de cœur' : 'الأكثر طلباً'}

onNav('shop')}>{lang === 'ar' ? '← ' : '→ '}{lang === 'fr' ? 'Voir tout' : 'كل المتجر'}
{WC_PRODUCTS.slice(0, 8).map((p, i) => ( ))}
{/* ── BIG TICKER ── */}
{[...Array(3)].map((_, k) => ( wridachic {' '}✦{' '}{lang === 'fr' ? 'marocaine & fière' : 'مغربية وفخورة'} {' '}✦{' '} ))}
{/* ── ESPACE PRIÈRE FEATURE ── */}
{lang === 'fr' ? 'Élégance & beauté ✦' : 'أناقة وجمال ✦'}
{lang === 'fr' ? 'Espace prière' : 'ملابس الصلاة'}

{lang === 'fr' ? <>La prière
mérite la
beauté. : <>الصلاة تستحق
الأجمل.}

{lang === 'fr' ? 'Jilbabs, khimars & ensembles de prière pensés pour être confortables, couvrants et élégants. Dès 149 MAD.' : 'جلابيب، خمارات وطقم صلاة مصممة لتكون مريحة، محتشمة وجميلة. ابتداءً من 149 درهم.'}

{/* ── COMMUNITY ── */}
03 / community

#wridachic

→ @wridachic
{['rose', 'clay', 'mint', 'lime', 'sky', 'ink'].map((tint, i) => (
))}
); }; // ======== SHOP ======== const ShopYoung = ({ lang, onProduct, wishlist, toggleWish, initialCat }) => { const t = WC_TR[lang]; const [cat, setCat] = u2S(initialCat || 'all'); const [sort, setSort] = u2S('featured'); const filtered = u2M(() => { let l = WC_PRODUCTS.filter(p => cat === 'all' || p.cat === cat); if (sort === 'price-asc') l = [...l].sort((a, b) => a.price - b.price); if (sort === 'price-desc') l = [...l].sort((a, b) => b.price - a.price); return l; }, [cat, sort]); const cats = [ { id: 'all', name: lang === 'fr' ? 'Tout' : 'الكل', nameAr: 'الكل' }, ...WC_CATEGORIES, ]; return (
{/* Header */}
/ {lang === 'fr' ? 'boutique' : 'المتجر'} /

{lang === 'fr' ? 'La boutique.' : 'المتجر.'}

{filtered.length} {lang === 'fr' ? 'articles' : 'قطعة'}
{/* Category filters */}
{cats.map((c) => ( ))}
{filtered.map((p, i) => ( ))}
); }; // ======== PRODUCT DETAIL ======== const PDetailYoung = ({ lang, product, onBack, onAddToCart, onBuyNow, onProduct, wishlist, toggleWish }) => { const t = WC_TR[lang]; const [size, setSize] = u2S('M'); const [color, setColor] = u2S(product.colors[0]); const [qty, setQty] = u2S(1); const [main, setMain] = u2S(0); const [added, setAdded] = u2S(false); const name = lang === 'fr' ? product.name : product.nameAr; const related = WC_PRODUCTS.filter(p => p.cat === product.cat && p.id !== product.id).slice(0, 4); return (
{/* Breadcrumb */}
/ {lang === 'fr' ? 'boutique' : 'المتجر'} {' / '}{WC_CATEGORIES.find(c => c.id === product.cat)?.[lang === 'fr' ? 'name' : 'nameAr']} {' / '}{name}
{/* Images */}
{product.imgFiles ? ( <>
{product.imgFiles.map((src, i) => ( ))}
{lang
) : ( <>
{[0, 1, 2, 3].map(i => ( ))}
)}
{/* Info */}
{product.tag === 'new' && NOUVEAU ✦} {product.tag === 'sale' && SOLDE −{Math.round((1 - product.price / product.oldPrice) * 100)}%}

{name}

★★★★★ 4.9 · 124 {lang === 'fr' ? 'avis' : 'تقييم'}
{product.price} MAD {product.oldPrice && {product.oldPrice} MAD}

{lang === 'fr' ? 'Coupe soigneuse, tissu de qualité, finitions artisanales. Une pièce qui traverse les saisons.' : 'قصّة محكمة، قماش عالي الجودة، تشطيب يدوي. قطعة تدوم عبر المواسم.'}

{/* Color */}
{t.product.color}
{product.colors.map(c => (
{/* Size */}
{t.product.size} {t.product.sizeGuide}
{['XS','S','M','L','XL','XXL'].map(s => ( ))}
{/* Qty + Add */}
{qty}
{/* Badges */}
{[ { ic: 'truck', l: t.product.delivery }, { ic: 'shield', l: t.product.cod }, { ic: 'refresh', l: t.product.return }, ].map((it, i) => (
{it.l}
))}
{related.length > 0 && (
/ {lang === 'fr' ? 'vous aimerez aussi' : 'قد يعجبك'}

{lang === 'fr' ? 'Dans le même style' : 'في نفس الأسلوب'}

{related.map((p, i) => ( ))}
)}
); }; // ======== CART ======== const CartYoung = ({ lang, cart, updateQty, removeItem, onCheckout, onContinue }) => { const t = WC_TR[lang]; const subtotal = cart.reduce((s, i) => s + i.price * i.qty, 0); const delivery = subtotal > 500 ? 0 : 35; const total = subtotal + delivery; if (cart.length === 0) return (
🛍️

{t.cart.empty}

{lang === 'fr' ? 'Découvre nos collections ↓' : 'اكتشفي مجموعاتنا ↓'}

); return (

{t.cart.title} ({cart.length})

{cart.map((item, i) => (
{lang === 'fr' ? item.name : item.nameAr}
{item.size} ·
{item.qty}
{item.price * item.qty} MAD
))}
); }; // ======== CHECKOUT ======== const CheckoutYoung = ({ lang, cart, onSuccess, user }) => { const t = WC_TR[lang]; const [step, setStep] = u2S(1); const [payment, setPayment] = u2S('cod'); const [form, setForm] = u2S({ fullName: '', phone: '', email: '', address: '', city: 'Casablanca' }); const [saving, setSaving] = u2S(false); const [orderNum, setOrderNum] = u2S(''); const subtotal = cart.reduce((s, i) => s + i.price * i.qty, 0); const delivery = subtotal > 500 ? 0 : 35; const total = subtotal + delivery; const placeOrder = async () => { setSaving(true); const num = 'WC-' + (Math.floor(Math.random() * 900000) + 100000); setOrderNum(num); const itemsData = cart.map(it => ({ name: lang === 'ar' ? (it.nameAr || it.name) : it.name, qty: it.qty, size: it.size, color: it.color, price: it.price, })); try { const payload = { order_number: num, status: 'nouveau', full_name: form.fullName, phone: form.phone, email: form.email, address: form.address, city: form.city, payment, subtotal, delivery, total, items: itemsData, lang, }; if (user) payload.user_id = user.id; await window._sb.from('orders').insert(payload); } catch(e) { console.error('Supabase:', e); } setSaving(false); setStep(4); }; if (step === 4) return (
✨

{t.checkout.success}

{t.checkout.successDesc}

{lang === 'fr' ? 'Numéro de commande' : 'رقم الطلب'}
{orderNum}
{total} MAD · {payment === 'cod' ? t.checkout.cod : t.checkout.cib}
); return (

{t.checkout.title}

{/* Steps — only 2 now (shipping + review, payment forcé COD) */}
{[t.checkout.shipping, t.checkout.review].map((s, i) => { const stepIdx = i === 0 ? 1 : 3; const passed = step > stepIdx; const active = step === stepIdx; return (
{passed ? : `0${i + 1}`}
{s} {i < 1 && }
); })}
{step === 1 && (

{t.checkout.shipping}

{['fullName','phone','email','address'].map(f => { const required = f !== 'email'; return (
setForm({ ...form, [f]: e.target.value })} style={{ marginTop: 4 }} type={f === 'email' ? 'email' : f === 'phone' ? 'tel' : 'text'} required={required} />
); })}
{(() => { const valid = form.fullName.trim() && /^[0-9]{9,10}$/.test(form.phone.trim()) && form.address.trim() && form.city.trim(); return ( <> {!valid && (form.fullName || form.phone || form.address) && (

{lang === 'fr' ? '⚠ Remplis tous les champs obligatoires (téléphone valide).' : '⚠ كملي جميع الحقول الإجبارية (رقم هاتف صحيح).'}

)} ); })()}
)} {step === 3 && (

{t.checkout.review}

{t.checkout.shipping}
{form.fullName || '—'}
{form.address || '—'}, {form.city} · {form.phone || '—'}
{lang === 'fr' ? 'Paiement' : 'الدفع'}
{t.checkout.cod}
)}
); }; // ======== CAFTANS ======== const CaftanYoung = ({ lang, onProduct, wishlist, toggleWish }) => { const items = WC_PRODUCTS.filter(p => p.cat === 'caftans'); return (
{lang === 'fr' ? 'Mariage & cérémonies ✦' : 'أعراس ومناسبات ✦'}

{lang === 'fr' ? <>caftans
& co. : <>قفاطين
للعرس}

{lang === 'fr' ? 'Takchitas, djellabas & abayas pour la femme qui veut briller avec élégance.' : 'تكشيطات، جلابيب وعبايات لبنت تتميز بأناقة وجمال.'}

01 / {lang === 'fr' ? 'collection' : 'مجموعة'}

{lang === 'fr' ? 'Toute la collection' : 'كل المجموعة'}

{items.map((p, i) => ( ))}
); }; // ======== ESPACE PRIÈRE ======== const PrayerYoung = ({ lang, onProduct, wishlist, toggleWish }) => { const items = WC_PRODUCTS.filter(p => p.cat === 'prayer'); return (
{lang === 'fr' ? 'Modestie & élégance ✦' : 'حشمة وأناقة ✦'}

{lang === 'fr' ? <>Espace
prière : <>ملابس
الصلاة}

{lang === 'fr' ? 'Jilbabs, khimars & ensembles conçus pour être confortables, couvrants et élégants. Dès 149 MAD.' : 'جلابيب، خمارات وأطقم مصممة لتكون مريحة، محتشمة وجميلة. من 149 درهم.'}

/ {lang === 'fr' ? 'espace prière' : 'ملابس الصلاة'}

{lang === 'fr' ? 'Tous les articles' : 'كل القطع'}

{items.map((p, i) => ( ))}
); }; // ======== ABOUT ======== const AboutYoung = ({ lang }) => (
wridachic {lang === 'fr' ? 'Notre histoire' : 'قصتنا'}

{lang === 'fr' ? <>une rose,
une marque. : <>وردة،
علامة.}

{lang === 'fr' ? 'wridachic (de وريدة — la petite rose — et chic) est une marque marocaine qui réinterprète le vestiaire féminin traditionnel pour les femmes d\'aujourd\'hui, entre modernité et modestie.' : 'wridachic (من "وريدة" بمعنى الوردة الصغيرة، و"شيك") علامة مغربية تعيد تفسير الأزياء النسائية التقليدية للمرأة العصرية، بين الحداثة والحشمة.'}

{lang === 'fr' ? 'Made in 🇲🇦, pour la femme marocaine.' : 'صنع في 🇲🇦، للمرأة المغربية.'}

{lang === 'fr' ? 'On collabore avec des ateliers artisanaux à Casablanca, Fès et Marrakech. Chaque pièce est pensée pour allier qualité, modestie et style — des caftans de cérémonie aux tenues de prière.' : 'نتعاون مع ورشات حرفية في الدار البيضاء وفاس ومراكش. كل قطعة مصممة لتجمع بين الجودة والحشمة والأناقة — من قفطان المناسبات إلى ملابس الصلاة.'}

{[ { n: '01', t: lang === 'fr' ? 'Accessible' : 'في المتناول', d: lang === 'fr' ? 'Dès 149 MAD. La qualité sans compromis.' : 'من 149 درهم. جودة بلا تنازل.', tint: 'rose' }, { n: '02', t: lang === 'fr' ? 'Artisanale' : 'حرفية', d: lang === 'fr' ? 'Ateliers locaux, finitions soignées, fibres naturelles.' : 'ورشات محلية، تشطيب محكم، خامات طبيعية.', tint: 'lime' }, { n: '03', t: lang === 'fr' ? 'Modeste & chic' : 'محتشمة وأنيقة', d: lang === 'fr' ? 'Mode, prière, cérémonie — une marque pour toutes les occasions.' : 'موضة، صلاة، مناسبات — علامة لكل الأوقات.', tint: 'sky' }, ].map(v => (
{v.n}

{v.t}

{v.d}

))}
); // ======== LOOKBOOK ======== const LookbookYoung = ({ lang }) => (
SS26

{lang === 'fr' ? <>the book. : 'اللوكبوك'}

{lang === 'fr' ? 'Printemps / Été 26 — médina, rooftop, souk' : 'ربيع / صيف 26 — مدينة، أسطح، سوق'}

{[ { c: 'span 3', r: 'span 2', t: 'clay' }, { c: 'span 3', r: 'span 2', t: 'lime' }, { c: 'span 2', r: 'span 2', t: 'rose' }, { c: 'span 2', r: 'span 3', t: 'ink' }, { c: 'span 2', r: 'span 2', t: 'sky' }, { c: 'span 4', r: 'span 2', t: 'mint' }, { c: 'span 2', r: 'span 2', t: 'clay' }, ].map((l, i) => (
))}
ph: studio wridachic · casa + marrakech · ss26
); // ======== ADMIN ======== const ADMIN_PASS = 'wridachic2026'; const STATUS_COLORS = { nouveau: '#C85C3F', confirmé: '#4A90D9', expédié: '#7B68EE', livré: '#4CAF50' }; const STATUS_LABELS = ['nouveau', 'confirmé', 'expédié', 'livré']; const AdminYoung = () => { const [pwd, setPwd] = u2S(''); const [authed, setAuthed] = u2S(false); const [orders, setOrders] = u2S([]); const [users, setUsers] = u2S([]); const [loading, setLoading] = u2S(false); const [error, setError] = u2S(''); const [tab, setTab] = u2S('orders'); const login = () => { if (pwd === ADMIN_PASS) { setAuthed(true); fetchOrders(); fetchUsers(); } else setError('Mot de passe incorrect'); }; const fetchOrders = async () => { setLoading(true); const { data, error } = await window._sb.from('orders').select('*').order('created_at', { ascending: false }); if (error) setError(error.message); else setOrders(data || []); setLoading(false); }; const fetchUsers = async () => { const { data, error } = await window._sb.from('profiles').select('*').order('created_at', { ascending: false }); if (!error) setUsers(data || []); }; const updateStatus = async (id, status) => { await window._sb.from('orders').update({ status }).eq('id', id); setOrders(prev => prev.map(o => o.id === id ? { ...o, status } : o)); }; const deleteOrder = async (id) => { if (!confirm('Supprimer cette commande définitivement ?')) return; await window._sb.from('orders').delete().eq('id', id); setOrders(prev => prev.filter(o => o.id !== id)); }; const fmt = (iso) => new Date(iso).toLocaleDateString('fr-MA', { day: '2-digit', month: '2-digit', year: '2-digit', hour: '2-digit', minute: '2-digit' }); const fmtDate = (iso) => new Date(iso).toLocaleDateString('fr-MA', { day: '2-digit', month: '2-digit', year: '2-digit' }); const userStats = (uid) => { const userOrders = orders.filter(o => o.user_id === uid); return { count: userOrders.length, total: userOrders.reduce((s, o) => s + (o.total || 0), 0), }; }; if (!authed) return (

Admin

TABLEAU DE BORD

setPwd(e.target.value)} onKeyDown={e => e.key === 'Enter' && login()} className="input2" style={{ marginBottom: 12 }} /> {error &&

{error}

}
); return (
{/* Header */}
Tableau de bord
{orders.length} COMMANDES
{/* TABS */}
{[ { id: 'orders', label: `Commandes (${orders.length})` }, { id: 'users', label: `Utilisateurs (${users.length})` }, ].map(tb => ( ))}
{tab === 'orders' && (<> {/* Stats */}
{STATUS_LABELS.map(s => { const count = orders.filter(o => o.status === s).length; const total = orders.filter(o => o.status === s).reduce((acc, o) => acc + (o.total || 0), 0); return (
{s}
{count}
{total} MAD
); })}
{/* Orders */} {loading ? (
Chargement...
) : orders.length === 0 ? (
Aucune commande pour l'instant.
) : (
{orders.map(o => (
{o.order_number}
{fmt(o.created_at)}
{o.full_name}
{o.phone}
{o.email}
{o.address}, {o.city}
{(o.items || []).map((it, i) => (
{it.name} × {it.qty} — {it.size}
))}
{o.total} MAD COD
{STATUS_LABELS.map(s => ( ))}
))}
)} )} {tab === 'users' && ( users.length === 0 ? (
Aucun utilisateur. Crée la table `profiles` dans Supabase (voir instructions).
) : ( <>
ℹ Liste en lecture seule. Pour modifier ou supprimer → Supabase Dashboard → Ouvrir Supabase Auth ↗
{users.map(u => { const stats = userStats(u.id); return (
{u.full_name || '—'}
{u.email}
Inscrit le {fmtDate(u.created_at)}
Commandes : {stats.count} Total : {stats.total} MAD
); })}
) )}
); }; // ======== AUTH MODAL ======== const AuthYoung = ({ lang, onClose, onSuccess }) => { const [mode, setMode] = u2S('login'); // login | signup | otp | reset const [email, setEmail] = u2S(''); const [pwd, setPwd] = u2S(''); const [name, setName] = u2S(''); const [otp, setOtp] = u2S(''); const [busy, setBusy] = u2S(false); const [err, setErr] = u2S(''); const [info, setInfo] = u2S(''); const submit = async () => { setErr(''); setInfo(''); setBusy(true); try { if (mode === 'signup') { if (pwd.length < 6) throw new Error(lang === 'fr' ? '6 caractères minimum' : '6 أحرف على الأقل'); const { data, error } = await window._sb.auth.signUp({ email, password: pwd, options: { data: { full_name: name } } }); if (error) throw error; // Si email confirmation activée → passer à l'étape OTP if (data.user && !data.session) { setMode('otp'); setInfo(lang === 'fr' ? '✉ Code à 8 chiffres envoyé par email' : '✉ تم إرسال رمز من 8 أرقام للإيميل'); } else if (data.user && data.session) { // Pas de confirmation requise → connecté direct onSuccess(data.user); } } else if (mode === 'login') { const { data, error } = await window._sb.auth.signInWithPassword({ email, password: pwd }); if (error) { if (error.message.toLowerCase().includes('not confirmed') || error.message.toLowerCase().includes('email')) { await window._sb.auth.resend({ type: 'signup', email }); setMode('otp'); setInfo(lang === 'fr' ? '⚠ Compte non confirmé. Code renvoyé par email.' : '⚠ الحساب غير مؤكد. تم إرسال رمز جديد.'); } else throw error; } else if (data.user) { onSuccess(data.user); } } else if (mode === 'otp') { const { data, error } = await window._sb.auth.verifyOtp({ email, token: otp.trim(), type: 'signup' }); if (error) throw error; if (data.user) onSuccess(data.user); } else if (mode === 'reset') { const { error } = await window._sb.auth.resetPasswordForEmail(email); if (error) throw error; setInfo(lang === 'fr' ? '✓ Lien de réinitialisation envoyé.' : '✓ تم إرسال رابط إعادة التعيين.'); } } catch (e) { setErr(e.message || 'Erreur'); } setBusy(false); }; const resendCode = async () => { setErr(''); setBusy(true); const { error } = await window._sb.auth.resend({ type: 'signup', email }); if (error) setErr(error.message); else setInfo(lang === 'fr' ? '✓ Code renvoyé !' : '✓ تم إعادة الإرسال!'); setBusy(false); }; const titles = { login: { fr: 'Connexion', ar: 'تسجيل الدخول' }, signup: { fr: 'Créer un compte', ar: 'إنشاء حساب' }, otp: { fr: 'Confirmation', ar: 'تأكيد' }, reset: { fr: 'Mot de passe oublié', ar: 'نسيت كلمة السر' }, }; const subtitles = { login: { fr: 'Retrouve tes favoris', ar: 'استرجعي مفضلاتك' }, signup: { fr: 'Sauvegarde tes favoris', ar: 'احفظي مفضلاتك' }, otp: { fr: 'Entre le code reçu par email', ar: 'أدخلي الرمز من الإيميل' }, reset: { fr: 'On t\'envoie un lien', ar: 'سنرسل لك رابطًا' }, }; return (
e.stopPropagation()} style={{ background: 'var(--paper)', padding: 32, borderRadius: 20, width: '100%', maxWidth: 380, position: 'relative' }}>

{titles[mode][lang]}

{subtitles[mode][lang]}

{/* SIGNUP */} {mode === 'signup' && ( <> setName(e.target.value)} style={{ marginBottom: 10 }} /> setEmail(e.target.value)} style={{ marginBottom: 10 }} /> setPwd(e.target.value)} onKeyDown={e => e.key === 'Enter' && submit()} style={{ marginBottom: 10 }} /> )} {/* LOGIN */} {mode === 'login' && ( <> setEmail(e.target.value)} style={{ marginBottom: 10 }} /> setPwd(e.target.value)} onKeyDown={e => e.key === 'Enter' && submit()} style={{ marginBottom: 6 }} />

{ setMode('reset'); setErr(''); setInfo(''); }} style={{ opacity: 0.6, cursor: 'pointer', borderBottom: '1px solid currentColor' }}> {lang === 'fr' ? 'Mot de passe oublié ?' : 'نسيت كلمة السر؟'}

)} {/* OTP */} {mode === 'otp' && ( <>

{lang === 'fr' ? 'Email envoyé à ' : 'تم الإرسال إلى '}{email}

setOtp(e.target.value.replace(/[^0-9]/g, ''))} onKeyDown={e => e.key === 'Enter' && submit()} style={{ marginBottom: 10, textAlign: 'center', fontSize: 22, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '8px' }} />

{lang === 'fr' ? 'Renvoyer le code' : 'إعادة إرسال الرمز'}

)} {/* RESET */} {mode === 'reset' && ( setEmail(e.target.value)} style={{ marginBottom: 10 }} /> )} {info &&

{info}

} {err &&

{err}

} {/* Switch links */} {mode === 'login' && (

{lang === 'fr' ? 'Pas de compte ? ' : 'ما عندكش حساب؟ '} { setMode('signup'); setErr(''); setInfo(''); }} style={{ borderBottom: '1px solid currentColor', cursor: 'pointer' }}> {lang === 'fr' ? "S'inscrire" : 'سجلي'}

)} {mode === 'signup' && (

{lang === 'fr' ? 'Déjà inscrite ? ' : 'عندك حساب؟ '} { setMode('login'); setErr(''); setInfo(''); }} style={{ borderBottom: '1px solid currentColor', cursor: 'pointer' }}> {lang === 'fr' ? 'Connexion' : 'دخول'}

)} {(mode === 'otp' || mode === 'reset') && (

{ setMode('login'); setErr(''); setInfo(''); setOtp(''); }} style={{ borderBottom: '1px solid currentColor', cursor: 'pointer' }}> ← {lang === 'fr' ? 'Retour à la connexion' : 'الرجوع لتسجيل الدخول'}

)}
); }; // ======== ACCOUNT PAGE ======== const AccountYoung = ({ lang, user, onLogout, wishlist, onProduct }) => { const fav = WC_PRODUCTS.filter(p => wishlist.includes(p.id)); const meta = user.user_metadata || {}; const [tab, setTab] = u2S(() => { const t = window.__accountTab; if (t) { delete window.__accountTab; return t; } return 'profile'; }); const [name, setName] = u2S(meta.full_name || ''); const [pwd, setPwd] = u2S(''); const [pwd2, setPwd2] = u2S(''); const [currentPwdName, setCurrentPwdName] = u2S(''); const [currentPwdPwd, setCurrentPwdPwd] = u2S(''); const [msg, setMsg] = u2S(''); const [busy, setBusy] = u2S(false); const [orders, setOrders] = u2S([]); u2E(() => { if (tab === 'orders') { window._sb.from('orders').select('*').eq('user_id', user.id).order('created_at', { ascending: false }) .then(({ data }) => setOrders(data || [])); } }, [tab]); u2E(() => { const handler = () => { const t = window.__accountTab; if (t) { setTab(t); setMsg(''); delete window.__accountTab; } }; window.addEventListener('account:gotab', handler); return () => window.removeEventListener('account:gotab', handler); }, []); u2E(() => { if (!msg) return; const t = setTimeout(() => setMsg(''), 3000); return () => clearTimeout(t); }, [msg]); const verifyPwd = async (currentPwd) => { const { error } = await window._sb.auth.signInWithPassword({ email: user.email, password: currentPwd }); return !error; }; const saveName = async () => { setMsg(''); if (!currentPwdName) return setMsg(lang === 'fr' ? '⚠ Confirme ton mot de passe actuel' : '⚠ أكدي كلمة السر الحالية'); setBusy(true); const ok = await verifyPwd(currentPwdName); if (!ok) { setBusy(false); return setMsg(lang === 'fr' ? '⚠ Mot de passe incorrect' : '⚠ كلمة السر غير صحيحة'); } const { error } = await window._sb.auth.updateUser({ data: { full_name: name } }); setCurrentPwdName(''); setBusy(false); if (error) { setMsg('⚠ ' + error.message); return; } setMsg(lang === 'fr' ? '✓ Nom mis à jour. Reconnexion...' : '✓ تم حفظ الاسم. إعادة الدخول...'); setTimeout(() => { onLogout(); }, 1800); }; const savePwd = async () => { setMsg(''); if (!currentPwdPwd) return setMsg(lang === 'fr' ? '⚠ Confirme ton mot de passe actuel' : '⚠ أكدي كلمة السر الحالية'); if (pwd.length < 6) return setMsg(lang === 'fr' ? '⚠ 6 caractères minimum' : '⚠ 6 أحرف على الأقل'); if (pwd !== pwd2) return setMsg(lang === 'fr' ? '⚠ Les mots de passe ne correspondent pas' : '⚠ كلمتا السر مختلفتان'); setBusy(true); const ok = await verifyPwd(currentPwdPwd); if (!ok) { setBusy(false); return setMsg(lang === 'fr' ? '⚠ Mot de passe actuel incorrect' : '⚠ كلمة السر الحالية غير صحيحة'); } const { error } = await window._sb.auth.updateUser({ password: pwd }); setPwd(''); setPwd2(''); setCurrentPwdPwd(''); setBusy(false); if (error) { setMsg('⚠ ' + error.message); return; } setMsg(lang === 'fr' ? '✓ Mot de passe modifié. Reconnexion...' : '✓ تم تغيير كلمة السر. إعادة الدخول...'); setTimeout(() => { onLogout(); }, 1800); }; const tabs = [ { id: 'profile', label: lang === 'fr' ? 'Profil' : 'الملف الشخصي' }, { id: 'orders', label: lang === 'fr' ? 'Commandes' : 'طلباتي' }, { id: 'wishlist', label: lang === 'fr' ? 'Favoris' : 'مفضلاتي', count: fav.length }, ]; const fmt = (iso) => new Date(iso).toLocaleDateString('fr-MA', { day: '2-digit', month: '2-digit', year: '2-digit' }); const isOk = msg.startsWith('✓'); return (
{msg && (
{msg}
)}
/ {lang === 'fr' ? 'mon compte' : 'حسابي'} /

{lang === 'fr' ? 'Bonjour' : 'مرحبا'}, {meta.full_name || user.email.split('@')[0]}

{user.email}

{/* Tabs */}
{tabs.map(tb => ( ))}
{/* PROFILE TAB */} {tab === 'profile' && (

{lang === 'fr' ? 'Informations' : 'المعلومات'}

setName(e.target.value)} style={{ marginTop: 4, marginBottom: 12 }} /> setCurrentPwdName(e.target.value)} placeholder={lang === 'fr' ? 'Pour confirmer' : 'للتأكيد'} style={{ marginTop: 4, marginBottom: 12 }} />

{lang === 'fr' ? 'Mot de passe' : 'كلمة السر'}

setCurrentPwdPwd(e.target.value)} style={{ marginTop: 4, marginBottom: 12 }} /> setPwd(e.target.value)} style={{ marginTop: 4, marginBottom: 12 }} /> setPwd2(e.target.value)} style={{ marginTop: 4, marginBottom: 12 }} />
)} {/* ORDERS TAB */} {tab === 'orders' && (
{orders.length === 0 ? (
📦

{lang === 'fr' ? 'Aucune commande pour le moment.' : 'مكاين حتى طلب.'}

) : (
{orders.map(o => (
{o.order_number} {fmt(o.created_at)}
{o.status}
{(o.items || []).map((it, i) => (
• {it.name} × {it.qty} — {it.size}
))}
{o.total} MAD
))}
)}
)} {/* WISHLIST TAB */} {tab === 'wishlist' && ( fav.length === 0 ? (
🤍

{lang === 'fr' ? 'Aucun favori pour le moment.' : 'مكاين والو فالمفضلات.'}

) : (
{fav.map((p, i) => ( {}} wished={true} tint={TINTS[i % TINTS.length]} /> ))}
) )}
); }; // ======== RECOVERY MODAL (set new password from email link) ======== const RecoveryYoung = ({ lang, onClose }) => { const [pwd, setPwd] = u2S(''); const [pwd2, setPwd2] = u2S(''); const [busy, setBusy] = u2S(false); const [msg, setMsg] = u2S(''); const [done, setDone] = u2S(false); const submit = async () => { setMsg(''); if (pwd.length < 6) return setMsg(lang === 'fr' ? '⚠ 6 caractères minimum' : '⚠ 6 أحرف على الأقل'); if (pwd !== pwd2) return setMsg(lang === 'fr' ? '⚠ Les mots de passe ne correspondent pas' : '⚠ كلمتا السر مختلفتان'); setBusy(true); const { error } = await window._sb.auth.updateUser({ password: pwd }); setBusy(false); if (error) { setMsg('⚠ ' + error.message); return; } setDone(true); setTimeout(() => { onClose(); }, 1800); }; return (

{lang === 'fr' ? 'Nouveau mot de passe' : 'كلمة سر جديدة'}

{lang === 'fr' ? 'Choisis un nouveau mot de passe' : 'اختاري كلمة سر جديدة'}

{done ? (
✓

{lang === 'fr' ? 'Mot de passe modifié !' : 'تم تغيير كلمة السر!'}

) : ( <> setPwd(e.target.value)} style={{ marginBottom: 10 }} /> setPwd2(e.target.value)} onKeyDown={e => e.key === 'Enter' && submit()} style={{ marginBottom: 14 }} /> {msg &&

{msg}

} )}
); }; Object.assign(window, { HomeYoung, ShopYoung, PDetailYoung, CartYoung, CheckoutYoung, CaftanYoung, PrayerYoung, AboutYoung, LookbookYoung, AdminYoung, AuthYoung, AccountYoung, RecoveryYoung });