// Shared shell — Marriott Bonvoy aesthetic (orange + black + white) const LUX = { navy: '#0A0A0A', // black — primary text & dark-screen ground midnight: '#000000', navyLighter: '#1A1A1A', cream: '#FAFAFA', // warm white gold: '#F68522', // Bonvoy orange goldHover: '#FF9438', goldGlow: 'rgba(246,133,34,0.12)', goldTint: 'rgba(246,133,34,0.18)', softCream: '#8A8A8A', slate: '#6B6B6B', inputBorder: '#E5E5E5', }; window.LUX = LUX; // ─────────── BONV°Y wordmark (Mother Design signature) ─────────── function BonvoyMark({ color = '#0A0A0A', size = 18, style }) { // BONV°Y — the ° sits where the O between V and Y would be return ( 20 ? -0.5 : -0.2, color, display: 'inline-flex', alignItems: 'center', lineHeight: 1, ...style, }}> BONV Y ); } window.BonvoyMark = BonvoyMark; // ─────────── Monochrome line icons for level headers ─────────── function LevelIcon({ name, color = LUX.gold, size = 22 }) { const s = size, c = color, sw = 1.4; const paths = { contact: <>, vitals: <>, loyalty: <>, travel: <>, events: <>, leagues: <>, dining: <>, trip: <>, booking: <>, sponsor: <>, }; return ( {paths[name] || paths.contact} ); } window.LevelIcon = LevelIcon; function MonoLabel({ children, dark, style }) { return (
{children}
); } // ─────────── Coin Drop Animation ─────────── // Coins fly from a source position to the entries badge function CoinDropFX({ active, amount, onDone }) { React.useEffect(() => { if (!active) return; const id = setTimeout(onDone, 1100); return () => clearTimeout(id); }, [active]); if (!active) return null; const coins = Math.min(Math.max(amount, 1), 6); return (
{Array.from({length: coins}).map((_, i) => { const delay = i * 80; return (
+
); })}
); } window.CoinDropFX = CoinDropFX; function EntriesBadge({ total, burst, pulse }) { return (
ENTRIES
+{total}
{burst && (
+{burst.amount}
)}
); } function LuxShell({ levelNum, totalLevels = 10, dark = true, reward = 1, title, subtitle, children, iconName, onNext, onBack, ctaLabel = 'Continue', canContinue = true, entries, burst, pulseEntries, }) { const fg = dark ? LUX.cream : LUX.navy; const bg = dark ? LUX.navy : LUX.cream; // Override badge for dark mode (different bg) const badge = (
ENTRIES
+{entries}
{burst && (
+{burst.amount}
)}
); return (
{/* top: back + entries — top padding respects iOS notch/Dynamic Island via env(safe-area-inset-top) */}
{badge}
{/* progress + level tag */}
LEVEL {String(levelNum).padStart(2,'0')} / {String(totalLevels).padStart(2,'0')} +{reward} ENTR{reward === 1 ? 'Y' : 'IES'}
{/* heading w/ icon */}
{iconName && (
)}

{title}

{subtitle &&
{subtitle}
}
{/* body */}
{children}
{/* CTA — bottom padding respects iOS home indicator via env(safe-area-inset-bottom) */}
); } // ─────────── Pill (with stronger haptic pulse) ─────────── function Pill({ label, hint, selected, onClick, dark }) { const [pressed, setPressed] = React.useState(false); const [ripple, setRipple] = React.useState(0); const baseBg = dark ? LUX.navyLighter : '#FFFFFF'; const selBg = dark ? LUX.goldGlow : LUX.goldTint; const handleClick = () => { setRipple(r => r + 1); onClick?.(); }; return ( ); } function PillGrid({ options, value, setValue, multi, dark }) { const isSel = (id) => multi ? (value || []).includes(id) : value === id; const toggle = (id) => { if (multi) { const cur = value || []; setValue(cur.includes(id) ? cur.filter(x => x !== id) : [...cur, id]); } else { setValue(id); } }; return (
{options.map(o => { const id = typeof o === 'string' ? o : o.id; const label = typeof o === 'string' ? o : o.label; const hint = typeof o === 'string' ? null : o.hint; return ( toggle(id)} dark={dark}/> ); })}
); } function TextField({ label, value, onChange, placeholder, type = 'text', dark, format }) { const [focus, setFocus] = React.useState(false); const handleChange = (e) => { const v = format ? format(e.target.value) : e.target.value; onChange(v); }; return ( ); } function RatingScale({ value, setValue, dark }) { return (
{[1,2,3,4,5].map(n => { const sel = value === n; return ( ); })}
); } function SectionLabel({ children, dark }) { return ( {children} ); } // Phone formatter — (XXX) XXX-XXXX function formatPhone(v) { const d = (v || '').replace(/\D/g, '').slice(0, 10); if (d.length < 4) return d; if (d.length < 7) return `(${d.slice(0,3)}) ${d.slice(3)}`; return `(${d.slice(0,3)}) ${d.slice(3,6)}-${d.slice(6)}`; } window.formatPhone = formatPhone; Object.assign(window, { LuxShell, Pill, PillGrid, TextField, RatingScale, MonoLabel, SectionLabel, EntriesBadge, });