/* ───────────────────────────────────────────────────────────────────────── AnimatedPhone — upgraded with connector spine + per-screen animations Screens use Editorial Folklor palette (fixed MF tokens, not brand palette). ───────────────────────────────────────────────────────────────────────── */ const { useState: usePh, useEffect: useEffPh, useRef: useRefPh } = React; /* Role-coded pill colors */ const ROLE_COLORS = { diner: { bg: 'rgba(181,88,30,.18)', border: 'rgba(181,88,30,.5)', text: '#F0C4A0', dot: '#B5581E' }, admin: { bg: 'rgba(196,154,60,.18)', border: 'rgba(196,154,60,.5)', text: '#F5DFA0', dot: '#C49A3C' }, kitchen: { bg: 'rgba(45,74,42,.35)', border: 'rgba(90,140,80,.5)', text: '#A8D4A0', dot: '#5A8C50' }, qr: { bg: 'rgba(181,88,30,.18)', border: 'rgba(181,88,30,.5)', text: '#F0C4A0', dot: '#B5581E' }, }; const SCREENS = [ { key: 'browse', label: 'Comensal · Menú', role: 'diner', render: () => }, { key: 'detail', label: 'Comensal · Plato', role: 'diner', render: () => }, { key: 'admin', label: 'Admin · Pedidos', role: 'admin', render: () => }, { key: 'kitchen', label: 'Cocina · Tickets', role: 'kitchen', render: () => }, { key: 'qr', label: 'Comensal · QR', role: 'qr', render: () => }, ]; /* ── Status bar (shared across screens) ─────────────────── */ function StatusBar({ light = false, time = '9:41', color }) { const c = color || (light ? 'rgba(255,255,255,0.95)' : '#1C1B17'); return (
{time}
); } /* ── SCREEN 1 — Guest browse ─────────────────────────────── */ function ScrGuestBrowse() { const DEMO_ITEMS = [ { swatch: '#8B6B47', name: 'Guacamole de la casa', price: '$145' }, { swatch: '#B5581E', name: 'Mole negro de la abuela', price: '$285' }, { swatch: '#2D4A2A', name: 'Pescado a la talla', price: '$320' }, { swatch: '#C49A3C', name: 'Cochinita pibil', price: '$265', agotado: true }, ]; return (
Cocina de temporada
La Terraza
Mesa 12
{['Entradas','Fuertes','Postres','Bebidas'].map((tab, i) => ( {tab} ))}
{DEMO_ITEMS.map((item, i) => (
{item.name}
{item.agotado && ( Agotado )}
{item.price}
))}
); } /* ── SCREEN 2 — Dish detail ──────────────────────────────── */ function ScrDishDetail() { return (
{/* Dish image area */}
{/* Sweep overlay */}
{/* Dish emoji */}
🍗
Mole negro de la abuela
$285
{['Sin gluten', 'Picante'].map((tag, i) => ( {tag} ))}

Pollo orgánico bañado en mole negro de 32 ingredientes. Receta familiar desde 1985.

+ Agregar al pedido
); } /* ── SCREEN 3 — Admin orders ─────────────────────────────── */ function ScrAdmin() { return (
Pedidos activos
7 mesas
{/* Completed card */}
Mesa 3
Entregado
Guacamole · Agua de jamaica
{/* New incoming card — animates in */}
Mesa 8
Nuevo
{['1× Mole negro · $285', '2× Agua de jamaica · $110', '1× Cochinita pibil · $265'].map(line => (
{line.split('·')[0]} {line.split('·')[1]}
))}
Total$660
); } /* ── SCREEN 4 — Kitchen tickets ──────────────────────────── */ function ScrKitchen() { return (
Ticket #47
Mesa 4
{/* Row 1 — will be checked */}
✓
1× Mole negro caliente
{/* Row 2 — will be checked */}
✓
1× Cochinita pibil caliente
{/* Row 3 — stays unchecked */}
2× Agua de jamaica fría
⏱ 04:32 en cocina
); } /* ── SCREEN 5 — QR code ──────────────────────────────────── */ function ScrQR() { return (
Escanea para ver el menú
{/* QR code */}
menufactory.mx/laterraza
143 escaneos hoy
); } function QRPattern() { return (
{Array.from({ length: 81 }).map((_, i) => { const r = Math.floor(i / 9), c = i % 9; const isTL = r < 3 && c < 3; const isTR = r < 3 && c > 5; const isBL = r > 5 && c < 3; /* finder pattern corners — render once as spanning cell */ if (isTL && r === 0 && c === 0) return
; if (isTR && r === 0 && c === 6) return
; if (isBL && r === 6 && c === 0) return
; if (isTL || isTR || isBL) return null; const filled = (i * 31 + 7) % 5 > 1; return
; })}
); } /* ── AnimatedPhone wrapper ───────────────────────────────── */ function AnimatedPhone({ scale = 1, autoCycle = true }) { const [idx, setIdx] = usePh(0); const [prev, setPrev] = usePh(-1); const [signaling, setSign] = usePh(-1); const idxRef = useRefPh(0); useEffPh(() => { idxRef.current = idx; }, [idx]); function advance(nextIdx) { const from = idxRef.current; setSign(from); setTimeout(() => setSign(-1), 520); setPrev(from); setIdx(nextIdx); } useEffPh(() => { if (!autoCycle) return; const id = setInterval(() => { const from = idxRef.current; const next = (from + 1) % SCREENS.length; setSign(from); setTimeout(() => setSign(-1), 520); setPrev(from); setIdx(next); }, 3400); return () => clearInterval(id); }, [autoCycle]); return (
{/* Phone shell */}
{SCREENS.map((s, i) => (
{s.render()}
))}
{/* Connector spine + pill nav */}
{SCREENS.map((s, i) => { const rc = ROLE_COLORS[s.role]; const isActive = i === idx; const isSignaling = i === signaling; const isLast = i === SCREENS.length - 1; return (
{/* Connector column */}
{/* Dot */}
{/* Line + signal dot */} {!isLast && (
{isSignaling && (
)}
)}
{/* Pill button */}
); })}
); } Object.assign(window, { AnimatedPhone, StatusBar, ScrGuestBrowse, ScrDishDetail, ScrAdmin, ScrKitchen, ScrQR, MF_SCREENS: SCREENS, });