);
}
// Section divider — fine hairlines flanking a small faceted lozenge
function StarDivider({ color = R.gold, width = '100%', dim = 0.55, style }) {
return (
);
}
// Wordmark — lowercase serif "sikka" with the brand mark beside it.
// Matches the official Sikka wordmark: light serif, lowercase, with the
// wallet logo as a leading mark.
function Wordmark({ size = 28, color = R.pearl, sub = false, subColor = R.gold,
subText = 'NOIR EDITION', withMark = false, style }) {
return (
{withMark && }
sikka
{sub && (
{subText}
)}
);
}
// Background pattern — refined engine-turned dot grid with faint diagonal
// pinstripes. Reads as a luxury banknote / private-bank texture, neutral
// for any audience. (Renamed conceptually from "mashrabiya"; export name
// kept for compatibility with screens that import it.)
function MashrabiyaBG({ opacity = 0.05, color = R.gold, style }) {
const uid = React.useId ? React.useId().replace(/:/g, '') : 'lp' + Math.random().toString(36).slice(2, 8);
return (
);
}
// Royal seal — concentric medallion with engraved perimeter text.
// Universal Roman engraving; cultural neutrality preserved.
function RoyalSeal({ size = 72, color = R.gold, motion = false, style }) {
const uid = React.useId ? React.useId().replace(/:/g, '') : 'rs' + Math.random().toString(36).slice(2, 8);
return (
{/* rotating outer ring of engraved text */}
{/* center coin */}
);
}
// ─── Type atoms ───────────────────────────────────────────────────
function Eyebrow({ children, color = R.pearl4, size = 10, ls = 2.6, style }) {
return (
{children}
);
}
// Big serif heading with trailing accent word italic & gold
function Headline({ lead, tail, tailPunct = '', size = 42, color = R.pearl, accent = R.gold, style }) {
return (
{lead}{' '}
{tail}{tailPunct}
);
}
function Sub({ children, color = R.pearl3, size = 16, style }) {
return (
{children}
);
}
// Bilingual line — English + Arabic stacked, Arabic dimmer
function Bilingual({ en, ar, size = 14, gap = 6, color = R.pearl3, arColor = R.gold, style, align = 'left' }) {
return (
{en}
{ar}
);
}
// Top bar — back / center / right
function TopBar({ onBack, center, right, sticky = false }) {
return (
{onBack ? : null}
{typeof center === 'string'
? {center}
: center}
{right || null}
);
}
function BackButton({ onClick }) {
return (
);
}
// Primary gold button — gilded with subtle sheen + filigree edges
function GoldButton({ children, onClick, disabled, full = true, style, ...rest }) {
return (
);
}
// Ghost button — velvet panel with gold border
function GhostButton({ children, onClick, style, ...rest }) {
return (
);
}
// Bank avatar — colored rounded square with mono initials, gold hairline
function BankAvatar({ id, size = 38, text }) {
const b = R.bank[id] || { bg: R.ink3, tx: R.pearl };
return (
{text}
);
}
// Stepper "I / IV" Roman numerals — feels engraved
function StepCounter({ i, total }) {
const roman = (n) => ['', 'I','II','III','IV','V','VI','VII','VIII','IX','X'][n] || String(n);
return (
{roman(i)}/
{roman(total)}
);
}
// Progress bar — gold fill
function ProgressBar({ pct = 0, color = R.gold, height = 4, style }) {
return (
);
}
// Animated count-up
function CountUp({ to, decimals = 0, duration = 700, style, prefix, suffix }) {
const [val, setVal] = React.useState(0);
React.useEffect(() => {
const start = performance.now();
let raf;
const tick = (t) => {
const p = Math.min(1, (t - start) / duration);
const e = 1 - Math.pow(1 - p, 3);
setVal(to * e);
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [to, duration]);
return (
{prefix}{decimals ? val.toFixed(decimals) : Math.round(val).toLocaleString()}{suffix}
);
}
// Hidden numeric input that drives OTP boxes
function HiddenNumInput({ value, onChange, max = 6, autoFocus }) {
return (
onChange(e.target.value.replace(/\D/g, '').slice(0, max))}
autoFocus={autoFocus}
style={{
position: 'absolute', opacity: 0, pointerEvents: 'auto',
inset: 0, width: '100%', height: '100%', border: 'none', background: 'transparent',
color: 'transparent', caretColor: 'transparent', fontSize: 16,
}}
/>
);
}
// Color shade helper
function shade(hex, amt) {
const h = hex.replace('#', '');
const r = parseInt(h.slice(0, 2), 16);
const g = parseInt(h.slice(2, 4), 16);
const b = parseInt(h.slice(4, 6), 16);
const clamp = (n) => Math.max(0, Math.min(255, n));
const f = (c) => clamp(c + amt).toString(16).padStart(2, '0');
return '#' + f(r) + f(g) + f(b);
}
// "v1.2" gold version badge
function VBadge({ children = 'v1.2', style }) {
return (
{children}
);
}
// Tier chip — used in Wallet + Profile
function TierChip({ tier = 'Noir', dot = R.gold }) {
return (
{tier} Tier
);
}
// ── Real brand logos (investor demo · nominative use). Renders the brand
// mark on a clean tile; if the logo can't load it falls back to the neutral
// monogram, so this is non-breaking even with no network.
const BRAND_DOMAIN = {
'Carrefour': 'carrefour.com', 'Talabat': 'talabat.com',
'Emirates': 'emirates.com', 'ADNOC': 'adnoc.ae',
'Noon': 'noon.com', 'Spinneys': 'spinneys.com',
'Marriott': 'marriott.com', 'VOX Cinemas': 'voxcinemas.com',
'Atlantis': 'atlantis.com', 'WhatsApp': 'whatsapp.com',
};
function brandLogoSrcs(domain) {
if (!domain) return [];
// High-res app icons first (brand's own background colour, full-bleed, crisp).
// DuckDuckGo ip3 serves the apple-touch-icon (~180px); Google at 256px; Clearbit last.
return [
`https://icons.duckduckgo.com/ip3/${domain}.ico`,
`https://www.google.com/s2/favicons?domain=${domain}&sz=256`,
`https://logo.clearbit.com/${domain}`,
];
}
function BrandTile({ size = 52, radius = 12, domain, initial, bg = R.ink2, tx = '#fff' }) {
// WhatsApp's website favicon is green-on-white; the brand app icon is
// white-on-green. Render the canonical white mark on WhatsApp green.
if (domain === 'whatsapp.com') {
return (