/* global React, Icon */
const { useState: useStateDash, useEffect: useEffectDash, useRef: useRefDash } = React;

// ============================================
// DashboardMockup — shown in hero (3D perspective)
// Inspired by the real product grid but redesigned
// ============================================
function DashboardMockup() {
  const modules = [
    { n: 'Atendimentos', i: 'whatsapp', c: '#25D366', badge: 8 },
    { n: 'CRM Kanban', i: 'kanban', c: '#8b5cf6' },
    { n: 'Contatos', i: 'users', c: '#06b6d4' },
    { n: 'Contratos', i: 'contract', c: '#f59e0b' },
    { n: 'Financeiro', i: 'money', c: '#10b981', badge: 3 },
    { n: 'Agendamentos', i: 'calendar', c: '#3b82f6' },
    { n: 'Campanhas', i: 'megaphone', c: '#ec4899' },
    { n: 'BOT & IA', i: 'bot', c: '#6366f1' },
    { n: 'Tarefas', i: 'task', c: '#14b8a6' },
    { n: 'E-mail', i: 'mail', c: '#ef4444' },
    { n: 'Tickets', i: 'ticket', c: '#f97316' },
    { n: 'Relatórios', i: 'chart', c: '#3b5bdb' },
  ];

  return (
    <div style={{
      background: 'linear-gradient(180deg, #0f152a 0%, #060913 100%)',
      borderRadius: 16,
      padding: '18px 20px 28px',
      minHeight: 520,
      color: '#e6eaf4',
      fontFamily: 'var(--font-body)',
    }}>
      {/* Top bar */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingBottom: 16, borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 26, height: 26, borderRadius: 6, background: 'linear-gradient(135deg, #3b5bdb, #1e3a8a)', display: 'grid', placeItems: 'center' }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2"><path d="M8 10h.01M12 10h.01M16 10h.01"/><path d="M21 12a8 8 0 0 1-11.5 7.2L4 21l1.8-5.5A8 8 0 1 1 21 12Z" strokeLinecap="round"/></svg>
          </div>
          <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '-0.01em' }}>TSA Connect Pro</div>
        </div>
        <div style={{ display: 'flex', gap: 20, fontSize: 12, color: 'rgba(255,255,255,0.55)' }}>
          <span>Configurações</span>
          <span style={{ color: '#93adff', position: 'relative' }}>Atendimentos
            <span style={{ position: 'absolute', top: -6, right: -14, background: '#ef4444', color: 'white', fontSize: 9, borderRadius: 999, padding: '1px 5px', fontWeight: 600 }}>8</span>
          </span>
          <span>Cadastros</span>
          <span>Contatos</span>
          <span>Monitoramento</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ width: 24, height: 24, borderRadius: '50%', background: 'linear-gradient(135deg, #5b7cf2, #2547b5)' }}/>
          <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)' }}>Online</div>
        </div>
      </div>

      {/* Greeting */}
      <div style={{ textAlign: 'center', margin: '28px 0 22px' }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em' }}>Boa tarde, Guilherme</div>
        <div style={{ fontSize: 11.5, color: 'rgba(255,255,255,0.45)', marginTop: 4, fontFamily: 'var(--font-mono)' }}>Sáb, 18 abr • 17:22:01</div>
      </div>

      {/* Module grid */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 8 }}>
        {modules.map((m, i) => (
          <div key={i} style={{
            background: 'rgba(255,255,255,0.02)',
            border: '1px solid rgba(255,255,255,0.05)',
            borderRadius: 10,
            padding: '14px 10px',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            gap: 8,
            position: 'relative',
            transition: 'background 0.2s ease',
          }}>
            <div style={{
              width: 34, height: 34, borderRadius: 8,
              background: `${m.c}22`,
              border: `1px solid ${m.c}44`,
              display: 'grid', placeItems: 'center',
              color: m.c,
              position: 'relative',
            }}>
              <Icon name={m.i} size={17} />
              {m.badge && (
                <span style={{ position: 'absolute', top: -5, right: -5, background: '#ef4444', color: 'white', fontSize: 9, fontWeight: 600, borderRadius: 999, padding: '1px 5px', minWidth: 16, textAlign: 'center' }}>{m.badge}</span>
              )}
            </div>
            <div style={{ fontSize: 10.5, fontWeight: 500, textAlign: 'center', letterSpacing: '-0.005em' }}>{m.n}</div>
          </div>
        ))}
      </div>

      {/* Stats row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginTop: 18 }}>
        {[
          { l: 'Em atendimento', v: '24', c: '#25D366' },
          { l: 'Pendentes', v: '07', c: '#f59e0b' },
          { l: 'Resolvidos hoje', v: '148', c: '#3b5bdb' },
          { l: 'SLA médio', v: '1m 42s', c: '#8b5cf6' },
        ].map((s, i) => (
          <div key={i} style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 10, padding: '10px 12px' }}>
            <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>{s.l}</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, marginTop: 4, color: s.c }}>{s.v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.DashboardMockup = DashboardMockup;