/* global React, IntakeIcon, IntakeStatusBar, IntakeTopBar, IntakeStepDots, IntakeAvatar, IntakeFakeQR, intakeGradientFor,
          INTAKE_PRODUCERS, INTAKE_DAILY_PRICES, INTAKE_PAYMENT_METHODS, INTAKE_TODAY, INTAKE_STATUS,
          intakeFmtCOP, intakeFmtKG, intakeFmtUSD, intakeFmtInt */

// ───── Annona Intake — Screens 6-10 ─────
const Icon2 = IntakeIcon;

// ═══════════════════════════════════════════════════════════════
// SCREEN 6 — PRICE & PAYMENT METHOD
// ═══════════════════════════════════════════════════════════════
function ScreenPrice() {
  const totalKg = 320.4;
  const pricePerKg = 14_850;
  const totalCop = totalKg * pricePerKg;
  const selected = 'nequi';

  return (
    <div className="intake-screen intake-root">
      <IntakeStatusBar sync="online" />
      <IntakeTopBar title="Precio y pago" subtitle="Paso 3 de 4" onBack right={<IntakeStepDots step={2} total={4} />} />

      <div className="scroll" style={{ padding: '12px 16px 100px' }}>
        {/* Big total card */}
        <div className="intake-card" style={{ padding: 22, background: 'linear-gradient(135deg,#2B1D10 0%,#3F2B18 100%)', color: '#FBF7F0', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: -60, right: -40, width: 220, height: 220, borderRadius: '50%', background: 'radial-gradient(circle, rgba(184,137,75,0.35), transparent 60%)' }} />
          <div style={{ fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gold-dim)', fontWeight: 600 }}>Total a pagar</div>
          <div className="f-display f-num" style={{ fontSize: 48, letterSpacing: '-0.02em', marginTop: 4, lineHeight: 1 }}>
            $ {totalCop.toLocaleString('es-CO').replace(/,/g, '.')}
          </div>
          <div style={{ fontSize: 14, color: 'rgba(251,247,240,0.7)', marginTop: 6 }}>Pesos colombianos · COP</div>

          <div style={{ marginTop: 16, paddingTop: 14, borderTop: '1px solid rgba(255,255,255,0.12)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, fontSize: 13 }}>
            <div>
              <div style={{ color: 'rgba(251,247,240,0.6)', fontSize: 11 }}>Peso</div>
              <div className="f-num" style={{ fontWeight: 600, marginTop: 2 }}>{totalKg.toFixed(1).replace('.', ',')} kg</div>
            </div>
            <div>
              <div style={{ color: 'rgba(251,247,240,0.6)', fontSize: 11 }}>Precio día</div>
              <div className="f-num" style={{ fontWeight: 600, marginTop: 2 }}>$ 14.850 / kg</div>
            </div>
          </div>
        </div>

        {/* FX reference */}
        <div style={{ marginTop: 12, padding: '10px 14px', background: 'var(--paper-dim)', borderRadius: 12, fontSize: 12, color: 'var(--ink-2)', display: 'flex', gap: 14 }}>
          <span>≈ <b className="f-num">$ 1.155 USD</b></span>
          <span style={{ color: 'var(--ink-3)' }}>FX 4.120 · fijado 05:42</span>
        </div>

        {/* Payment methods */}
        <div style={{ marginTop: 22, fontSize: 12, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>
          ¿Cómo quiere recibir el pago?
        </div>
        <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {INTAKE_PAYMENT_METHODS.map(m => {
            const isSel = m.id === selected;
            return (
              <div key={m.id} className="intake-card" style={{ padding: 14, display: 'flex', gap: 14, alignItems: 'center', border: isSel ? '2px solid var(--gold)' : '2px solid transparent' }}>
                <div style={{ width: 48, height: 48, borderRadius: 14, background: isSel ? 'var(--gold-soft)' : 'var(--paper-dim)', color: isSel ? 'var(--gold)' : 'var(--ink-2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon2 name={m.icon} size={22} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <div style={{ fontWeight: 600, fontSize: 16 }}>{m.label}</div>
                    {m.tag && <span className="chip green" style={{ height: 20, fontSize: 10 }}>{m.tag}</span>}
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>{m.sub}</div>
                </div>
                <div style={{ width: 24, height: 24, borderRadius: '50%', border: '2px solid ' + (isSel ? 'var(--gold)' : 'var(--ink-line)'), background: isSel ? 'var(--gold)' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  {isSel && <Icon2 name="check" size={14} color="#2B1D10" stroke={3} />}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="shelf">
        <button className="btn-primary gold">Confirmar y firmar <Icon2 name="chev" size={20} /></button>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// SCREEN 7 — PHOTO + CONFIRM
// ═══════════════════════════════════════════════════════════════
function ScreenConfirm() {
  const p = INTAKE_PRODUCERS[0];
  return (
    <div className="intake-screen intake-root">
      <IntakeStatusBar sync="online" />
      <IntakeTopBar title="Confirmar entrega" subtitle="Paso 4 de 4" onBack right={<IntakeStepDots step={3} total={4} />} />

      <div className="scroll" style={{ padding: '14px 16px 100px' }}>
        {/* Photo capture area */}
        <div style={{ aspectRatio: '4 / 5', borderRadius: 20, background: 'linear-gradient(135deg,#8A5A2B,#2B1D10)', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {/* Producer photo placeholder */}
          <div style={{ width: '100%', height: '100%', background: 'radial-gradient(ellipse at center 40%, rgba(184,137,75,0.5), transparent 60%)', position: 'absolute', inset: 0 }} />
          <div style={{ position: 'relative', color: '#FBF7F0', textAlign: 'center' }}>
            <div style={{ width: 120, height: 120, borderRadius: '50%', background: 'rgba(251,247,240,0.12)', border: '3px dashed rgba(251,247,240,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto' }}>
              <Icon2 name="camera" size={44} color="#FBF7F0" />
            </div>
            <div style={{ fontSize: 15, fontWeight: 500, marginTop: 14 }}>Tomar foto del productor</div>
            <div style={{ fontSize: 12, color: 'rgba(251,247,240,0.7)', marginTop: 2 }}>con el saco al fondo · confirma entrega</div>
          </div>

          {/* Capture button */}
          <div style={{ position: 'absolute', bottom: 16, left: 0, right: 0, display: 'flex', justifyContent: 'center' }}>
            <div style={{ width: 64, height: 64, borderRadius: '50%', background: '#FBF7F0', border: '3px solid rgba(251,247,240,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <div style={{ width: 50, height: 50, borderRadius: '50%', background: '#FBF7F0', boxShadow: 'inset 0 0 0 2px #2B1D10' }} />
            </div>
          </div>
        </div>

        {/* Summary card */}
        <div className="intake-card" style={{ marginTop: 16, padding: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <IntakeAvatar initials={p.initials} color={intakeGradientFor(p.id)} />
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 600, fontSize: 15 }}>{p.name}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>La Esperanza · Caturra</div>
            </div>
          </div>
          <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--ink-line)', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, fontSize: 12 }}>
            <div><div style={{ color: 'var(--ink-3)' }}>Sacos</div><div style={{ fontWeight: 600, fontSize: 15, marginTop: 2 }} className="f-num">5</div></div>
            <div><div style={{ color: 'var(--ink-3)' }}>Peso</div><div style={{ fontWeight: 600, fontSize: 15, marginTop: 2 }} className="f-num">320,4 kg</div></div>
            <div><div style={{ color: 'var(--ink-3)' }}>Pago</div><div style={{ fontWeight: 600, fontSize: 14, marginTop: 2 }}>Nequi</div></div>
          </div>
          <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--ink-line)', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
            <span style={{ fontSize: 13, color: 'var(--ink-2)' }}>Total</span>
            <span className="f-display f-num" style={{ fontSize: 26, fontWeight: 600 }}>$ 4.758.540</span>
          </div>
        </div>

        {/* Terms */}
        <div style={{ marginTop: 14, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
          <div style={{ width: 24, height: 24, borderRadius: 6, border: '2px solid var(--gold)', background: 'var(--gold)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
            <Icon2 name="check" size={14} color="#2B1D10" stroke={3} />
          </div>
          <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.4 }}>
            El productor confirma el peso, el precio del día y el método de pago. El bono digital se entrega ahora y se puede cobrar en caja.
          </div>
        </div>
      </div>

      <div className="shelf">
        <button className="btn-primary green">
          <Icon2 name="check" size={22} color="#FBF7F0" /> Confirmar · generar bono
        </button>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// SCREEN 8 — DIGITAL BON (receipt with QR)
// ═══════════════════════════════════════════════════════════════
function ScreenReceipt() {
  return (
    <div className="intake-screen intake-root">
      <IntakeStatusBar sync="online" />
      <IntakeTopBar title="Bono generado" subtitle="IN-2045 · 11:02" onBack right={<span className="chip green" style={{ height: 22, fontSize: 11 }}>Listo</span>} />

      <div className="scroll" style={{ padding: '16px 16px 100px' }}>
        {/* Receipt card */}
        <div className="intake-card" style={{ padding: 0, overflow: 'hidden', background: '#FBF7F0' }}>
          {/* Header strip */}
          <div style={{ padding: '14px 18px', background: '#2B1D10', color: '#FBF7F0', display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 28, height: 28, borderRadius: 8, background: 'var(--gold)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#2B1D10', fontFamily: 'Fraunces,serif', fontWeight: 600 }}>A</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 10, color: 'var(--gold-dim)', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600 }}>Annona · Bono de compra</div>
              <div style={{ fontSize: 13, fontWeight: 500 }}>Asocafé Huila · Pitalito</div>
            </div>
          </div>

          {/* QR */}
          <div style={{ padding: '24px 18px 18px', textAlign: 'center' }}>
            <div style={{ display: 'inline-block', padding: 10, background: '#fff', borderRadius: 14, boxShadow: 'var(--card-shadow)' }}>
              <IntakeFakeQR size={150} seed="IN2045" />
            </div>
            <div style={{ marginTop: 12, fontSize: 12, color: 'var(--ink-3)', fontWeight: 500, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Presentar en caja</div>
            <div className="f-num" style={{ fontSize: 22, fontWeight: 600, letterSpacing: '0.1em', marginTop: 4 }}>IN-2045</div>
          </div>

          {/* Amount big */}
          <div style={{ padding: '0 18px 20px', textAlign: 'center' }}>
            <div className="f-display f-num" style={{ fontSize: 42, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1 }}>$ 4.758.540</div>
            <div style={{ marginTop: 6, fontSize: 13, color: 'var(--ink-2)' }}>COP · vía <b>Nequi</b> al +57 314 •••• 4782</div>
          </div>

          {/* Perforation */}
          <div style={{ position: 'relative', height: 1, background: 'transparent', borderTop: '2px dashed var(--ink-line)', margin: '0 18px' }} />

          {/* Details */}
          <div style={{ padding: '16px 18px', fontSize: 13 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', rowGap: 8, color: 'var(--ink-2)' }}>
              <span>Productor</span><span style={{ fontWeight: 600, color: 'var(--ink)' }}>Ana María Restrepo</span>
              <span>Plot</span><span style={{ fontWeight: 600, color: 'var(--ink)' }}>La Esperanza · PL-214A</span>
              <span>Sacos · peso</span><span className="f-num" style={{ fontWeight: 600, color: 'var(--ink)' }}>5 · 320,4 kg</span>
              <span>Precio día</span><span className="f-num" style={{ fontWeight: 600, color: 'var(--ink)' }}>$ 14.850 / kg</span>
              <span>Inspector</span><span style={{ fontWeight: 600, color: 'var(--ink)' }}>Walter Buizer</span>
              <span>Fecha</span><span style={{ fontWeight: 600, color: 'var(--ink)' }}>23 abr 2026 · 11:02</span>
            </div>
          </div>

          {/* Signature line */}
          <div style={{ padding: '0 18px 18px', fontSize: 10, color: 'var(--ink-3)', lineHeight: 1.4 }}>
            Bono válido 48 h · vincular a trazabilidad EUDR · firmado digitalmente
          </div>
        </div>

        {/* Share actions */}
        <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
          {[
            { name: 'wa',      label: 'WhatsApp', c: '#25D366' },
            { name: 'mail',    label: 'E-mail',   c: 'var(--blue)' },
            { name: 'printer', label: 'Imprimir', c: 'var(--ink-2)' },
          ].map(a => (
            <div key={a.label} style={{ background: 'var(--card)', borderRadius: 16, padding: '14px 10px', textAlign: 'center', boxShadow: 'var(--card-shadow)' }}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--paper-dim)', color: a.c, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto' }}>
                <Icon2 name={a.name} size={22} color={a.c} />
              </div>
              <div style={{ fontSize: 12, fontWeight: 600, marginTop: 8 }}>{a.label}</div>
            </div>
          ))}
        </div>

        {/* Contact */}
        <div style={{ marginTop: 14, fontSize: 12, color: 'var(--ink-3)', textAlign: 'center' }}>
          Enviado a +57 314 •••• 4782 por WhatsApp
        </div>
      </div>

      <div className="shelf">
        <button className="btn-primary">Listo · nueva entrega</button>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// SCREEN 9 — KASSA (cashier payout)
// ═══════════════════════════════════════════════════════════════
function ScreenKassa() {
  return (
    <div className="intake-screen intake-root">
      <IntakeStatusBar sync="online" />
      <div className="topbar" style={{ background: 'var(--ink)', color: '#FBF7F0', borderBottom: 'none' }}>
        <div className="back" style={{ background: 'rgba(251,247,240,0.12)', color: '#FBF7F0' }}><Icon2 name="back" size={22} color="#FBF7F0" /></div>
        <div style={{ flex: 1 }}>
          <h1 style={{ color: '#FBF7F0' }}>Caja · Pitalito</h1>
          <div style={{ fontSize: 12, color: 'var(--gold-dim)', marginTop: 1 }}>Operadora · Patricia Moreno</div>
        </div>
        <div style={{ padding: '4px 10px', borderRadius: 999, background: 'var(--gold)', color: '#2B1D10', fontSize: 11, fontWeight: 600 }}>Caja abierta</div>
      </div>

      <div className="scroll" style={{ padding: '16px 16px 100px' }}>
        {/* Scanned voucher preview */}
        <div className="intake-card" style={{ padding: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 11, color: 'var(--green)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--green)' }} /> Bono leído · válido
          </div>
          <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', gap: 12 }}>
            <IntakeAvatar initials="AR" size="lg" color={intakeGradientFor('P-0214')} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 500, letterSpacing: '0.05em', textTransform: 'uppercase' }}>IN-2045 · hace 6 min</div>
              <div className="f-display" style={{ fontSize: 20, marginTop: 2, letterSpacing: '-0.01em' }}>Ana María Restrepo</div>
              <div style={{ fontSize: 12, color: 'var(--ink-2)', marginTop: 2 }}>P-0214 · La Esperanza</div>
            </div>
          </div>
        </div>

        {/* Amount to pay */}
        <div style={{ marginTop: 18, padding: 22, background: 'var(--gold)', borderRadius: 22, color: '#2B1D10', textAlign: 'center', boxShadow: '0 8px 24px rgba(184,137,75,0.35)' }}>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', opacity: 0.7 }}>Pagar al productor</div>
          <div className="f-display f-num" style={{ fontSize: 46, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1, marginTop: 6 }}>$ 4.758.540</div>
          <div style={{ fontSize: 14, marginTop: 4, opacity: 0.8 }}>COP vía Nequi</div>
        </div>

        {/* Method details */}
        <div className="intake-card" style={{ marginTop: 14, padding: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--gold-soft)', color: 'var(--gold)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon2 name="phone" size={22} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 600, fontSize: 15 }}>Nequi · +57 314 •••• 4782</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>Titular: Ana María Restrepo · verificado</div>
            </div>
          </div>
        </div>

        {/* Breakdown */}
        <div className="intake-card" style={{ marginTop: 10, padding: 16, fontSize: 13 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', rowGap: 8, color: 'var(--ink-2)' }}>
            <span>5 sacos · 320,4 kg</span><span className="f-num" style={{ color: 'var(--ink)', fontWeight: 500 }}>320,4 kg</span>
            <span>× $ 14.850 /kg</span><span className="f-num" style={{ color: 'var(--ink)', fontWeight: 500 }}>$ 4.758.540</span>
            <span>Comisión caja</span><span className="f-num" style={{ color: 'var(--ink)', fontWeight: 500 }}>$ 0</span>
          </div>
        </div>

        {/* Security */}
        <div style={{ marginTop: 14, padding: '10px 14px', background: 'var(--paper-dim)', borderRadius: 12, fontSize: 12, color: 'var(--ink-2)', display: 'flex', gap: 10, alignItems: 'center' }}>
          <Icon2 name="user" size={16} />
          Verifica identidad del productor antes de transferir
        </div>
      </div>

      <div className="shelf">
        <button className="btn-primary green">
          <Icon2 name="check" size={22} color="#FBF7F0" /> Transferir · $ 4.758.540
        </button>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// SCREEN 10 — TODAY HISTORY
// ═══════════════════════════════════════════════════════════════
function ScreenHistory() {
  const grouped = [
    { label: 'Mañana', items: INTAKE_TODAY.slice(0, 3) },
    { label: 'Tarde', items: INTAKE_TODAY.slice(3) },
  ];
  const totalCop = INTAKE_TODAY.reduce((a, x) => a + x.value_cop, 0);
  const totalKg  = INTAKE_TODAY.reduce((a, x) => a + x.kg, 0);

  return (
    <div className="intake-screen intake-root">
      <IntakeStatusBar sync="online" />
      <IntakeTopBar title="Entregas del día" subtitle="Lunes, 23 abr · Pitalito" onBack right={<div style={{ width: 40, height: 40, borderRadius: 12, background: 'var(--paper-dim)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon2 name="download" size={18} /></div>} />

      <div className="scroll" style={{ padding: '12px 16px 100px' }}>
        {/* Summary strip */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
          <div className="metric" style={{ padding: 12 }}>
            <div className="label">Entregas</div>
            <div className="value f-num">{INTAKE_TODAY.length}</div>
          </div>
          <div className="metric" style={{ padding: 12 }}>
            <div className="label">Peso</div>
            <div className="value f-num" style={{ fontSize: 22 }}>{(totalKg / 1000).toFixed(2).replace('.', ',')}<span style={{ fontSize: 13, color: 'var(--ink-3)', marginLeft: 2 }}>t</span></div>
          </div>
          <div className="metric" style={{ padding: 12 }}>
            <div className="label">Valor</div>
            <div className="value f-num" style={{ fontSize: 20 }}>{(totalCop / 1_000_000).toFixed(1).replace('.', ',')}<span style={{ fontSize: 13, color: 'var(--ink-3)', marginLeft: 2 }}>M</span></div>
          </div>
        </div>

        {/* Filter chips */}
        <div style={{ marginTop: 14, display: 'flex', gap: 8, overflowX: 'auto', paddingBottom: 2 }}>
          <span className="chip ink" style={{ height: 30 }}>Todas</span>
          <span className="chip outline" style={{ height: 30 }}>Pagadas</span>
          <span className="chip outline" style={{ height: 30 }}>En caja</span>
          <span className="chip outline" style={{ height: 30 }}>Pendientes</span>
        </div>

        {grouped.map(g => (
          <div key={g.label} style={{ marginTop: 18 }}>
            <div style={{ fontSize: 12, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600, marginBottom: 8 }}>{g.label}</div>
            <div className="intake-card">
              {g.items.map(it => {
                const s = INTAKE_STATUS[it.status];
                return (
                  <div key={it.id} className="intake-row">
                    <IntakeAvatar initials={it.initials} color={intakeGradientFor(it.id)} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontWeight: 600, fontSize: 15, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{it.producer}</div>
                      <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }} className="f-num">{it.time} · {it.bags} sacos · {intakeFmtKG(it.kg)}</div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <div style={{ fontWeight: 600, fontSize: 14 }} className="f-num">{intakeFmtCOP(it.value_cop)}</div>
                      <span className={'chip ' + s.cls} style={{ marginTop: 4, height: 22, fontSize: 11 }}>{s.label}</span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        ))}

        {/* Close day */}
        <button className="btn-secondary" style={{ marginTop: 22 }}>
          <Icon2 name="flag" size={18} /> Cerrar día · generar reporte
        </button>
      </div>
    </div>
  );
}

Object.assign(window, {
  IntakeScreenPrice: ScreenPrice,
  IntakeScreenConfirm: ScreenConfirm,
  IntakeScreenReceipt: ScreenReceipt,
  IntakeScreenKassa: ScreenKassa,
  IntakeScreenHistory: ScreenHistory,
});