// sofia-vendedora.jsx — Sofia coach personal para vendedoras premium
// Threshold: facturación bruta del mes actual >= $200 → desbloquea
// Si no, muestra "paywall" motivacional con cuánto falta

(function () {
  const STORAGE_KEY = 'inova-sofia-vendedora-chat-v1';
  const THRESHOLD = 200;

  // Lista de cédulas con acceso premium bypass (admin/testing)
  const PREMIUM_BYPASS_CEDULAS = ['21618076']; // Brian

  function getPremiumStatus(pedidos, vendedora) {
    const now = new Date();
    const thisMonth = (pedidos || []).filter(p =>
      p.fechaCreacion.getMonth() === now.getMonth() &&
      p.fechaCreacion.getFullYear() === now.getFullYear()
    );
    const facturado = thisMonth.reduce((s, p) =>
      s + p.productos.reduce((a, x) => a + (+x.precio || 0) * (+x.cantidad || 0), 0)
    , 0);
    // Bypass: admin o cédulas autorizadas → siempre unlocked
    const bypass = (vendedora?.zona === 'Admin')
      || PREMIUM_BYPASS_CEDULAS.includes(vendedora?.cedula);
    const unlocked = bypass || facturado >= THRESHOLD;
    const falta = unlocked ? 0 : (THRESHOLD - facturado);
    return { unlocked, facturado, falta, threshold: THRESHOLD, bypass };
  }

  // Sugerencias específicas para vendedora (no admin)
  const SUGERENCIAS_VENDEDORA = [
    '¿Cómo le respondo a una clienta que dice "está caro"?',
    'Dame 3 productos para ofrecer a clientas que ya compraron perfume',
    '¿Cómo cierro una venta cuando la clienta dice "déjame pensarlo"?',
    'Tengo 5 clientas que no me compran hace 2 meses, ¿cómo las reactivo?',
    '¿Qué mensaje le mando a mis clientas para anunciar promociones C09?',
    'Mi clienta quiere algo para piel grasa pero no sé qué recomendarle',
  ];

  function SofiaVendedoraScreen({ vendedora, pedidos, onClose }) {
    const T = window.T;
    const { Icon } = window;
    const premium = getPremiumStatus(pedidos, vendedora);

    if (!premium.unlocked) {
      return <SofiaLockedScreen vendedora={vendedora} premium={premium} onClose={onClose} />;
    }
    return <SofiaUnlockedChat vendedora={vendedora} pedidos={pedidos} onClose={onClose} />;
  }

  // ─── Pantalla bloqueada (paywall motivacional) ───────────────────
  function SofiaLockedScreen({ vendedora, premium, onClose }) {
    const T = window.T;
    const { Icon } = window;
    const pct = Math.min(100, Math.round(premium.facturado / premium.threshold * 100));

    return (
      <div style={{ width: '100%', minHeight: '100%', background: T.paper, paddingBottom: 120 }}>
        {/* Header */}
        <div style={{ padding: '58px 24px 4px', display: 'flex', alignItems: 'center', gap: 12 }}>
          <button onClick={onClose} style={{
            width: 36, height: 36, borderRadius: 999, background: T.paperAlt,
            border: `1px solid ${T.hairline}`, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><Icon name="chevronL" size={16} color={T.ink} /></button>
          <div style={{
            fontFamily: T.mono, fontSize: 10, letterSpacing: 1.4, textTransform: 'uppercase', color: T.inkMute,
          }}>Sofia · Coach Premium</div>
        </div>

        {/* Hero locked */}
        <div style={{ padding: '40px 24px 24px', textAlign: 'center' }}>
          <div style={{
            width: 120, height: 120, borderRadius: 999,
            margin: '0 auto 18px',
            position: 'relative',
            overflow: 'hidden',
            background: 'oklch(0.94 0.04 145)',
            boxShadow: '0 8px 24px rgba(0,0,0,0.12)',
          }}>
            <img src="icons/sofia-avatar.png?v=1778529236" alt="Sofia"
              style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'grayscale(0.4)' }} />
            <div style={{
              position: 'absolute', bottom: 4, right: 4,
              background: T.ink, color: T.paper, borderRadius: 999,
              width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 18,
            }}>🔒</div>
          </div>
          <div style={{ fontFamily: T.serif, fontSize: 32, color: T.ink, letterSpacing: -0.8, lineHeight: 1.1 }}>
            Tu coach personal de ventas
          </div>
          <div style={{ fontFamily: T.serif, fontStyle: 'italic', fontSize: 18, color: T.inkSoft, marginTop: 8, lineHeight: 1.3, padding: '0 16px' }}>
            Sofia te ayuda a cerrar más ventas, recomendar productos, contestar objeciones — 24/7
          </div>
        </div>

        {/* Progress card */}
        <div style={{ padding: '0 24px 24px' }}>
          <div style={{
            background: T.ink, color: T.paper, borderRadius: 20, padding: 22,
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              fontFamily: T.mono, fontSize: 10, letterSpacing: 1.6, textTransform: 'uppercase',
              color: 'rgba(255,255,255,0.5)', marginBottom: 8,
            }}>
              Desbloqueá Sofia este mes
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 10 }}>
              <div style={{ fontFamily: T.serif, fontSize: 36, lineHeight: 1, color: T.paper, letterSpacing: -1 }}>
                ${premium.facturado.toFixed(0)}
              </div>
              <div style={{ fontFamily: T.sans, fontSize: 13, color: 'rgba(255,255,255,0.55)' }}>
                de ${premium.threshold}
              </div>
            </div>
            <div style={{
              height: 8, background: 'rgba(255,255,255,0.12)', borderRadius: 999, overflow: 'hidden',
              marginBottom: 10,
            }}>
              <div style={{
                width: `${pct}%`, height: '100%',
                background: `linear-gradient(90deg, ${T.accent}, oklch(0.65 0.18 320))`,
                transition: 'width 0.8s ease',
              }} />
            </div>
            <div style={{
              fontFamily: T.serif, fontStyle: 'italic', fontSize: 16, color: 'rgba(255,255,255,0.85)', lineHeight: 1.4,
            }}>
              Te faltan <b style={{ color: T.accent || '#E89B6E' }}>${premium.falta.toFixed(2)}</b> en
              ventas este mes para desbloquear a tu coach.
            </div>
          </div>
        </div>

        {/* Lo que hace Sofia (teaser) */}
        <div style={{ padding: '0 24px 24px' }}>
          <div style={{
            fontFamily: T.mono, fontSize: 10, letterSpacing: 1.6, textTransform: 'uppercase',
            color: T.inkMute, marginBottom: 12,
          }}>
            Lo que Sofia te ayuda a hacer
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              { icon: '💬', text: 'Responder objeciones ("está caro", "no me lo puedo permitir", "lo veo después")' },
              { icon: '🎯', text: 'Saber qué producto recomendarle a CADA clienta (según lo que ya compró)' },
              { icon: '📈', text: 'Subir tu ticket promedio con sets y bundles del catálogo' },
              { icon: '🔥', text: 'Reactivar clientas dormidas con mensajes que sí funcionan' },
              { icon: '💡', text: 'Aprender técnicas de venta de Alex Hormozi adaptadas a tu negocio' },
            ].map((it, i) => (
              <div key={i} style={{
                display: 'flex', gap: 12, padding: '12px 14px', borderRadius: 14,
                background: T.paperAlt, border: `1px solid ${T.hairline}`,
              }}>
                <div style={{ fontSize: 22, flexShrink: 0 }}>{it.icon}</div>
                <div style={{ fontFamily: T.serif, fontSize: 14, color: T.ink, lineHeight: 1.35 }}>{it.text}</div>
              </div>
            ))}
          </div>
        </div>

        {/* CTA */}
        <div style={{ padding: '0 24px' }}>
          <div style={{
            padding: 16, borderRadius: 14,
            background: 'oklch(0.95 0.05 80)', border: '1px solid oklch(0.82 0.08 80)',
            fontFamily: T.sans, fontSize: 13, color: T.ink, lineHeight: 1.5,
          }}>
            <b>Tip de Sofia (gratis):</b> el camino más rápido a $200 es vender 1 set + 2 perfumes a clientas que ya compraron antes. ¡Tú puedes!
          </div>
        </div>
      </div>
    );
  }

  // ─── Pantalla desbloqueada (chat) ─────────────────────────────────
  function SofiaUnlockedChat({ vendedora, pedidos, onClose }) {
    const T = window.T;
    const { Icon } = window;
    const [messages, setMessages] = React.useState(() => {
      try {
        const raw = localStorage.getItem(STORAGE_KEY + ':' + vendedora?.id);
        if (raw) return JSON.parse(raw);
      } catch {}
      return [];
    });
    const [input, setInput] = React.useState('');
    const [loading, setLoading] = React.useState(false);
    const scrollRef = React.useRef(null);

    React.useEffect(() => {
      if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }, [messages, loading]);

    React.useEffect(() => {
      try {
        const toSave = messages.slice(-30);
        localStorage.setItem(STORAGE_KEY + ':' + vendedora?.id, JSON.stringify(toSave));
      } catch {}
    }, [messages, vendedora?.id]);

    async function ask(pregunta) {
      if (!pregunta.trim() || loading) return;
      // Capturamos historial ANTES de agregar el nuevo mensaje
      const historial = messages.slice(-12).map(m => ({
        role: m.role === 'user' ? 'user' : 'sofia',
        text: (m.text || '').slice(0, 400),
      }));
      setMessages(prev => [...prev, { role: 'user', text: pregunta, ts: Date.now() }]);
      setInput('');
      setLoading(true);
      try {
        const res = await fetch('/api/sofia/ask', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            pregunta,
            user_id: 'vendedora-' + vendedora?.id,
            contexto: `vendedora:${vendedora?.nombre}|zona:${vendedora?.zona}`,
            nombre_usuario: vendedora?.nombre,
            historial,
            incluir_videos: false,
          }),
        });
        const data = await res.json();
        if (!res.ok) throw new Error(data.detail || 'Error');
        setMessages(prev => [...prev, {
          role: 'sofia',
          text: data.respuesta,
          fuentes: (data.fuentes_usadas || []).slice(0, 3),
          acciones: data.acciones || [],
          ts: Date.now(),
        }]);
      } catch (e) {
        setMessages(prev => [...prev, { role: 'error', text: e.message, ts: Date.now() }]);
      }
      setLoading(false);
    }

    function clearChat() {
      if (!confirm('¿Borrar conversación con Sofia?')) return;
      setMessages([]);
      try { localStorage.removeItem(STORAGE_KEY + ':' + vendedora?.id); } catch {}
    }

    return (
      <div style={{
        width: '100%', minHeight: '100%', background: T.paper,
        display: 'flex', flexDirection: 'column',
      }}>
        {/* Header */}
        <div style={{ padding: '52px 18px 12px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: `1px solid ${T.hairline}` }}>
          <button onClick={onClose} style={{
            width: 36, height: 36, borderRadius: 999, background: T.paperAlt,
            border: `1px solid ${T.hairline}`, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><Icon name="chevronL" size={16} color={T.ink} /></button>
          <div style={{
            width: 44, height: 44, borderRadius: 999, overflow: 'hidden',
            background: 'oklch(0.94 0.04 145)',
            boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
          }}>
            <img src="icons/sofia-avatar.png?v=1778529236" alt="Sofia"
              style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: T.serif, fontSize: 18, color: T.ink, letterSpacing: -0.3, lineHeight: 1 }}>
              Sofia
            </div>
            <div style={{ fontFamily: T.mono, fontSize: 9, letterSpacing: 1.2, color: T.accent, textTransform: 'uppercase' }}>
              ● Tu coach activa
            </div>
          </div>
          {messages.length > 0 && (
            <button onClick={clearChat} style={{
              padding: '6px 10px', borderRadius: 8, background: 'transparent',
              border: `1px solid ${T.hairline}`, color: T.inkSoft,
              fontFamily: T.sans, fontSize: 11, cursor: 'pointer',
            }}>🗑</button>
          )}
        </div>

        {/* Mensajes */}
        <div ref={scrollRef} style={{
          flex: 1, overflowY: 'auto', padding: '14px 16px 14px',
          display: 'flex', flexDirection: 'column', gap: 12,
        }}>
          {messages.length === 0 && !loading && (
            <div>
              <div style={{
                padding: '14px 16px', borderRadius: 16,
                background: T.paperAlt, border: `1px solid ${T.hairline}`,
                marginBottom: 14,
              }}>
                <div style={{ fontFamily: T.serif, fontSize: 14, color: T.ink, lineHeight: 1.4 }}>
                  ¡Epa {(vendedora?.nombre || '').split(' ')[0]}! Soy Sofia, tu coach personal de ventas.
                  Te ayudo a vender más, cerrar mejor y subir tu ticket promedio. Preguntame lo que sea.
                </div>
              </div>
              <div style={{
                fontFamily: T.mono, fontSize: 9, letterSpacing: 1.4, color: T.inkMute,
                textTransform: 'uppercase', marginBottom: 8,
              }}>
                Sugerencias para empezar
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {SUGERENCIAS_VENDEDORA.map((s, i) => (
                  <button key={i} onClick={() => ask(s)} style={{
                    padding: '10px 12px', textAlign: 'left',
                    background: T.paper, border: `1px solid ${T.hairline}`,
                    borderRadius: 12, cursor: 'pointer',
                    fontFamily: T.serif, fontSize: 13, color: T.ink, lineHeight: 1.3,
                  }}>{s}</button>
                ))}
              </div>
            </div>
          )}
          {messages.map((m, i) => <Message key={i} m={m} T={T} />)}
          {loading && (
            <div style={{
              alignSelf: 'flex-start', maxWidth: '85%',
              padding: '10px 14px', borderRadius: 16,
              background: T.paperAlt, border: `1px solid ${T.hairline}`,
              fontFamily: T.serif, fontStyle: 'italic', fontSize: 13, color: T.inkSoft,
            }}>
              Sofia está pensando...
            </div>
          )}
        </div>

        {/* Input */}
        <div style={{
          padding: '10px 14px calc(20px + env(safe-area-inset-bottom, 0px))',
          borderTop: `1px solid ${T.hairline}`, background: T.paperAlt,
          display: 'flex', gap: 8, alignItems: 'flex-end',
        }}>
          <textarea
            value={input}
            onChange={e => setInput(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); ask(input); } }}
            placeholder="Preguntale a Sofia..."
            rows={1}
            disabled={loading}
            style={{
              flex: 1, padding: '10px 12px', borderRadius: 14,
              border: `1px solid ${T.hairline}`, background: T.paper,
              fontFamily: T.sans, fontSize: 14, resize: 'none', minHeight: 40, maxHeight: 100,
              boxSizing: 'border-box', outline: 'none',
            }}
          />
          <button onClick={() => ask(input)} disabled={loading || !input.trim()} style={{
            padding: '10px 16px', borderRadius: 14,
            background: loading || !input.trim() ? T.hairline : T.accent,
            color: '#fff', border: 'none',
            cursor: loading || !input.trim() ? 'not-allowed' : 'pointer',
            fontFamily: T.sans, fontSize: 14, fontWeight: 600,
            whiteSpace: 'nowrap',
          }}>
            {loading ? '...' : '↑'}
          </button>
        </div>
      </div>
    );
  }

  function Message({ m, T }) {
    if (m.role === 'error') {
      return (
        <div style={{
          alignSelf: 'center', padding: '6px 10px',
          background: 'oklch(0.94 0.06 25)', color: 'oklch(0.35 0.16 25)',
          borderRadius: 10, fontFamily: T.mono, fontSize: 10,
        }}>⚠ {m.text}</div>
      );
    }
    const isUser = m.role === 'user';
    return (
      <div style={{ alignSelf: isUser ? 'flex-end' : 'flex-start', maxWidth: '92%', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{
          padding: '11px 14px', borderRadius: 16,
          background: isUser ? T.ink : T.paper,
          color: isUser ? T.paper : T.ink,
          border: isUser ? 'none' : `1px solid ${T.hairline}`,
          fontFamily: isUser ? T.sans : T.serif, fontSize: 13,
          lineHeight: 1.45, whiteSpace: 'pre-wrap',
        }}>
          {!isUser && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
              <div style={{ width: 20, height: 20, borderRadius: 999, overflow: 'hidden', background: 'oklch(0.94 0.04 145)' }}>
                <img src="icons/sofia-avatar.png?v=1778529236" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div style={{ fontFamily: T.mono, fontSize: 8, letterSpacing: 1.2, color: T.accent, textTransform: 'uppercase' }}>
                Sofia
              </div>
            </div>
          )}
          {m.text}
          {m.fuentes && m.fuentes.length > 0 && (
            <div style={{ marginTop: 8, paddingTop: 6, borderTop: `1px dashed ${T.hairline}`, fontFamily: T.mono, fontSize: 8, color: T.inkMute, lineHeight: 1.3 }}>
              {m.fuentes.map(f => f.titulo).join(' · ').slice(0, 120)}
            </div>
          )}
        </div>
        {/* Tarjetas de acción: productos recomendados con botones de WhatsApp / Copiar */}
        {!isUser && m.acciones && m.acciones.length > 0 && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {m.acciones.map((a, i) => <ActionCard key={i} accion={a} T={T} />)}
          </div>
        )}
      </div>
    );
  }

  function ActionCard({ accion, T }) {
    const [copied, setCopied] = React.useState(false);
    const [showImg, setShowImg] = React.useState(false);

    function copyMsg() {
      try {
        navigator.clipboard.writeText(accion.mensaje_whatsapp || '');
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
      } catch (e) {
        console.error('copy err', e);
      }
    }

    function shareWA() {
      const text = encodeURIComponent(accion.mensaje_whatsapp || '');
      // WhatsApp web: si en mobile abre app, si desktop abre web
      const url = `https://wa.me/?text=${text}`;
      window.open(url, '_blank');
    }

    return (
      <div style={{
        background: T.paperAlt, border: `1.5px solid ${T.accent}33`,
        borderRadius: 16, overflow: 'hidden',
      }}>
        {/* Header: producto + foto */}
        <div style={{ display: 'flex', gap: 10, padding: 12, alignItems: 'flex-start' }}>
          {accion.imagen_producto && (
            <div style={{
              width: 64, height: 64, borderRadius: 10, flexShrink: 0,
              background: '#fff', border: `1px solid ${T.hairline}`,
              overflow: 'hidden',
            }}>
              <img src={accion.imagen_producto} alt={accion.nombre}
                style={{ width: '100%', height: '100%', objectFit: 'contain' }} loading="lazy" />
            </div>
          )}
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: T.mono, fontSize: 9, letterSpacing: 1, color: T.inkMute, marginBottom: 2 }}>
              {accion.codigo} · {accion.catalogo === 'Lbel' ? "L'BEL" : (accion.catalogo || '').toUpperCase()}
              {accion.pagina ? ` · p.${accion.pagina}` : ''}
            </div>
            <div style={{
              fontFamily: T.serif, fontSize: 14, color: T.ink, lineHeight: 1.2,
              letterSpacing: -0.1, marginBottom: 2,
            }}>
              {accion.nombre}
            </div>
            {accion.tono && (
              <div style={{ fontFamily: T.serif, fontStyle: 'italic', fontSize: 11, color: T.inkSoft }}>
                {accion.tono}
              </div>
            )}
            {accion.razon && (
              <div style={{ fontFamily: T.sans, fontSize: 11, color: T.inkSoft, marginTop: 4, lineHeight: 1.35 }}>
                <b style={{ color: T.accent }}>¿Por qué?</b> {accion.razon}
              </div>
            )}
          </div>
        </div>

        {/* Mensaje WhatsApp ready */}
        <div style={{
          margin: '0 12px', padding: 10, borderRadius: 10,
          background: 'oklch(0.97 0.04 145)', border: '1px solid oklch(0.85 0.08 145)',
          fontFamily: T.sans, fontSize: 12, color: T.ink, lineHeight: 1.4,
          whiteSpace: 'pre-wrap',
        }}>
          💬 {accion.mensaje_whatsapp}
        </div>

        {/* Botones de acción */}
        <div style={{ display: 'flex', gap: 6, padding: 12 }}>
          <button onClick={shareWA} style={{
            flex: 2, padding: '10px 12px', borderRadius: 10,
            background: 'oklch(0.55 0.18 145)', color: '#fff', border: 'none',
            cursor: 'pointer', fontFamily: T.sans, fontSize: 13, fontWeight: 600,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
          }}>
            📤 Enviar por WhatsApp
          </button>
          <button onClick={copyMsg} style={{
            flex: 1, padding: '10px 12px', borderRadius: 10,
            background: copied ? T.good : T.paperAlt,
            color: copied ? '#fff' : T.ink,
            border: `1px solid ${copied ? T.good : T.hairline}`,
            cursor: 'pointer', fontFamily: T.sans, fontSize: 12, fontWeight: 500,
          }}>
            {copied ? '✓ Copiado' : '📋 Copiar'}
          </button>
          {accion.imagen_pagina_catalogo && (
            <button onClick={() => setShowImg(s => !s)} style={{
              padding: '10px 12px', borderRadius: 10,
              background: T.paperAlt, color: T.ink,
              border: `1px solid ${T.hairline}`, cursor: 'pointer',
              fontFamily: T.sans, fontSize: 12,
            }}>
              {showImg ? '🔼' : '🔽 Catálogo'}
            </button>
          )}
        </div>

        {/* Imagen de la página del catálogo (expandible) */}
        {showImg && accion.imagen_pagina_catalogo && (
          <div style={{ padding: '0 12px 12px' }}>
            <a href={accion.imagen_pagina_catalogo} target="_blank" rel="noopener" style={{
              display: 'block', borderRadius: 10, overflow: 'hidden', border: `1px solid ${T.hairline}`,
            }}>
              <img src={accion.imagen_pagina_catalogo} alt="Página catálogo"
                style={{ width: '100%', display: 'block' }} />
            </a>
            <div style={{ fontFamily: T.mono, fontSize: 9, color: T.inkMute, textAlign: 'center', marginTop: 4 }}>
              Toca para abrir en grande
            </div>
          </div>
        )}
      </div>
    );
  }

  // ─── Card de entrada (en home) ────────────────────────────────────
  function SofiaEntryCard({ vendedora, pedidos, onOpen }) {
    const T = window.T;
    const { Icon } = window;
    const premium = getPremiumStatus(pedidos, vendedora);
    const pct = Math.min(100, Math.round(premium.facturado / premium.threshold * 100));

    return (
      <div style={{ padding: '0 24px', marginBottom: 24 }}>
        <button onClick={onOpen} style={{
          width: '100%',
          padding: 18, borderRadius: 18,
          background: premium.unlocked
            ? `linear-gradient(135deg, ${T.accent}, oklch(0.45 0.18 320))`
            : T.paperAlt,
          color: premium.unlocked ? '#fff' : T.ink,
          border: premium.unlocked ? 'none' : `1px solid ${T.hairline}`,
          cursor: 'pointer', textAlign: 'left',
          display: 'flex', alignItems: 'center', gap: 14,
          boxShadow: premium.unlocked ? '0 12px 30px rgba(232,155,110,0.35)' : 'none',
        }}>
          <div style={{
            width: 56, height: 56, borderRadius: 999, overflow: 'hidden',
            background: premium.unlocked ? 'rgba(255,255,255,0.25)' : 'oklch(0.94 0.04 145)',
            position: 'relative',
            flexShrink: 0,
            border: premium.unlocked ? '2px solid rgba(255,255,255,0.4)' : 'none',
          }}>
            <img src="icons/sofia-avatar.png?v=1778529236" alt="Sofia"
              style={{
                width: '100%', height: '100%', objectFit: 'cover',
                filter: premium.unlocked ? 'none' : 'grayscale(0.6)',
              }} />
            {!premium.unlocked && (
              <div style={{
                position: 'absolute', bottom: -2, right: -2,
                background: T.ink, color: T.paper, borderRadius: 999,
                width: 22, height: 22, fontSize: 12,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>🔒</div>
            )}
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontFamily: T.mono, fontSize: 9, letterSpacing: 1.5, textTransform: 'uppercase',
              color: premium.unlocked ? 'rgba(255,255,255,0.7)' : T.inkMute,
            }}>
              {premium.unlocked ? '● Tu coach activa' : 'Coach Premium'}
            </div>
            <div style={{
              fontFamily: T.serif, fontSize: 18, letterSpacing: -0.3, marginTop: 2, lineHeight: 1.15,
            }}>
              {premium.unlocked ? 'Sofia te está esperando' : 'Desbloqueá a Sofia'}
            </div>
            <div style={{
              fontFamily: T.sans, fontSize: 11,
              color: premium.unlocked ? 'rgba(255,255,255,0.7)' : T.inkSoft,
              marginTop: 3, lineHeight: 1.3,
            }}>
              {premium.unlocked
                ? 'Pregúntale lo que sea sobre ventas, clientas, objeciones.'
                : `Te faltan $${premium.falta.toFixed(0)} en ventas este mes (${pct}%)`}
            </div>
            {!premium.unlocked && (
              <div style={{
                height: 4, background: 'rgba(0,0,0,0.08)', borderRadius: 999,
                marginTop: 8, overflow: 'hidden',
              }}>
                <div style={{
                  width: `${pct}%`, height: '100%',
                  background: T.accent, borderRadius: 999,
                  transition: 'width 0.6s',
                }} />
              </div>
            )}
          </div>
          {premium.unlocked && <Icon name="chevronR" size={18} color="#fff" />}
        </button>
      </div>
    );
  }

  Object.assign(window, { SofiaVendedoraScreen, SofiaEntryCard });
})();