/* ────────────────────────────────────────────────────────────── Customer screen — /card Translates the physical card's front+back into one tall phone view. ────────────────────────────────────────────────────────────── */ const PhoneFrame = ({ children, label }) => (
{/* notch */}
{children}
{label}
); const StatusBar = ({ tone = 'dark' }) => (
9:41
); /* ── Header: pink gradient panel echoing the card front ───────────── */ const CardHeader = ({ user }) => (
{/* corner blossoms — like the printed card */}
{/* row 1: avatar + greeting + bell */}
{user.initial}
こんにちは
Hola, {user.name}
{/* wordmark */}
); /* ── Stamp grid — the back of the card, live ──────────────────────── */ const StampCard = ({ count, total, justAdded }) => { const cells = Array.from({ length: total }, (_, i) => i < count); const complete = count >= total; return (
{/* header row: title + progress chip */}
Tu tarjeta
Por cada 10 menús,
llévate 1 gratis
{count}/{total}
sellos
{/* 5×2 grid */}
{cells.map((on, i) => (
))}
{/* footer — progress sentence */}
{complete ? ( <>
¡Tu menú gratis te espera!
Canjéalo en tu próxima visita
) : ( <>
{total - count}
{total - count} {total - count === 1 ? 'sello' : 'sellos'} para tu menú gratis
Sigue así · sushi de regalo cerca
)}
); }; /* ── QR section — always white, high contrast ─────────────────────── */ const QRSection = ({ user }) => (
Muéstralo al camarero
{/* centre logo on QR */}
ID · {user.id}
Caduca en 30 s
); /* ── Wallet buttons ─────────────────────────────────────────────── */ const WalletButtons = () => (
{/* Apple Wallet — black, tinted with sakura-rose accent */} {/* Google Wallet — cream/paper with gold border, tinted */}
); /* ── Bottom nav ───────────────────────────────────────────────────── */ const BottomNav = ({ active = 'card' }) => { const items = [ { id: 'card', icon: 'home', label: 'Tarjeta' }, { id: 'rewards', icon: 'gift', label: 'Premios' }, { id: 'menu', icon: 'menu', label: 'Carta' }, { id: 'me', icon: 'user', label: 'Cuenta' }, ]; return (
{items.map(it => { const on = active === it.id; return (
{on && ( )} {it.label}
); })}
); }; /* ── Compose the customer screen ──────────────────────────────────── */ const CustomerScreen = ({ stampCount, total, justAdded, user, complete }) => (
{/* celebration confetti overlay when complete */} {complete && (
{Array.from({ length: 36 }).map((_, i) => { const left = (i * 37) % 100; const delay = (i * 0.07) % 2; const dur = 3 + ((i * 11) % 20) / 10; const color = ['#E89AA0', '#F4C5C7', '#B89968', '#2F5BAA'][i % 4]; return ( ); })}
¡Felicidades!
)} ); window.CustomerScreen = CustomerScreen;