/* COMERCIAL · CARTEIRA — drawer com 6 tabs: Resumo · Em aberto · Financeiro · Cross-sell · Contactos · Histórico Digi. */

const fmtEur = (n) => n.toLocaleString('pt-PT', { maximumFractionDigits: 0 }) + ' €';
const fmtEurK = (n) => n >= 1000 ? (n/1000).toFixed(1).replace('.0','') + 'k €' : n + ' €';

const StageBadge = ({ stage }) => {
  const colors = {
    65: { bg: 'color-mix(in oklch, var(--accent-500) 14%, transparent)', color: 'var(--accent-500)' },
    80: { bg: 'color-mix(in oklch, var(--warning) 14%, transparent)', color: 'var(--warning)' },
    90: { bg: 'color-mix(in oklch, var(--success) 14%, transparent)', color: 'var(--success)' },
  };
  const c = colors[stage] || colors[65];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      padding: '2px 8px', borderRadius: 999, fontSize: 10,
      fontFamily: 'var(--font-mono)', fontWeight: 700,
      background: c.bg, color: c.color,
    }}>{stage}</span>
  );
};

// ---------- Tab: Resumo ----------
const TabResumo = ({ c }) => {
  const h = HEALTH_META[c.health];
  return (
    <div style={{ padding: 20 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 16 }}>
        {[
          { label: 'LTV TOTAL', value: fmtEur(c.ltv) },
          { label: 'MÉDIA MENSAL', value: fmtEur(c.monthlyAvg) },
          { label: 'TICKET MÉDIO', value: fmtEur(c.ticketAvg) },
        ].map((m, i) => (
          <div key={i} style={{ padding: 12, background: 'var(--bg-sunken)', borderRadius: 8, border: '1px solid var(--border)' }}>
            <div style={{ fontSize: 9.5, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.08em' }}>{m.label}</div>
            <div className="font-display" style={{ fontSize: 16, fontWeight: 700, marginTop: 2 }}>{m.value}</div>
          </div>
        ))}
      </div>

      <div style={{
        padding: 14,
        background: `color-mix(in oklch, ${h.color} 8%, transparent)`,
        border: `1px solid color-mix(in oklch, ${h.color} 30%, var(--border))`,
        borderRadius: 10, marginBottom: 16,
      }}>
        <div style={{ fontSize: 10, fontWeight: 700, color: h.color, letterSpacing: '0.06em', marginBottom: 4 }}>{h.emoji} SAÚDE · {h.label.toUpperCase()}</div>
        <div style={{ fontSize: 13, color: 'var(--text)', lineHeight: 1.55 }}>{c.note}</div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 16 }}>
        <div>
          <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.06em', marginBottom: 6 }}>ÚLTIMA COMPRA</div>
          <div className="font-display" style={{ fontSize: 15, fontWeight: 600 }}>{c.lastBuy.date}</div>
          <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>
            {c.lastBuy.daysAgo !== null ? `há ${c.lastBuy.daysAgo} dias · ${fmtEur(c.lastBuy.value)}` : '—'}
          </div>
        </div>
        <div>
          <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.06em', marginBottom: 6 }}>PRÓXIMA PREVISTA</div>
          <div className="font-display" style={{ fontSize: 15, fontWeight: 600 }}>{c.nextBuy.date}</div>
          <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{c.nextBuy.note} · {c.nextBuy.confidence}% fit</div>
        </div>
      </div>

      <div style={{ marginBottom: 16 }}>
        <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.06em', marginBottom: 6 }}>MARCAS QUE COMPRA</div>
        <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
          {c.brands.map(b => (
            <span key={b} style={{
              padding: '3px 10px', fontSize: 11, borderRadius: 999,
              background: b.includes('concorrência') ? 'transparent' : 'var(--bg-elev)',
              border: `1px solid ${b.includes('concorrência') ? 'var(--danger)' : 'var(--border)'}`,
              color: b.includes('concorrência') ? 'var(--danger)' : 'var(--text)',
            }}>{b}</span>
          ))}
        </div>
      </div>

      <div style={{ padding: 12, background: 'var(--bg-sunken)', borderRadius: 8, border: '1px solid var(--border)', fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.6 }}>
        <strong style={{ color: 'var(--text)' }}>{c.city}</strong> · {c.sector} · {c.size} colaboradores<br/>
        Decisor: <strong style={{ color: 'var(--text)' }}>{c.contact}</strong>
      </div>
    </div>
  );
};

// ---------- Tab: Em aberto (OPs + ProdTrack) ----------
const TabEmAberto = ({ c }) => (
  <div style={{ padding: 20 }}>
    <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.06em', marginBottom: 8 }}>OPORTUNIDADES ACTIVAS</div>
    {c.ops.length > 0 ? (
      c.ops.map(op => (
        <div key={op.id} style={{
          padding: 14, background: 'var(--bg-sunken)', border: '1px solid var(--border)',
          borderRadius: 10, marginBottom: 10,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
            <span className="font-mono" style={{ fontSize: 11, color: 'var(--text-muted)' }}>OP #{op.id}</span>
            <StageBadge stage={op.stage} />
            <span style={{ flex: 1 }} />
            <span className="font-display" style={{ fontSize: 15, fontWeight: 700 }}>{fmtEur(op.value)}</span>
          </div>
          <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 4 }}>{op.product}</div>
          <div style={{ fontSize: 11, color: op.days > 7 ? 'var(--warning)' : 'var(--text-muted)' }}>
            {op.days > 7 ? '⚠️ ' : ''}há {op.days} dias no stage {op.stage}
          </div>
        </div>
      ))
    ) : (
      <div style={{ padding: 30, textAlign: 'center', color: 'var(--text-muted)', fontSize: 12, border: '1px dashed var(--border)', borderRadius: 8 }}>
        Sem OPs activas neste momento
      </div>
    )}

    <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.06em', margin: '20px 0 8px' }}>PRODTRACK · ENCOMENDAS</div>
    <div style={{ padding: 12, background: 'var(--bg-sunken)', border: '1px solid var(--border)', borderRadius: 8, fontSize: 12, color: 'var(--text-muted)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}><span>Em produção</span><span style={{ color: 'var(--text)', fontWeight: 600 }}>0</span></div>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Em expedição</span><span style={{ color: 'var(--text)', fontWeight: 600 }}>0</span></div>
    </div>
  </div>
);

// ---------- Tab: Financeiro (Primavera) ----------
const TabFinanceiro = ({ c }) => {
  const atrasado = c.health === 'atraso';
  return (
    <div style={{ padding: 20 }}>
      <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.06em', marginBottom: 8 }}>ESTADO FINANCEIRO · PRIMAVERA</div>
      <div style={{
        padding: 14,
        background: atrasado ? 'color-mix(in oklch, var(--danger) 10%, transparent)' : 'var(--bg-sunken)',
        border: `1px solid ${atrasado ? 'color-mix(in oklch, var(--danger) 30%, var(--border))' : 'var(--border)'}`,
        borderRadius: 10, marginBottom: 12,
      }}>
        <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.04em', marginBottom: 4, color: atrasado ? 'var(--danger)' : 'var(--success)' }}>
          {atrasado ? '🔴 BLOQUEADO · EM ATRASO' : '🟢 OK · SEM ATRASOS'}
        </div>
        {atrasado && <div style={{ fontSize: 12, color: 'var(--text)', lineHeight: 1.5 }}>11.240 € em atraso · 45 dias · limite de crédito 85% atingido</div>}
        {!atrasado && <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>Cliente em dia com todas as obrigações.</div>}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 14 }}>
        <div style={{ padding: 12, background: 'var(--bg-sunken)', borderRadius: 8, border: '1px solid var(--border)' }}>
          <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.06em' }}>LIMITE CRÉDITO</div>
          <div className="font-display" style={{ fontSize: 15, fontWeight: 700, marginTop: 2 }}>{fmtEurK(c.monthlyAvg * 2)}</div>
        </div>
        <div style={{ padding: 12, background: 'var(--bg-sunken)', borderRadius: 8, border: '1px solid var(--border)' }}>
          <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.06em' }}>USADO</div>
          <div className="font-display" style={{ fontSize: 15, fontWeight: 700, color: atrasado ? 'var(--danger)' : 'var(--text)', marginTop: 2 }}>
            {atrasado ? '85%' : '34%'}
          </div>
        </div>
      </div>

      <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.06em', marginBottom: 8 }}>CONDIÇÕES NEGOCIADAS</div>
      <div style={{ padding: 12, background: 'var(--bg-sunken)', border: '1px solid var(--border)', borderRadius: 8, fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.7 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Prazo pagamento</span><span style={{ color: 'var(--text)', fontWeight: 500 }}>30 dias</span></div>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Desconto pronto pag.</span><span style={{ color: 'var(--text)', fontWeight: 500 }}>2,5%</span></div>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Rappel anual</span><span style={{ color: 'var(--text)', fontWeight: 500 }}>{c.ltv > 500000 ? '3%' : '—'}</span></div>
      </div>
    </div>
  );
};

// ---------- Tab: Cross-sell ----------
const TabCrossSell = ({ c }) => {
  const suggestions = [];
  if (!c.brands.includes('BIOND')) suggestions.push({
    product: 'BIOND · Tinta UV',
    why: `Compra Mimaki há anos mas nunca experimentou a linha BIOND. 3 referências de sector ${c.sector} passaram · -18% custo.`,
    fit: 84,
  });
  if (!c.brands.includes('Sensek')) suggestions.push({
    product: 'Sensek · Media performance',
    why: `Volume mensal ${fmtEurK(c.monthlyAvg)} justifica linha Sensek premium. ROI 8 meses.`,
    fit: 71,
  });
  if (!c.brands.includes('AllDecor')) suggestions.push({
    product: 'AllDecor · 59 texturas',
    why: 'Nova linha decoração — upsell para cliente gráfico tradicional. Mercado de decoração residencial a crescer.',
    fit: 62,
  });
  return (
    <div style={{ padding: 20 }}>
      <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.06em', marginBottom: 12 }}>
        SUGESTÕES DA DIGI · CROSS-SELL
      </div>
      {suggestions.length === 0 ? (
        <div style={{ padding: 30, textAlign: 'center', color: 'var(--text-muted)', fontSize: 12, border: '1px dashed var(--border)', borderRadius: 8 }}>
          Este cliente já compra todas as marcas da linha. Foca em volume.
        </div>
      ) : suggestions.map((s, i) => (
        <div key={i} style={{
          padding: 14, background: 'var(--bg-sunken)',
          border: '1px solid var(--border)', borderRadius: 10, marginBottom: 10,
        }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 8 }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 4 }}>{s.product}</div>
              <div style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.5 }}>{s.why}</div>
            </div>
            <div style={{
              padding: '4px 10px', borderRadius: 999, flexShrink: 0,
              background: 'color-mix(in oklch, var(--ai-500) 14%, transparent)',
              color: 'var(--ai-500)', fontWeight: 700, fontSize: 11, fontFamily: 'var(--font-display)',
            }}>{s.fit}</div>
          </div>
          <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
            <button className="btn btn-xs" style={{ background: 'var(--ai-500)', color: '#fff', borderColor: 'transparent' }}>
              <Icon name="sparkle" size={10} />
              Preparar proposta
            </button>
            <button className="btn btn-xs">Pedir ficha</button>
          </div>
        </div>
      ))}
    </div>
  );
};

// ---------- Tab: Contactos ----------
const TabContactos = ({ c }) => {
  const contacts = [
    { name: c.contact.split(' · ')[0], role: c.contact.split(' · ')[1] || 'Contacto principal', type: 'decisor', phone: '+351 9X XXX XXXX', email: 'decisor@empresa.pt', lastTouch: 'WA · há 3d' },
    { name: 'Técnico Produção', role: 'Operações', type: 'tecnico', phone: '+351 9X XXX XXXX', email: 'producao@empresa.pt', lastTouch: 'Email · há 12d' },
    { name: 'Financeiro', role: 'Contabilidade', type: 'financeiro', phone: '+351 2X XXX XXXX', email: 'geral@empresa.pt', lastTouch: 'Primavera · há 7d' },
  ];
  const typeColors = { decisor: 'var(--ai-500)', tecnico: 'var(--accent-500)', financeiro: 'var(--warning)' };
  const typeLabels = { decisor: 'Decisor', tecnico: 'Técnico', financeiro: 'Financeiro' };
  return (
    <div style={{ padding: 20 }}>
      {contacts.map((p, i) => (
        <div key={i} style={{ padding: 14, background: 'var(--bg-sunken)', border: '1px solid var(--border)', borderRadius: 10, marginBottom: 10 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
            <div style={{
              width: 34, height: 34, borderRadius: 17,
              background: typeColors[p.type], color: '#fff',
              display: 'grid', placeItems: 'center',
              fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12,
            }}>{p.name.split(' ').map(n => n[0]).slice(0,2).join('')}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>{p.name}</div>
              <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{p.role}</div>
            </div>
            <span style={{
              padding: '2px 8px', fontSize: 10, borderRadius: 999,
              background: `color-mix(in oklch, ${typeColors[p.type]} 14%, transparent)`,
              color: typeColors[p.type], fontWeight: 600,
            }}>{typeLabels[p.type]}</span>
          </div>
          <div style={{ fontSize: 11, color: 'var(--text-muted)', lineHeight: 1.7 }}>
            <div>{p.phone} · {p.email}</div>
            <div>Última interacção: {p.lastTouch}</div>
          </div>
        </div>
      ))}
      <div style={{ marginTop: 12, padding: 12, background: 'color-mix(in oklch, var(--ai-500) 6%, transparent)', borderRadius: 8, fontSize: 11.5, color: 'var(--text-muted)' }}>
        <Icon name="sparkle" size={11} style={{ color: 'var(--ai-500)', marginRight: 6 }} />
        Aniversário da {c.name}: 15 de Setembro (25 anos em 2026).
      </div>
    </div>
  );
};

// ---------- Tab: Histórico Digi ----------
const TabHistorico = ({ c, onOpenClientes }) => {
  const history = [
    { time: 'Hoje · 10:47', channel: 'WA', preview: 'Então se calhar marcamos para amanhã de manhã, 10h30', side: 'client' },
    { time: 'Hoje · 10:14', channel: 'Digi', preview: 'Há sim — no PrintPlan Care existe fidelização de 36 meses. Se terminarem antes…', side: 'digi' },
    { time: 'Hoje · 09:43', channel: 'Digi', preview: '📄 Proposta-UCJV330-GraficaNorte.pdf · 2,1 MB', side: 'digi' },
    { time: 'Ontem · 16:20', channel: 'Digi', preview: 'Cliente perguntou sobre penalização em cancelamento antecipado', side: 'system' },
    { time: '18 Abr · 11:30', channel: 'WA', preview: 'Envio a proposta hoje, ok?', side: 'user' },
    { time: '17 Abr · 14:00', channel: 'Visita', preview: 'Reunião no cliente · briefing automático entregue', side: 'system' },
  ];
  return (
    <div style={{ padding: 20 }}>
      <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.06em', marginBottom: 12 }}>
        ÚLTIMAS INTERACÇÕES · DIGI ↔ CLIENTE
      </div>
      <div style={{ position: 'relative', paddingLeft: 18 }}>
        <div style={{ position: 'absolute', left: 5, top: 6, bottom: 6, width: 1, background: 'var(--border)' }} />
        {history.map((h, i) => (
          <div key={i} style={{ position: 'relative', marginBottom: 14 }}>
            <div style={{
              position: 'absolute', left: -18, top: 4, width: 11, height: 11, borderRadius: 6,
              background: h.side === 'client' ? 'var(--success)' : h.side === 'user' ? 'var(--warning)' : 'var(--ai-500)',
              border: '2px solid var(--bg-elev)',
            }} />
            <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', marginBottom: 2 }}>
              {h.time} · {h.channel}
            </div>
            <div style={{ fontSize: 12.5, color: 'var(--text-muted)', lineHeight: 1.5 }}>{h.preview}</div>
          </div>
        ))}
      </div>
      <button onClick={onOpenClientes} className="btn btn-sm" style={{ width: '100%', justifyContent: 'center', marginTop: 12 }}>
        <Icon name="external" size={12} />
        Abrir conversa completa em Clientes
      </button>
    </div>
  );
};

// ---------- Main drawer ----------
const CarteiraDrawer = ({ cliente, onClose, onOpenClientes }) => {
  const [tab, setTab] = React.useState('resumo');
  React.useEffect(() => { setTab('resumo'); }, [cliente && cliente.id]);
  if (!cliente) return null;
  const h = HEALTH_META[cliente.health];
  const TABS = [
    { id: 'resumo', label: 'Resumo', icon: 'info' },
    { id: 'aberto', label: 'Em aberto', icon: 'box', count: cliente.ops.length || null },
    { id: 'finance', label: 'Financeiro', icon: 'dollar' },
    { id: 'cross', label: 'Cross-sell', icon: 'sparkle', ai: true },
    { id: 'contacts', label: 'Contactos', icon: 'user' },
    { id: 'history', label: 'Histórico', icon: 'clock' },
  ];
  return (
    <>
      <div onClick={onClose} style={{
        position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.3)',
        zIndex: 60, animation: 'fade-in 0.18s',
      }} />
      <aside style={{
        position: 'absolute', top: 0, right: 0, bottom: 0,
        width: 520, maxWidth: 'calc(100vw - 120px)',
        background: 'var(--bg-elev)',
        borderLeft: '1px solid var(--border)',
        boxShadow: 'var(--shadow-lg)',
        display: 'flex', flexDirection: 'column',
        zIndex: 61, animation: 'slide-in-right 0.22s cubic-bezier(0.4,0,0.2,1)',
      }}>
        {/* header */}
        <div style={{ padding: '18px 20px 14px', borderBottom: '1px solid var(--border)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
            <div style={{
              width: 40, height: 40, borderRadius: 10,
              background: cliente.logoBg, color: '#fff',
              display: 'grid', placeItems: 'center',
              fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14,
            }}>{cliente.logo}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="font-display" style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em' }}>{cliente.name}</div>
              <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>{cliente.city} · {cliente.sector}</div>
            </div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '4px 10px', borderRadius: 999,
              background: `color-mix(in oklch, ${h.color} 14%, transparent)`,
              color: h.color, fontSize: 11, fontWeight: 700,
            }}>{h.emoji} {h.short}</div>
            <button onClick={onClose} className="btn btn-sm btn-ghost" style={{ padding: 6 }}>
              <Icon name="close" size={14} />
            </button>
          </div>
          {/* Tabs */}
          <div style={{ display: 'flex', gap: 2, overflowX: 'auto' }}>
            {TABS.map(t => (
              <button key={t.id} onClick={() => setTab(t.id)} style={{
                display: 'inline-flex', alignItems: 'center', gap: 5,
                padding: '6px 10px', borderRadius: 6, flexShrink: 0,
                fontSize: 11.5, fontWeight: 500,
                background: tab === t.id ? 'var(--bg-sunken)' : 'transparent',
                color: tab === t.id ? 'var(--text)' : 'var(--text-muted)',
                border: `1px solid ${tab === t.id ? 'var(--border)' : 'transparent'}`,
                position: 'relative',
              }}>
                <Icon name={t.icon} size={11} style={{ color: t.ai ? 'var(--ai-500)' : 'inherit' }} />
                {t.label}
                {t.count > 0 && <span className="font-mono" style={{ fontSize: 9, color: 'var(--accent-500)', background: 'rgba(0,163,255,0.14)', padding: '0 4px', borderRadius: 3, marginLeft: 2 }}>{t.count}</span>}
              </button>
            ))}
          </div>
        </div>

        {/* body */}
        <div style={{ flex: 1, overflowY: 'auto' }} className="scrollbar">
          {tab === 'resumo' && <TabResumo c={cliente} />}
          {tab === 'aberto' && <TabEmAberto c={cliente} />}
          {tab === 'finance' && <TabFinanceiro c={cliente} />}
          {tab === 'cross' && <TabCrossSell c={cliente} />}
          {tab === 'contacts' && <TabContactos c={cliente} />}
          {tab === 'history' && <TabHistorico c={cliente} onOpenClientes={onOpenClientes} />}
        </div>

        {/* footer actions */}
        <div style={{ padding: 14, borderTop: '1px solid var(--border)', background: 'var(--bg-sunken)', display: 'flex', gap: 8 }}>
          <button onClick={onOpenClientes} className="btn btn-sm" style={{ flex: 1, justifyContent: 'center' }}>
            <Icon name="chat" size={12} />
            Ver conversa WA
          </button>
          <button className="btn btn-sm" style={{ flex: 1, justifyContent: 'center', background: 'var(--ai-500)', color: '#fff', borderColor: 'transparent' }}>
            <Icon name="sparkle" size={12} />
            Pedir à Digi
          </button>
        </div>
      </aside>
      <style>{`
        @keyframes slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
        @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
      `}</style>
    </>
  );
};

window.CarteiraDrawer = CarteiraDrawer;