/* AMBER & ZAFRAN — shared UI primitives */
const { useState, useEffect, useRef, useCallback } = React;
/* ---------- Icons (1.4px hairline, luxury) ---------- */
const Icon = {
menu: (p) =>
{lang === 'ar' ? 'جارٍ التحميل…' : 'Loading…'}
);
}
function ErrorState({ lang, onRetry }) {
return (
{lang === 'ar' ? 'تعذّر تحميل العطور. يرجى المحاولة مرة أخرى.' : 'Couldn’t load fragrances. Please try again.'}
{onRetry &&
{lang === 'ar' ? 'إعادة المحاولة' : 'Retry'} }
);
}
/* ---------- Stars ---------- */
function Stars({ r = 5, c = 'var(--gold-deep-on-light)' }) {
return {[1,2,3,4,5].map(i => ;
}
/* ---------- Scroll reveal hook ---------- */
function Reveal({ children, delay = 0, className = '', as = 'div', ...rest }) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current; if (!el) return;
const io = new IntersectionObserver((es) => {
es.forEach(e => { if (e.isIntersecting) { setTimeout(() => el.classList.add('in'), delay); io.unobserve(el); } });
}, { threshold: 0.14, root: el.closest('.screen') });
io.observe(el);
return () => io.disconnect();
}, [delay]);
const Tag = as;
return {children} ;
}
/* ---------- Product card ---------- */
function ProductCard({ p, lang, t, onOpen, wished, onWish, style }) {
const badgeMap = {
signature: [t.featuredK, false], bestseller: ['Best Seller', false],
new: ['New', false], limited: ['Limited', true],
};
const badgeArMap = { signature: 'مميّز', bestseller: 'الأكثر مبيعاً', new: 'جديد', limited: 'محدود' };
const badge = p.badge ? badgeMap[p.badge] : null;
return (
onOpen(p)}
role="button" tabIndex={0} aria-label={lang === 'ar' ? p.ar : p.name}
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpen(p); } }}
>
{p.badge && {lang === 'ar' ? badgeArMap[p.badge] : badge[0]} }
{ e.stopPropagation(); onWish(p.id); }}
aria-label={wished ? (lang === 'ar' ? 'إزالة من المفضّلة' : 'Remove from wishlist') : (lang === 'ar' ? 'إضافة إلى المفضّلة' : 'Add to wishlist')}
aria-pressed={wished}
style={{ color: wished ? 'var(--burgundy)' : 'var(--ink)' }}
>
{wished ?
{lang === 'ar' ? p.ar : p.name}
{lang === 'ar' ? p.name : p.ar}
{lang === 'ar' ? p.familyAr : p.family}
{t.currency} {p.price}
Amber & Zafran
{tagline && Luxury Scents }
);
}
/* ---------- Footer ---------- */
function Footer({ t, lang, go }) {
// Each item is [label, view-name-to-navigate-to]. Boutique/Collections/
// Gifting/VIP/Our Story all have real dedicated pages. "Journal" and
// "Boutiques" have no dedicated page yet, so they route to the closest
// real equivalent (Our Story, and the Boutique itself) rather than being
// dead links — same "no fake destinations" principle as the rest of the
// app. "The Circle of Amber" (loyalty) lives on the Homepage, so it goes home.
const col = (title, items) => (
{title}
{items.map(([label, target], i) => (
go(target)} style={{ fontFamily: lang === 'ar' ? 'var(--arabic)' : 'var(--serif)', fontSize: 15, color: 'rgba(253,253,253,.78)', textAlign: lang === 'ar' ? 'right' : 'left' }}>{label}
))}
);
return (
{lang === 'ar' ? 'عنبر وزعفران' : 'AMBER & ZAFRAN'}
{t.tagline}
{col(t.footShop, [
[t.nav.shop, 'shop'],
[t.nav.collections, 'collections'],
[t.nav.gifting, 'gifting'],
])}
{col(t.footHouse, [
[t.nav.story, 'story'],
[lang === 'ar' ? 'المجلة' : 'Journal', 'story'],
[t.loyaltyT, 'home'],
[lang === 'ar' ? 'المتاجر' : 'Boutiques', 'shop'],
])}
© 2026 Amber & Zafran
Amman · Jordan
);
}
Object.assign(window, { Icon, Ornament, Flacon, Stars, Reveal, ProductCard, Wordmark, Footer });