// ROBOCASH chat message components
// Loaded after React + data.js

const { useState, useEffect, useRef, useMemo } = React;
const RC = window.ROBOCASH;

// ─── Brand tokens ───────────────────────────────────────────
const RCT = {
  green: '#00C48F',
  greenDeep: '#00A176',
  greenSoft: '#D7F5E9',
  greenHover: '#00B380',
  ink: '#0E1F1B',
  inkSoft: '#3A4A45',
  mute: '#6B7975',
  hint: '#94A6A0',
  line: 'rgba(14,31,27,0.08)',
  lineSoft: 'rgba(14,31,27,0.05)',
  paper: '#FFFFFF',
  cream: '#F7F4ED',
  creamDeep: '#EEEADE',
  navy: '#1B2A3A',
  coral: '#FF7A59',
};
window.RCT = RCT;

// ─── Solomiya Avatar ────────────────────────────────────────
function SolomiyaAvatar({ size = 32, online = false, ring = false }) {
  // Friendly cartoon-portrait placeholder: gradient circle + simple geometric face
  return (
    <div style={{
      position: 'relative',
      width: size, height: size, flexShrink: 0,
    }}>
      <div style={{
        width: size, height: size, borderRadius: '50%',
        background: 'radial-gradient(120% 120% at 30% 25%, #4FE0B0 0%, #00C48F 55%, #008F65 100%)',
        boxShadow: ring ? '0 0 0 3px #fff, 0 0 0 4.5px ' + RCT.green : 'none',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        overflow: 'hidden',
      }}>
        {/* simple geometric portrait */}
        <svg width={size * 0.78} height={size * 0.78} viewBox="0 0 40 40" style={{ display: 'block' }}>
          {/* hair back */}
          <ellipse cx="20" cy="19" rx="13" ry="13" fill="#1B2A3A"/>
          {/* face */}
          <ellipse cx="20" cy="21" rx="9.2" ry="10.5" fill="#FFE2C9"/>
          {/* hair bangs */}
          <path d="M11 17 Q14 11 20 11 Q26 11 29 17 Q26 14 20 14 Q14 14 11 17 Z" fill="#1B2A3A"/>
          {/* eyes */}
          <ellipse cx="16.6" cy="22" rx="1.1" ry="1.4" fill="#1B2A3A"/>
          <ellipse cx="23.4" cy="22" rx="1.1" ry="1.4" fill="#1B2A3A"/>
          {/* cheeks */}
          <circle cx="14.5" cy="25" r="1.4" fill="#FFB199" opacity="0.6"/>
          <circle cx="25.5" cy="25" r="1.4" fill="#FFB199" opacity="0.6"/>
          {/* smile */}
          <path d="M17.5 26.6 Q20 28.4 22.5 26.6" stroke="#1B2A3A" strokeWidth="1.2" strokeLinecap="round" fill="none"/>
        </svg>
      </div>
      {online && (
        <div style={{
          position: 'absolute', right: -1, bottom: -1,
          width: size * 0.28, height: size * 0.28, borderRadius: '50%',
          background: '#22D26B', border: '2px solid #fff',
        }}/>
      )}
    </div>
  );
}

// ─── Wrappers ───────────────────────────────────────────────
function MsgRow({ side = 'agent', children, withAvatar = true }) {
  if (side === 'user') {
    return (
      <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '2px 16px' }}>
        <div style={{ maxWidth: '82%', display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4 }}>
          {children}
        </div>
      </div>
    );
  }
  return (
    <div style={{ display: 'flex', gap: 8, alignItems: 'flex-end', padding: '2px 16px' }}>
      <div style={{ width: 28, flexShrink: 0 }}>
        {withAvatar && <SolomiyaAvatar size={28} />}
      </div>
      <div style={{ maxWidth: 'calc(100% - 44px)', display: 'flex', flexDirection: 'column', gap: 4 }}>
        {children}
      </div>
    </div>
  );
}

function AgentBubble({ children, first = false, last = true }) {
  return (
    <div style={{
      background: RCT.paper,
      border: '1px solid ' + RCT.line,
      borderRadius: `${first ? 20 : 8}px 20px 20px ${last ? 6 : 8}px`,
      padding: '11px 14px',
      fontSize: 15, lineHeight: 1.42, color: RCT.ink,
      boxShadow: '0 1px 1.5px rgba(14,31,27,0.04)',
      letterSpacing: -0.1,
    }}>{children}</div>
  );
}

function UserBubble({ children }) {
  return (
    <div style={{
      background: RCT.green,
      color: '#fff',
      borderRadius: '20px 20px 6px 20px',
      padding: '11px 14px',
      fontSize: 15, lineHeight: 1.42,
      boxShadow: '0 1px 2px rgba(0,196,143,0.3)',
      letterSpacing: -0.1,
    }}>{children}</div>
  );
}

// ─── Typing indicator ───────────────────────────────────────
function Typing() {
  return (
    <MsgRow side="agent">
      <div style={{
        background: RCT.paper, border: '1px solid ' + RCT.line,
        borderRadius: '20px 20px 20px 6px',
        padding: '12px 14px', display: 'flex', gap: 4,
        boxShadow: '0 1px 1.5px rgba(14,31,27,0.04)',
      }}>
        {[0, 1, 2].map(i => (
          <div key={i} style={{
            width: 7, height: 7, borderRadius: '50%',
            background: RCT.hint,
            animation: `rcDot 1.2s ${i * 0.18}s infinite ease-in-out`,
          }}/>
        ))}
      </div>
    </MsgRow>
  );
}

// ─── Partner strip (shown in welcome) ───────────────────────
function PartnerStrip() {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 6,
      marginTop: 4,
    }}>
      <div style={{ display: 'flex' }}>
        {RC.PARTNERS.slice(0, 5).map((p, i) => (
          <div key={p.id} style={{
            width: 26, height: 26, borderRadius: '50%',
            background: '#fff', color: p.color,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 10, fontWeight: 800, letterSpacing: -0.3,
            border: '2px solid #fff',
            marginLeft: i === 0 ? 0 : -8,
            fontFamily: 'Onest, system-ui',
            overflow: 'hidden',
            boxShadow: '0 0 0 1px ' + RCT.lineSoft,
          }}>
            {p.logoUrl ? (
              <img
                src={p.logoUrl}
                alt={p.name}
                loading="lazy"
                style={{ width: '82%', height: '82%', objectFit: 'contain', display: 'block' }}
                onError={e => {
                  const box = e.currentTarget.parentElement;
                  e.currentTarget.remove();
                  if (box) box.textContent = p.monogram;
                }}
              />
            ) : p.monogram}
          </div>
        ))}
      </div>
      <span style={{ fontSize: 12, color: RCT.mute, fontWeight: 600 }}>
        +{RC.MFOS.length - 5} партнерів
      </span>
    </div>
  );
}

// ─── Slider widget (amount / term) ──────────────────────────
function SliderWidget({ label, min, max, step, defaultValue, format, presets, onConfirm, confirmLabel = 'Далі', accent = RCT.green }) {
  const [v, setV] = useState(defaultValue);
  const pct = ((v - min) / (max - min)) * 100;
  return (
    <div style={{
      background: RCT.paper, border: '1px solid ' + RCT.line,
      borderRadius: 20, padding: 16, marginTop: 4,
      boxShadow: '0 1px 1.5px rgba(14,31,27,0.04)',
    }}>
      <div style={{ fontSize: 13, color: RCT.mute, fontWeight: 600, letterSpacing: 0.1 }}>{label}</div>
      <div style={{
        fontFamily: 'Onest, system-ui',
        fontSize: 32, fontWeight: 700, color: RCT.ink,
        letterSpacing: -0.8, marginTop: 4, lineHeight: 1.1,
      }}>{format(v)}</div>

      <div style={{ position: 'relative', marginTop: 14, marginBottom: 6 }}>
        <div style={{
          position: 'absolute', left: 0, right: 0, top: '50%', height: 6, borderRadius: 4,
          background: RCT.creamDeep, transform: 'translateY(-50%)',
        }}/>
        <div style={{
          position: 'absolute', left: 0, width: pct + '%', top: '50%', height: 6, borderRadius: 4,
          background: accent, transform: 'translateY(-50%)',
        }}/>
        <input
          type="range" min={min} max={max} step={step} value={v}
          onChange={e => setV(Number(e.target.value))}
          style={{
            position: 'relative', width: '100%', height: 28,
            WebkitAppearance: 'none', appearance: 'none',
            background: 'transparent', margin: 0, padding: 0, cursor: 'pointer',
          }}
          className="rc-range"
        />
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: RCT.hint, fontWeight: 600 }}>
        <span>{format(min)}</span><span>{format(max)}</span>
      </div>

      {presets && (
        <div style={{ display: 'flex', gap: 6, marginTop: 12, flexWrap: 'wrap' }}>
          {presets.map(p => (
            <button key={p} onClick={() => setV(p)} style={{
              background: v === p ? RCT.greenSoft : RCT.cream,
              border: '1px solid ' + (v === p ? RCT.green : 'transparent'),
              color: v === p ? RCT.greenDeep : RCT.inkSoft,
              borderRadius: 999, padding: '6px 12px',
              fontSize: 13, fontWeight: 600, cursor: 'pointer',
              fontFamily: 'inherit',
            }}>{format(p)}</button>
          ))}
        </div>
      )}

      <button onClick={() => onConfirm(v)} style={{
        marginTop: 14, width: '100%',
        background: accent, color: '#fff',
        border: 'none', borderRadius: 14, padding: '13px',
        fontSize: 15, fontWeight: 700, cursor: 'pointer',
        boxShadow: '0 4px 12px rgba(0,196,143,0.28)',
        fontFamily: 'inherit', letterSpacing: -0.1,
      }}>{confirmLabel}</button>
    </div>
  );
}

// ─── Quick replies ──────────────────────────────────────────
function QuickReplies({ options, onPick, columns = 1 }) {
  const hasPrimary = options.some(opt => opt.primary);
  return (
    <div style={{
      display: 'flex', flexDirection: 'column', gap: 8,
      marginTop: 2, alignItems: 'stretch',
      width: hasPrimary ? 'min(calc(100vw - 104px), 318px)' : undefined,
      maxWidth: '100%',
    }}>
      {options.map(opt => {
        const primary = !!opt.primary;
        return (
        <button key={opt.value} onClick={() => onPick(opt)} style={{
          background: primary
            ? `linear-gradient(135deg, ${RCT.green} 0%, ${RCT.greenDeep} 100%)`
            : RCT.paper,
          border: primary ? '1px solid rgba(0,161,118,0.28)' : '1.5px solid ' + RCT.greenSoft,
          color: primary ? '#fff' : RCT.greenDeep,
          borderRadius: primary ? 20 : 16,
          padding: primary ? '15px 16px' : '12px 14px',
          minHeight: primary ? 62 : undefined,
          fontSize: primary ? 17 : 14.5,
          fontWeight: primary ? 800 : 600,
          cursor: 'pointer',
          textAlign: 'left',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
          fontFamily: 'inherit',
          boxShadow: primary
            ? '0 10px 24px rgba(0,196,143,0.30), 0 2px 6px rgba(14,31,27,0.08)'
            : '0 1px 1.5px rgba(14,31,27,0.04)',
          transition: 'all 0.15s',
          animation: primary ? 'rcPrimaryPulse 1.9s ease-in-out infinite' : 'none',
        }}
        onMouseDown={e => e.currentTarget.style.transform = 'scale(0.98)'}
        onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'}
        onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
        >
          <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            {opt.emoji && <span style={{
              width: primary ? 34 : 'auto',
              height: primary ? 34 : 'auto',
              borderRadius: '50%',
              background: primary ? 'rgba(255,255,255,0.20)' : 'transparent',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: primary ? 20 : 18,
              flexShrink: 0,
            }}>{opt.emoji}</span>}
            <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
              <span style={{ color: primary ? '#fff' : RCT.ink }}>{opt.label}</span>
              {opt.sub && <span style={{
                fontSize: 12,
                color: primary ? 'rgba(255,255,255,0.82)' : RCT.mute,
                fontWeight: 500,
                marginTop: 1,
              }}>{opt.sub}</span>}
            </span>
          </span>
          <span style={{
            width: primary ? 30 : 14,
            height: primary ? 30 : 14,
            borderRadius: '50%',
            background: primary ? 'rgba(255,255,255,0.20)' : 'transparent',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            flexShrink: 0,
          }}>
            <svg width={primary ? 16 : 14} height={primary ? 16 : 14} viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0 }}>
              <path d="M5 3l4 4-4 4" stroke={primary ? '#fff' : RCT.green} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </span>
        </button>
        );
      })}
    </div>
  );
}

function normalizeLocalPhone(value) {
  let digits = String(value || '').replace(/\D/g, '');
  if (digits.startsWith('380')) digits = digits.slice(3);
  else if (digits.startsWith('80')) digits = digits.slice(2);
  else if (digits.startsWith('0')) digits = digits.slice(1);
  return digits.slice(0, 9);
}

function formatUAphone(localDigits) {
  const d = normalizeLocalPhone(localDigits);
  let s = '+380 ';
  if (d.length > 0) s += d.slice(0, 2);
  if (d.length > 2) s += ' ' + d.slice(2, 5);
  if (d.length > 5) s += ' ' + d.slice(5, 7);
  if (d.length > 7) s += ' ' + d.slice(7, 9);
  return s;
}

// ─── Phone / ИНН input widget ───────────────────────────────
function PhoneWidget({ onConfirm }) {
  const [phone, setPhone] = useState('');
  const [consent, setConsent] = useState(true);
  const formatted = useMemo(() => formatUAphone(phone), [phone]);
  const valid = phone.length === 9;
  return (
    <div style={{
      background: RCT.paper, border: '1px solid ' + RCT.line,
      borderRadius: 20, padding: 16, marginTop: 4,
      boxShadow: '0 1px 1.5px rgba(14,31,27,0.04)',
    }}>
      <div style={{ fontSize: 13, color: RCT.mute, fontWeight: 600 }}>Номер телефону</div>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10, marginTop: 8,
        border: '1.5px solid ' + (valid ? RCT.green : RCT.line),
        borderRadius: 14, padding: '12px 14px',
        background: RCT.cream,
        transition: 'border-color 0.15s',
      }}>
        <span style={{ fontSize: 18 }}>🇺🇦</span>
        <input
          type="tel"
          value={formatted}
          onChange={e => setPhone(normalizeLocalPhone(e.target.value))}
          placeholder="+380 __ ___ __ __"
          inputMode="numeric"
          autoComplete="tel"
          style={{
            flex: 1, border: 'none', background: 'transparent',
            fontSize: 16, fontWeight: 600, color: RCT.ink,
            fontFamily: 'inherit', outline: 'none',
            letterSpacing: 0.3,
          }}
        />
        {valid && (
          <svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill={RCT.green}/><path d="M6 10.5l3 3 5-6" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
        )}
      </div>
      <label style={{
        display: 'flex', alignItems: 'flex-start', gap: 8, marginTop: 12,
        fontSize: 12, color: RCT.mute, lineHeight: 1.4, cursor: 'pointer',
      }}>
        <input type="checkbox" checked={consent} onChange={e => setConsent(e.target.checked)}
          style={{ accentColor: RCT.green, marginTop: 2 }}/>
        <span>Згоден з обробкою персональних даних та отриманням SMS з пропозиціями МФО</span>
      </label>
      <button
        disabled={!valid || !consent}
        onClick={() => onConfirm(formatted)}
        style={{
          marginTop: 12, width: '100%',
          background: (valid && consent) ? RCT.green : RCT.creamDeep,
          color: (valid && consent) ? '#fff' : RCT.hint,
          border: 'none', borderRadius: 14, padding: '13px',
          fontSize: 15, fontWeight: 700,
          cursor: (valid && consent) ? 'pointer' : 'not-allowed',
          boxShadow: (valid && consent) ? '0 4px 12px rgba(0,196,143,0.28)' : 'none',
          fontFamily: 'inherit', letterSpacing: -0.1,
          transition: 'all 0.15s',
        }}>
        Підібрати кредити →
      </button>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
        marginTop: 10, fontSize: 11.5, color: RCT.hint, fontWeight: 600,
      }}>
        <svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 1L2 3v3.5C2 8.5 4 10.5 6 11c2-0.5 4-2.5 4-4.5V3L6 1z" fill={RCT.hint}/></svg>
        Шифрування TLS 1.3 • Не передаємо третім особам
      </div>
    </div>
  );
}

// ─── Processing / progress bar ──────────────────────────────
function ProcessingWidget({ onDone }) {
  const [stage, setStage] = useState(0);
  const stages = [
    'Аналізую ваш профіль…',
    'Перевіряю партнерські МФО…',
    'Розраховую % одобрення…',
    'Формую список пропозицій…',
  ];
  useEffect(() => {
    const t1 = setTimeout(() => setStage(1), 700);
    const t2 = setTimeout(() => setStage(2), 1500);
    const t3 = setTimeout(() => setStage(3), 2300);
    const t4 = setTimeout(() => onDone && onDone(), 3300);
    return () => [t1, t2, t3, t4].forEach(clearTimeout);
  }, []);
  const pct = ((stage + 1) / stages.length) * 100;
  return (
    <div style={{
      background: RCT.paper, border: '1px solid ' + RCT.line,
      borderRadius: 20, padding: 16, marginTop: 4,
      boxShadow: '0 1px 1.5px rgba(14,31,27,0.04)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{
          width: 36, height: 36, borderRadius: 12,
          background: RCT.greenSoft,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <div style={{
            width: 18, height: 18, borderRadius: '50%',
            border: `2.5px solid ${RCT.green}`,
            borderTopColor: 'transparent',
            animation: 'rcSpin 0.8s linear infinite',
          }}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14.5, fontWeight: 700, color: RCT.ink }}>Підбираю кредити</div>
          <div style={{ fontSize: 12.5, color: RCT.mute, fontWeight: 500, marginTop: 1 }}>{stages[stage]}</div>
        </div>
      </div>
      <div style={{
        marginTop: 12, height: 6, background: RCT.creamDeep,
        borderRadius: 4, overflow: 'hidden', position: 'relative',
      }}>
        <div style={{
          height: '100%', width: pct + '%', background: RCT.green,
          borderRadius: 4, transition: 'width 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
        }}/>
      </div>
    </div>
  );
}

// ─── MFO card ───────────────────────────────────────────────
function MFOCard({ mfo, requestedAmount, isTop = false }) {
  return (
    <div style={{
      width: '100%',
      background: RCT.paper,
      border: '1px solid ' + (isTop ? RCT.green : RCT.line),
      borderRadius: 20, padding: 16,
      boxShadow: isTop
        ? '0 8px 24px rgba(0,196,143,0.18), 0 1px 2px rgba(14,31,27,0.05)'
        : '0 4px 14px rgba(14,31,27,0.05)',
      position: 'relative',
      display: 'flex', flexDirection: 'column',
    }}>
      {isTop && (
        <div style={{
          position: 'absolute', top: -10, left: 14,
          background: RCT.green, color: '#fff',
          fontSize: 10.5, fontWeight: 800, letterSpacing: 0.5,
          padding: '4px 10px', borderRadius: 999,
          textTransform: 'uppercase',
        }}>★ Рекомендуємо</div>
      )}
      <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
        <div style={{
          width: mfo.logoUrl ? 104 : 52,
          height: 52,
          borderRadius: 14,
          background: mfo.logoUrl ? '#fff' : mfo.bg,
          color: mfo.color,
          border: '1px solid ' + (mfo.logoUrl ? RCT.lineSoft : 'transparent'),
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'Onest, system-ui', fontWeight: 800,
          fontSize: 16, letterSpacing: -0.4,
          overflow: 'hidden',
          padding: mfo.logoUrl ? '8px 10px' : 0,
          boxShadow: mfo.logoUrl ? 'inset 0 0 0 1px rgba(14,31,27,0.025), 0 3px 10px rgba(14,31,27,0.045)' : 'none',
          flex: '0 0 auto',
        }}>
          {mfo.logoUrl ? (
            <img
              src={mfo.logoUrl}
              alt={mfo.name}
              loading="lazy"
              style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }}
              onError={e => {
                const box = e.currentTarget.parentElement;
                e.currentTarget.remove();
                if (box) box.textContent = mfo.monogram;
              }}
            />
          ) : mfo.monogram}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: 'Onest, system-ui', fontSize: 16, fontWeight: 700, color: RCT.ink, letterSpacing: -0.3 }}>{mfo.name}</div>
          <div style={{ fontSize: 11.5, color: mfo.color, fontWeight: 700, marginTop: 1 }}>{mfo.tag}</div>
        </div>
      </div>

      <div style={{
        marginTop: 14, padding: '10px 12px',
        background: RCT.greenSoft, borderRadius: 12,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div>
          <div style={{ fontSize: 10.5, color: RCT.greenDeep, fontWeight: 700, letterSpacing: 0.3, textTransform: 'uppercase' }}>Шанс одобрення</div>
          <div style={{ fontFamily: 'Onest, system-ui', fontSize: 22, fontWeight: 800, color: RCT.greenDeep, letterSpacing: -0.5, lineHeight: 1 }}>{mfo.approval}%</div>
        </div>
        <div style={{ width: 44, height: 44, position: 'relative' }}>
          <svg width="44" height="44" viewBox="0 0 44 44">
            <circle cx="22" cy="22" r="18" stroke="#fff" strokeWidth="4" fill="none"/>
            <circle cx="22" cy="22" r="18" stroke={RCT.green} strokeWidth="4" fill="none"
              strokeDasharray={`${(mfo.approval / 100) * 113} 113`}
              strokeLinecap="round" transform="rotate(-90 22 22)"/>
          </svg>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 12 }}>
        <Stat label="Сума" value={`до ${(mfo.maxAmount / 1000)}k ₴`}/>
        <Stat label="Термін" value={mfo.termRange}/>
        <Stat label="Ставка від" value={mfo.minRate + ' / день'}/>
        <Stat label="Рішення" value={mfo.decision}/>
      </div>

      <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 5 }}>
        {mfo.perks.slice(0, 3).map(p => (
          <div key={p} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5, color: RCT.inkSoft }}>
            <svg width="14" height="14" viewBox="0 0 14 14"><circle cx="7" cy="7" r="7" fill={RCT.greenSoft}/><path d="M4 7.2l2 2 4-4.4" stroke={RCT.green} strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            {p}
          </div>
        ))}
      </div>

      <button onClick={() => {
        if (mfo.url) window.location.href = mfo.url;
      }} style={{
        marginTop: 14,
        background: RCT.green, color: '#fff',
        border: 'none', borderRadius: 14, padding: '13px',
        fontSize: 14.5, fontWeight: 700, cursor: 'pointer',
        fontFamily: 'inherit', letterSpacing: -0.1,
        boxShadow: '0 4px 12px rgba(0,196,143,0.28)',
      }}>
        Отримати {RC.formatUAH(Math.min(requestedAmount || mfo.maxAmount, mfo.maxAmount))} →
      </button>
    </div>
  );
}

function Stat({ label, value }) {
  return (
    <div>
      <div style={{ fontSize: 10.5, color: RCT.hint, fontWeight: 700, letterSpacing: 0.3, textTransform: 'uppercase' }}>{label}</div>
      <div style={{ fontSize: 13.5, fontWeight: 700, color: RCT.ink, marginTop: 2, letterSpacing: -0.2 }}>{value}</div>
    </div>
  );
}

// ─── MFO vertical list ─────────────────────────────────────
function MFOCarousel({ mfos, requestedAmount }) {
  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      gap: 14,
      padding: '14px 16px 18px',
      marginTop: 4,
    }}>
      {mfos.map((m, i) => (
        <MFOCard key={m.id} mfo={m} requestedAmount={requestedAmount} isTop={i === 0}/>
      ))}
    </div>
  );
}

// ─── Summary chip (collected user answer summary) ───────────
function SummaryChip({ icon, label, value }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      background: RCT.cream, border: '1px solid ' + RCT.lineSoft,
      borderRadius: 999, padding: '5px 10px',
      fontSize: 12, fontWeight: 600,
    }}>
      <span style={{ color: RCT.mute }}>{label}:</span>
      <span style={{ color: RCT.ink }}>{value}</span>
    </div>
  );
}

Object.assign(window, {
  SolomiyaAvatar, MsgRow, AgentBubble, UserBubble, Typing,
  PartnerStrip, SliderWidget, QuickReplies, PhoneWidget,
  ProcessingWidget, MFOCard, MFOCarousel, SummaryChip,
});
