// Main app screens — Dashboard, Habitual list, Profile, Store picker
const DashboardScreen = ({ onOpenProduct, onOpenStorePicker, user, currentStore, onTab }) => {
  const [cat, setCat] = useState('Todo');
  const filtered = window.MOCK.discounts.filter(p => cat === 'Todo' || p.cat === cat);
  return (
    <div className="fade-in">
      <div className="app-header" style={{ paddingTop: 6 }}>
        <div className="row gap-3">
          <div className="avatar">{user.initials}</div>
          <div>
            <div className="tiny muted" style={{ fontWeight: 700, letterSpacing: '0.05em' }}>HOLA, {user.name.split(' ')[0].toUpperCase()}</div>
            <button onClick={onOpenStorePicker} className="row gap-2" style={{ background: 'transparent', border: 'none', padding: 0, cursor: 'pointer', fontWeight: 800, fontSize: 14, color: 'var(--c-ink)', marginTop: 2 }}>
              <Icon name="pin" size={14} color="var(--c-primary)"/> {currentStore.name}
              <Icon name="chevron-down" size={14}/>
            </button>
          </div>
        </div>
        <button className="btn-ghost" style={{ width: 44, height: 44, borderRadius: 22, padding: 0, display: 'grid', placeItems: 'center', border: '1.5px solid var(--c-line)', background: 'white', position: 'relative', cursor: 'pointer' }}>
          <Icon name="bell" size={20}/>
          <span style={{ position: 'absolute', top: 8, right: 9, width: 8, height: 8, background: 'var(--c-accent)', borderRadius: '50%', border: '2px solid white' }}/>
        </button>
      </div>

      {/* Hero — savings card */}
      <div className="section">
        <div className="shine-box" style={{ borderRadius: 22, padding: 22, background: 'linear-gradient(135deg, #142340 0%, #1f3358 100%)', color: 'white', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: -30, right: -30, width: 160, height: 160, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,200,69,0.25), transparent 70%)' }}/>
          <div style={{ position: 'absolute', bottom: -50, left: -20, width: 140, height: 140, borderRadius: '50%', background: 'radial-gradient(circle, rgba(27,154,95,0.35), transparent 70%)' }}/>
          <div className="row between" style={{ position: 'relative' }}>
            <div>
              <div className="tiny" style={{ opacity: 0.7, letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 800 }}>Ahorro de la semana</div>
              <div style={{ fontSize: 34, fontWeight: 900, letterSpacing: '-0.03em', marginTop: 6 }}>${user.savings.toFixed(2)}</div>
              <div className="small" style={{ opacity: 0.75, marginTop: 4 }}>vs. precio promedio</div>
            </div>
            <div style={{ background: 'rgba(255,200,69,0.15)', border: '1px solid rgba(255,200,69,0.4)', padding: '8px 12px', borderRadius: 14, textAlign: 'center' }}>
              <Icon name="trending" size={20} color="#ffc845"/>
              <div className="tiny" style={{ color: '#ffc845', fontWeight: 800, marginTop: 2 }}>+24%</div>
            </div>
          </div>
        </div>
      </div>

      {/* Categories */}
      <div className="h-scroll">
        {window.MOCK.categories.map(c => (
          <button key={c} className={'chip ' + (cat === c ? 'active' : '')} onClick={() => setCat(c)} style={{ height: 36, fontSize: 13 }}>
            {c}
          </button>
        ))}
      </div>

      {/* Top discounts */}
      <div className="section">
        <div className="row between" style={{ marginBottom: 12 }}>
          <h3 style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <Icon name="fire" size={20} color="var(--c-accent)"/> Descuentos calientes
          </h3>
          <a className="small" style={{ color: 'var(--c-primary)', fontWeight: 700, cursor: 'pointer' }}>Ver todo</a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {filtered.slice(0, 4).map(p => (
            <button key={p.id} onClick={() => onOpenProduct(p)} className="card card-tight fade-in" style={{ textAlign: 'left', cursor: 'pointer', border: 'none', position: 'relative', fontFamily: 'inherit' }}>
              <div className="discount-badge" style={{ position: 'absolute', top: 10, right: 10, zIndex: 2 }}>-{p.pct}%</div>
              <ProductImg kind={p.img} size="lg" label={p.unit}/>
              <div style={{ padding: '10px 4px 4px' }}>
                <div className="tiny muted" style={{ fontWeight: 700 }}>{p.store}</div>
                <div style={{ fontSize: 13.5, fontWeight: 700, marginTop: 2, lineHeight: 1.25 }}>{p.name}</div>
                <div className="row gap-2" style={{ marginTop: 6, alignItems: 'baseline' }}>
                  <span style={{ fontSize: 16, fontWeight: 900, color: 'var(--c-primary-deep)' }}>${p.price.toFixed(2)}</span>
                  <span className="struck tiny">${p.was.toFixed(2)}</span>
                </div>
              </div>
            </button>
          ))}
        </div>
      </div>

      {/* Habitual savings */}
      <div className="section">
        <div className="row between" style={{ marginBottom: 12 }}>
          <h3 style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <Icon name="sparkle" size={18} color="var(--c-primary)"/> Tu lista, con descuento
          </h3>
          <a onClick={() => onTab('list')} className="small" style={{ color: 'var(--c-primary)', fontWeight: 700, cursor: 'pointer' }}>Mi lista</a>
        </div>
        <div className="card" style={{ padding: 6 }}>
          {window.MOCK.habitualDiscounts.map((h, i) => (
            <div key={i} className="row gap-3" style={{ padding: '12px 12px', borderBottom: i < window.MOCK.habitualDiscounts.length - 1 ? '1px solid var(--c-line-2)' : 'none' }}>
              <ProductImg kind={h.img} size="sm"/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 700, fontSize: 14 }}>{h.product}</div>
                <div className="tiny muted" style={{ marginTop: 2, display: 'flex', alignItems: 'center', gap: 5 }}>
                  <Icon name="store" size={12} color="var(--c-ink-3)"/> mejor en <b style={{ color: 'var(--c-ink-2)' }}>{h.store}</b>
                </div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div className="row gap-2" style={{ justifyContent: 'flex-end', alignItems: 'baseline' }}>
                  <span style={{ fontSize: 14, fontWeight: 900, color: 'var(--c-primary-deep)' }}>${h.price.toFixed(2)}</span>
                  <span className="struck tiny">${h.was.toFixed(2)}</span>
                </div>
                <span className="chip green" style={{ height: 22, fontSize: 11, marginTop: 4, padding: '0 8px' }}>-{h.pct}%</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* CTA shop */}
      <div className="section" style={{ paddingBottom: 24 }}>
        <button className="card" onClick={() => onTab('shop')} style={{ width: '100%', padding: 18, display: 'flex', alignItems: 'center', gap: 14, background: 'linear-gradient(135deg, var(--c-accent-soft), #fff3e6)', border: '1px solid #ffd6c2', cursor: 'pointer', textAlign: 'left' }}>
          <div style={{ width: 52, height: 52, borderRadius: 14, background: 'var(--c-accent)', display: 'grid', placeItems: 'center', boxShadow: '0 8px 18px rgba(255,107,61,0.34)' }}>
            <Icon name="cart" size={26} color="white"/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 800, fontSize: 15 }}>Iniciar compra inteligente</div>
            <div className="small muted" style={{ marginTop: 2 }}>Te organizamos por tienda con el mejor descuento</div>
          </div>
          <Icon name="chevron-right" size={20} color="var(--c-ink-2)"/>
        </button>
      </div>
    </div>
  );
};

const HabitualScreen = () => {
  const [q, setQ] = useState('');
  const items = window.MOCK.habitual.filter(p => p.name.toLowerCase().includes(q.toLowerCase()));
  return (
    <div className="fade-in">
      <div className="app-header">
        <h2>Mi lista</h2>
        <button className="btn btn-sm btn-primary" style={{ paddingLeft: 12, paddingRight: 14 }}>
          <Icon name="plus" size={16} color="white"/> Producto
        </button>
      </div>
      <div className="section section-tight">
        <div className="input-icon">
          <span className="ico"><Icon name="search" size={18}/></span>
          <input className="input" placeholder="Buscar en tu lista habitual..." value={q} onChange={e => setQ(e.target.value)} style={{ height: 48 }}/>
        </div>
      </div>
      <div className="section section-tight">
        <div className="row between">
          <div className="small muted" style={{ fontWeight: 700 }}>{items.length} productos · Compra habitual</div>
          <button className="chip">Ordenar <Icon name="chevron-down" size={12}/></button>
        </div>
      </div>
      <div className="section" style={{ paddingTop: 8, paddingBottom: 16 }}>
        <div className="card" style={{ padding: 6 }}>
          {items.map((p, i) => (
            <div key={p.id} className="row gap-3" style={{ padding: '12px 10px', borderBottom: i < items.length - 1 ? '1px solid var(--c-line-2)' : 'none' }}>
              <ProductImg kind={p.img} size="sm"/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 700, fontSize: 14 }}>{p.name}</div>
                <div className="tiny muted" style={{ marginTop: 2 }}>{p.unit} · {p.cat}</div>
                <div className="row gap-2" style={{ marginTop: 6 }}>
                  <span className="chip green" style={{ height: 22, fontSize: 11, padding: '0 8px' }}>
                    <Icon name="tag" size={11}/> ${p.bestPrice.toFixed(2)} en {p.bestStore.split(' ')[0]}
                  </span>
                </div>
              </div>
              <button style={{ background: 'transparent', border: 'none', cursor: 'pointer', padding: 6, color: 'var(--c-ink-3)' }}>
                <Icon name="settings" size={18}/>
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const ProfileScreen = ({ user, onLogout }) => {
  const progress = (user.points % 1000) / 1000;
  return (
    <div className="fade-in">
      <div className="app-header">
        <h2>Mi perfil</h2>
        <button className="btn-ghost" style={{ width: 40, height: 40, borderRadius: 20, padding: 0, display: 'grid', placeItems: 'center', border: '1.5px solid var(--c-line)', background: 'white', cursor: 'pointer' }}>
          <Icon name="settings" size={18}/>
        </button>
      </div>
      <div className="section">
        <div style={{ borderRadius: 22, padding: 22, background: 'linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-deep) 100%)', color: 'white', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', right: -30, top: -30, width: 160, height: 160, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%)' }}/>
          <div className="row gap-3" style={{ alignItems: 'center', position: 'relative' }}>
            <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'linear-gradient(135deg, var(--c-accent), var(--c-yellow))', display: 'grid', placeItems: 'center', fontSize: 22, fontWeight: 900, border: '3px solid white' }}>
              {user.initials}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 18, fontWeight: 800 }}>{user.name}</div>
              <div className="small" style={{ opacity: 0.85 }}>{user.email}</div>
            </div>
            <div className="chip" style={{ background: 'rgba(255,255,255,0.18)', color: 'white' }}>
              <Icon name="crown" size={12} color="#ffc845"/> {user.level}
            </div>
          </div>
          <div style={{ marginTop: 22, padding: '14px 16px', background: 'rgba(0,0,0,0.18)', borderRadius: 14, position: 'relative' }}>
            <div className="row between">
              <div>
                <div className="tiny" style={{ opacity: 0.7, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 800 }}>Puntos disponibles</div>
                <div style={{ fontSize: 30, fontWeight: 900, marginTop: 2, letterSpacing: '-0.02em' }}>{user.points.toLocaleString()}</div>
              </div>
              <Icon name="sparkle" size={30} color="#ffc845"/>
            </div>
            <div style={{ marginTop: 12 }}>
              <div className="bar-track" style={{ background: 'rgba(255,255,255,0.18)' }}>
                <div className="bar-fill" style={{ width: `${progress*100}%`, background: 'linear-gradient(90deg, var(--c-yellow), var(--c-accent))' }}/>
              </div>
              <div className="tiny" style={{ opacity: 0.85, marginTop: 6 }}>Te faltan <b>{1000 - (user.points % 1000)} pts</b> para subir de nivel</div>
            </div>
          </div>
        </div>
      </div>

      <div className="section">
        <div className="row gap-3">
          {[
            { v: user.captures, l: 'Capturas', i: 'camera', c: 'var(--c-primary)' },
            { v: '$' + user.savings.toFixed(0), l: 'Ahorro', i: 'wallet', c: 'var(--c-accent)' },
            { v: '12', l: 'Compras', i: 'cart', c: 'var(--c-berry)' },
          ].map((s, i) => (
            <div key={i} className="card card-pad" style={{ flex: 1, textAlign: 'center', padding: 14 }}>
              <div style={{ width: 36, height: 36, borderRadius: 12, background: s.c + '20', display: 'grid', placeItems: 'center', margin: '0 auto 6px' }}>
                <Icon name={s.i} size={18} color={s.c}/>
              </div>
              <div style={{ fontSize: 18, fontWeight: 900 }}>{s.v}</div>
              <div className="tiny muted" style={{ fontWeight: 700 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="section">
        <div className="eyebrow" style={{ marginBottom: 8, padding: '0 4px' }}>Recompensas</div>
        <div className="card" style={{ padding: 16, display: 'flex', alignItems: 'center', gap: 14, background: 'linear-gradient(135deg, #fff3cf, #ffe190)', border: '1px solid #f5d27a' }}>
          <div style={{ width: 48, height: 48, borderRadius: 14, background: 'white', display: 'grid', placeItems: 'center' }}>
            <Icon name="gift" size={24} color="#8a6300"/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 800, fontSize: 14, color: '#5e4500' }}>Canjea 1.000 pts</div>
            <div className="small" style={{ color: '#8a6300', marginTop: 2 }}>$5 de descuento en tu próxima compra</div>
          </div>
          <Icon name="chevron-right" size={20} color="#8a6300"/>
        </div>
      </div>

      <div className="section" style={{ paddingBottom: 24 }}>
        <div className="eyebrow" style={{ marginBottom: 8, padding: '0 4px' }}>Cuenta</div>
        <div className="card" style={{ overflow: 'hidden' }}>
          {[
            { i: 'user', l: 'Datos personales' },
            { i: 'pin', l: 'Direcciones y supermercados' },
            { i: 'bell', l: 'Notificaciones' },
            { i: 'shield', l: 'Privacidad y seguridad' },
            { i: 'help', l: 'Ayuda y soporte' },
          ].map((it, i, a) => (
            <button key={i} className="row gap-3" style={{ width: '100%', padding: '14px 16px', background: 'transparent', border: 'none', borderBottom: i < a.length - 1 ? '1px solid var(--c-line-2)' : 'none', cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit', alignItems: 'center' }}>
              <Icon name={it.i} size={20} color="var(--c-ink-2)"/>
              <span style={{ flex: 1, fontWeight: 700, fontSize: 14 }}>{it.l}</span>
              <Icon name="chevron-right" size={18} color="var(--c-ink-3)"/>
            </button>
          ))}
          <button onClick={onLogout} className="row gap-3" style={{ width: '100%', padding: '14px 16px', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit', alignItems: 'center', color: 'var(--c-berry)' }}>
            <Icon name="logout" size={20} color="var(--c-berry)"/>
            <span style={{ flex: 1, fontWeight: 700, fontSize: 14 }}>Cerrar sesión</span>
          </button>
        </div>
        <div className="tiny muted" style={{ textAlign: 'center', marginTop: 16 }}>PrecioVivo v1.0 · Hecho con 🥬</div>
      </div>
    </div>
  );
};

const StorePickerModal = ({ stores, current, onSelect, onClose }) => {
  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal-sheet" onClick={e => e.stopPropagation()}>
        <div className="modal-grabber"/>
        <div className="row between" style={{ marginBottom: 16 }}>
          <div>
            <h2>Cerca de ti</h2>
            <div className="small muted" style={{ marginTop: 2, display: 'flex', alignItems: 'center', gap: 5 }}>
              <Icon name="pin" size={14} color="var(--c-primary)"/> Cra 12 #34-56, Bogotá
            </div>
          </div>
          <button onClick={onClose} className="btn-ghost" style={{ width: 36, height: 36, borderRadius: 18, padding: 0, display: 'grid', placeItems: 'center', border: '1.5px solid var(--c-line)', background: 'white', cursor: 'pointer' }}>
            <Icon name="close" size={18}/>
          </button>
        </div>

        {/* Mini map */}
        <div style={{ position: 'relative', height: 160, borderRadius: 18, overflow: 'hidden', background: 'linear-gradient(135deg, #e1f3e8 0%, #d6e7df 100%)', marginBottom: 18 }}>
          {/* roads */}
          <svg viewBox="0 0 320 160" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
            <path d="M-10 90 Q 100 70 180 100 T 340 80" stroke="white" strokeWidth="14" fill="none" opacity="0.7"/>
            <path d="M40 -10 Q 70 60 110 90 T 130 170" stroke="white" strokeWidth="10" fill="none" opacity="0.6"/>
            <path d="M250 -10 L 230 170" stroke="white" strokeWidth="8" fill="none" opacity="0.5"/>
            <path d="M-10 30 L 340 40" stroke="white" strokeWidth="6" fill="none" opacity="0.5"/>
          </svg>
          {/* User pin */}
          <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)', zIndex: 5 }}>
            <div style={{ position: 'relative' }}>
              <div style={{ position: 'absolute', inset: 0, border: '2px solid var(--c-primary)', borderRadius: '50%', animation: 'pulse-ring 1.8s ease-out infinite' }}/>
              <div style={{ width: 18, height: 18, borderRadius: '50%', background: 'var(--c-primary)', border: '3px solid white', boxShadow: '0 0 0 2px var(--c-primary)' }}/>
            </div>
          </div>
          {/* store pins */}
          {[
            { left: '22%', top: '32%', s: stores[0] },
            { left: '70%', top: '24%', s: stores[1] },
            { left: '78%', top: '68%', s: stores[2] },
            { left: '30%', top: '72%', s: stores[3] },
            { left: '60%', top: '50%', s: stores[4] }
          ].map((p, i) => (
            <div key={i} className="map-pin" style={{ left: p.left, top: p.top, background: p.s.color }}>
              <span>{p.s.short}</span>
            </div>
          ))}
        </div>

        <div className="stack stack-2">
          {stores.map(s => (
            <button key={s.id} onClick={() => onSelect(s)} className="row gap-3" style={{ width: '100%', padding: 14, background: current.id === s.id ? 'var(--c-primary-soft)' : 'white', border: '1.5px solid ' + (current.id === s.id ? 'var(--c-primary)' : 'var(--c-line)'), borderRadius: 16, cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit', alignItems: 'center' }}>
              <StoreDot color={s.color} short={s.short} size={44}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 800, fontSize: 15 }}>{s.name}</div>
                <div className="tiny muted" style={{ marginTop: 2, display: 'flex', alignItems: 'center', gap: 6 }}>
                  <Icon name="pin" size={11}/> {s.distance} · {s.address}
                </div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <span className={'chip ' + (s.open ? 'green' : 'berry')} style={{ height: 22, fontSize: 10, padding: '0 8px' }}>
                  {s.open ? 'Abierto' : 'Cerrado'}
                </span>
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

const ProductRankingModal = ({ product, onClose }) => {
  const ranking = window.MOCK.ranking[product.id] || [];
  const max = Math.max(...ranking.map(r => r.price));
  const getColor = (storeName) => (window.MOCK.supermarkets.find(s => s.name === storeName) || {}).color || '#888';
  const getShort = (storeName) => (window.MOCK.supermarkets.find(s => s.name === storeName) || {}).short || '?';
  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal-sheet" onClick={e => e.stopPropagation()}>
        <div className="modal-grabber"/>
        <div className="row gap-3" style={{ marginBottom: 18, alignItems: 'flex-start' }}>
          <ProductImg kind={product.img} size="md"/>
          <div style={{ flex: 1 }}>
            <div className="tiny muted" style={{ fontWeight: 700 }}>{product.cat} · {product.unit}</div>
            <h2 style={{ marginTop: 2, fontSize: 19 }}>{product.name}</h2>
            <div className="row gap-2" style={{ marginTop: 8, alignItems: 'baseline' }}>
              <span style={{ fontSize: 22, fontWeight: 900, color: 'var(--c-primary-deep)' }}>${product.price.toFixed(2)}</span>
              <span className="struck">${product.was.toFixed(2)}</span>
              <span className="discount-badge">-{product.pct}%</span>
            </div>
          </div>
          <button onClick={onClose} className="btn-ghost" style={{ width: 36, height: 36, borderRadius: 18, padding: 0, display: 'grid', placeItems: 'center', border: '1.5px solid var(--c-line)', background: 'white', cursor: 'pointer' }}>
            <Icon name="close" size={18}/>
          </button>
        </div>
        <div className="eyebrow" style={{ marginBottom: 12 }}>Ranking de descuentos · 5 supermercados</div>
        <div className="stack stack-3">
          {ranking.map((r, i) => {
            const isBest = i === 0;
            const isWorst = i === ranking.length - 1;
            return (
              <div key={r.store} className="card" style={{ padding: 14, border: isBest ? '2px solid var(--c-primary)' : '1px solid var(--c-line)', background: isBest ? 'var(--c-primary-soft)' : 'white' }}>
                <div className="row gap-3" style={{ alignItems: 'center' }}>
                  <div style={{ position: 'relative' }}>
                    <StoreDot color={getColor(r.store)} short={getShort(r.store)} size={38}/>
                    {isBest && <div style={{ position: 'absolute', top: -6, right: -6, width: 20, height: 20, borderRadius: '50%', background: 'var(--c-yellow)', display: 'grid', placeItems: 'center', boxShadow: '0 2px 6px rgba(0,0,0,0.15)' }}><Icon name="crown" size={11} color="#5e4500"/></div>}
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="row between" style={{ alignItems: 'baseline' }}>
                      <div style={{ fontWeight: 800, fontSize: 14 }}>{r.store}</div>
                      <div className="money" style={{ fontSize: 15, fontWeight: 900, color: isBest ? 'var(--c-primary-deep)' : 'var(--c-ink)' }}>${r.price.toFixed(2)}</div>
                    </div>
                    <div className="row between" style={{ marginTop: 8, alignItems: 'center', gap: 10 }}>
                      <div style={{ flex: 1 }}>
                        <div className="bar-track">
                          <div className="bar-fill" style={{ width: `${(r.price/max)*100}%`, background: isBest ? 'linear-gradient(90deg, var(--c-primary), var(--c-mint))' : isWorst ? 'linear-gradient(90deg, var(--c-berry), #ff9eb6)' : 'linear-gradient(90deg, var(--c-yellow), #ffd97a)' }}/>
                        </div>
                      </div>
                      <span className={'chip ' + (isBest ? 'green' : isWorst ? 'berry' : 'yellow')} style={{ height: 22, fontSize: 11, padding: '0 8px' }}>
                        {r.pct > 0 ? `-${r.pct}%` : 'sin desc.'}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        <div className="tiny muted" style={{ textAlign: 'center', marginTop: 16, marginBottom: 6 }}>
          Capturado por la comunidad PrecioVivo · actualizado hace 12 min
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { DashboardScreen, HabitualScreen, ProfileScreen, StorePickerModal, ProductRankingModal });