// ═══════════════════════════════════════════════════════════
// CARTA — shared.jsx · tokens, componentes base y datos demo
// ═══════════════════════════════════════════════════════════
const { useState, useEffect, useRef, useMemo } = React;
// ── TOKENS ─────────────────────────────────────────────────
const C = {
surface: '#FEF9F1',
surfaceLow: '#F5F0E8',
surfaceHigh:'#ECE8E0',
surfaceHighest:'#E7E2DA',
white: '#FFFFFF',
primary: '#4F1728',
primaryCont:'#6B2D3E',
dorado: '#B8860B',
doradoLight:'#FDC34D',
charcoal: '#1D1C17',
muted: '#524346',
outline: '#857375',
error: '#BA1A1A',
success: '#22C55E',
info: '#3B82F6',
warning: '#F59E0B',
mesaLibre: '#9CA3AF',
morado: '#8E44AD',
rojoVivo: '#DC2626',
};
const gradVino = `linear-gradient(135deg, ${C.primary} 0%, ${C.primaryCont} 100%)`;
const gradDorado = `linear-gradient(135deg, ${C.dorado} 0%, #D4A017 100%)`;
const serif = "'DM Serif Display', Georgia, serif";
const sans = "'DM Sans', system-ui, sans-serif";
const fmt = n => '$' + Math.round(n).toLocaleString('en-US');
// ── ICON ───────────────────────────────────────────────────
const Icon = ({ name, size=24, color, fill=false, weight, style={} }) => (
{name}
);
// ── BOTONES ────────────────────────────────────────────────
const pressFx = {
onMouseDown: e => e.currentTarget.style.transform = 'scale(0.96)',
onMouseUp: e => e.currentTarget.style.transform = 'scale(1)',
onMouseLeave:e => e.currentTarget.style.transform = 'scale(1)',
};
const Btn = ({ children, variant='primary', onClick, style={}, iconName, disabled }) => {
const base = { border:'none', borderRadius:9999, padding:'14px 26px', fontFamily:sans,
fontSize:16, fontWeight:600, cursor: disabled?'default':'pointer', display:'inline-flex', alignItems:'center',
justifyContent:'center', gap:8, transition:'opacity 150ms, transform 120ms cubic-bezier(0.22,1.4,0.36,1)',
opacity: disabled ? 0.45 : 1, ...style };
const v = {
primary: { background: gradVino, color:'white' },
secondary: { background: C.surfaceHigh, color: C.charcoal },
ghost: { background: 'transparent', color: C.primary },
dorado: { background: gradDorado, color:'white' },
glass: { background: 'rgba(254,249,241,0.14)', color:'white', backdropFilter:'blur(16px)', WebkitBackdropFilter:'blur(16px)' },
};
const iconColor = variant==='secondary' ? C.charcoal : variant==='ghost' ? C.primary : 'white';
return ;
};
const IconBtn = ({ name, onClick, dark=false, size=42, iconSize=22, style={} }) => (
);
// ── CHIPS / BADGES ─────────────────────────────────────────
const Chip = ({ children, tone='neutral', style={} }) => {
const tones = {
neutral: { background: C.surfaceHigh, color: C.muted },
vino: { background: 'rgba(79,23,40,0.09)', color: C.primary },
dorado: { background: 'rgba(184,134,11,0.14)', color: '#8A6508' },
glass: { background: 'rgba(254,249,241,0.16)', color: 'white', backdropFilter:'blur(12px)', WebkitBackdropFilter:'blur(12px)' },
success: { background: 'rgba(34,197,94,0.12)', color: '#15803D' },
error: { background: 'rgba(186,26,26,0.10)', color: C.error },
};
return {children};
};
const ChefBadge = ({ style={} }) => (
Especialidad del Chef
);
// ── TOGGLE ─────────────────────────────────────────────────
const Toggle = ({ on, onChange, size=1 }) => (
onChange(!on)} style={{ width:44*size, height:26*size, borderRadius:9999, cursor:'pointer',
background: on ? C.dorado : C.surfaceHighest, position:'relative', transition:'background 200ms', flexShrink:0 }}>
{[1,2,3,4,5].map(s => (
onChange(s) : undefined}
style={{ cursor: onChange?'pointer':'default', transition:'transform 150ms',
transform: s<=value ? 'scale(1)' : 'scale(0.92)' }}>
))}
);
// ── IMAGEN CON FALLBACK ────────────────────────────────────
const Photo = ({ src, emoji, style={}, radius=20, emojiSize=44 }) => {
const [err, setErr] = useState(false);
if (err || !src) return (
{emoji}
);
return 
setErr(true)} alt=""
style={{ objectFit:'cover', borderRadius: radius, display:'block', ...style }}/>;
};
// ── AVATAR ─────────────────────────────────────────────────
const Avatar = ({ person, size=48, ring=false, dimmed=false, style={} }) => {
const [err, setErr] = useState(false);
const inner = err || !person.photo
? {person.emoji}
: 
setErr(true)} alt={person.name}
style={{ width:'100%', height:'100%', borderRadius:9999, objectFit:'cover', display:'block' }}/>;
return (
);
};
// ── SHEET GRIP ─────────────────────────────────────────────
const Grip = () => (
);
// ── STATUS BAR iOS ─────────────────────────────────────────
const StatusBar = ({ dark=false }) => {
const col = dark ? 'white' : C.charcoal;
return (
);
};
// ── CONFETTI ───────────────────────────────────────────────
const Confetti = ({ count=26 }) => {
const pieces = useMemo(() => Array.from({length:count}).map((_,i) => ({
left: Math.random()*100, delay: Math.random()*400, dur: 900 + Math.random()*800,
color: [C.dorado, C.doradoLight, C.primaryCont, '#E8B4BC', C.success][i % 5],
w: 5 + Math.random()*5, r: Math.random()*360,
})), [count]);
return (
{pieces.map((p,i) => (
))}
{children}
{/* Dynamic island */}
{/* Home indicator */}
);
};
const DesktopFrame = ({ children }) => {
const scale = useFit(1280, 832, 16);
return (
{/* Browser chrome */}
{['#FF5F57','#FEBC2E','#28C840'].map(c =>
)}
{children}
);
};
// ── HELPERS ────────────────────────────────────────────────
const Field = ({ label, value, onChange, placeholder, type='text', textarea, style={} }) => (