/* global React, Icon */
const { useState: useSe, useEffect: useEe, useRef: useRe } = React;

// ============================================
// DIFFERENTIATORS BENTO
// ============================================
function Differentiators() {
  return (
    <section className="section" style={{ background: 'var(--bg)', position: 'relative' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Por que TSA Connect Pro</span>
          <h2 className="display-2">Menos ferramentas soltas.<br/>Mais controle operacional.</h2>
          <p className="lead mt-2">
            Empresas que crescem acumulam sistemas. A gente substitui todos por uma central unificada
            — com governança, tempo real e modularidade.
          </p>
        </div>

        <div className="bento reveal">
          {/* Big tile — multi-channel */}
          <div className="bento-tile wide" style={{ background: 'linear-gradient(135deg, var(--brand-700), var(--brand-900))', color: 'white', border: 'none' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 32, alignItems: 'center', height: '100%' }}>
              <div>
                <div className="pill pill-dark" style={{ marginBottom: 16 }}>Tempo real</div>
                <h3 className="display-3" style={{ color: 'white', margin: 0 }}>Conversas, notificações e métricas atualizadas no mesmo instante em que acontecem.</h3>
                <p className="mt-2" style={{ color: 'rgba(255,255,255,0.7)', fontSize: 15 }}>
                  Filas, transferências entre setores, status de atendentes e dashboards gerenciais
                  sincronizam instantaneamente em toda a operação.
                </p>
              </div>
              <RealtimeViz />
            </div>
          </div>

          {/* Multi-tenant */}
          <div className="bento-tile third">
            <div style={{ width: 44, height: 44, borderRadius: 10, background: 'var(--brand-50)', color: 'var(--brand-700)', display: 'grid', placeItems: 'center', marginBottom: 16 }}>
              <Icon name="layers" size={22}/>
            </div>
            <h4 className="display-3" style={{ fontSize: 22, margin: 0 }}>Multi-tenant de verdade</h4>
            <p className="mt-2 text-muted" style={{ fontSize: 14.5 }}>
              Isolamento completo de dados, usuários e configurações por empresa. Opere múltiplas unidades
              sem sobreposição.
            </p>
          </div>

          {/* Modular */}
          <div className="bento-tile third">
            <div style={{ width: 44, height: 44, borderRadius: 10, background: '#eef9f3', color: '#059669', display: 'grid', placeItems: 'center', marginBottom: 16 }}>
              <Icon name="grid" size={22}/>
            </div>
            <h4 className="display-3" style={{ fontSize: 22, margin: 0 }}>Arquitetura modular</h4>
            <p className="mt-2 text-muted" style={{ fontSize: 14.5 }}>
              Ative só os módulos que sua operação precisa. Expanda à medida que o negócio cresce, sem
              migrações ou retrabalho.
            </p>
          </div>

          {/* White-label */}
          <div className="bento-tile third">
            <div style={{ width: 44, height: 44, borderRadius: 10, background: '#fef3e7', color: '#d97706', display: 'grid', placeItems: 'center', marginBottom: 16 }}>
              <Icon name="globe" size={22}/>
            </div>
            <h4 className="display-3" style={{ fontSize: 22, margin: 0 }}>Pronto para revenda</h4>
            <p className="mt-2 text-muted" style={{ fontSize: 14.5 }}>
              White-label nativo: marca própria, domínio, planos e precificação independentes para
              quem opera como revenda.
            </p>
          </div>

          {/* Automation */}
          <div className="bento-tile half" style={{ overflow: 'hidden' }}>
            <div style={{ width: 44, height: 44, borderRadius: 10, background: '#f3e8ff', color: '#7c3aed', display: 'grid', placeItems: 'center', marginBottom: 16 }}>
              <Icon name="bot" size={22}/>
            </div>
            <h4 className="display-3" style={{ fontSize: 22, margin: 0 }}>Automação com IA nativa</h4>
            <p className="mt-2 text-muted" style={{ fontSize: 14.5 }}>
              Editor visual de fluxos BOT, classificação inteligente de tickets, sugestões de resposta
              e automações condicionais sem código.
            </p>
            <BotFlow />
          </div>

          {/* Governance */}
          <div className="bento-tile half">
            <div style={{ width: 44, height: 44, borderRadius: 10, background: '#ecfdf5', color: '#059669', display: 'grid', placeItems: 'center', marginBottom: 16 }}>
              <Icon name="shield" size={22}/>
            </div>
            <h4 className="display-3" style={{ fontSize: 22, margin: 0 }}>Governança granular</h4>
            <p className="mt-2 text-muted" style={{ fontSize: 14.5 }}>
              Permissões por empresa, perfil, função e módulo. Auditoria completa e controles de acesso
              preparados para corporações.
            </p>
            <GovernanceViz />
          </div>
        </div>
      </div>
    </section>
  );
}

function RealtimeViz() {
  const [pulse, setPulse] = useSe(0);
  useEe(() => {
    const t = setInterval(() => setPulse(p => p + 1), 1400);
    return () => clearInterval(t);
  }, []);
  const dots = [
    { x: 20, y: 30, c: '#5b7cf2' },
    { x: 70, y: 20, c: '#93adff' },
    { x: 80, y: 60, c: '#25D366' },
    { x: 30, y: 75, c: '#5b7cf2' },
    { x: 50, y: 45, c: '#c7d4ff' },
  ];
  return (
    <div style={{ position: 'relative', height: 220, background: 'rgba(255,255,255,0.04)', borderRadius: 12, border: '1px solid rgba(255,255,255,0.08)', overflow: 'hidden' }}>
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
        {dots.map((d, i) => dots.slice(i+1).map((e, j) => (
          <line key={`${i}-${j}`} x1={`${d.x}%`} y1={`${d.y}%`} x2={`${e.x}%`} y2={`${e.y}%`} stroke="rgba(147,173,255,0.15)" strokeWidth="1"/>
        )))}
        {dots.map((d, i) => (
          <g key={i}>
            <circle cx={`${d.x}%`} cy={`${d.y}%`} r="14" fill={d.c} opacity="0.2">
              <animate attributeName="r" values="6;22;6" dur="2s" begin={`${i * 0.3}s`} repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0.4;0;0.4" dur="2s" begin={`${i * 0.3}s`} repeatCount="indefinite"/>
            </circle>
            <circle cx={`${d.x}%`} cy={`${d.y}%`} r="5" fill={d.c}/>
          </g>
        ))}
      </svg>
      <div style={{ position: 'absolute', bottom: 14, left: 14, right: 14, display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'rgba(255,255,255,0.55)', fontFamily: 'var(--font-mono)' }}>
        <span>⚡ WebSocket</span>
        <span>· 12 filiais ativas</span>
        <span>· {(pulse * 3 + 128)} evts/s</span>
      </div>
    </div>
  );
}

function BotFlow() {
  return (
    <div style={{ marginTop: 20, background: 'var(--surface-2)', borderRadius: 10, padding: 14, border: '1px solid var(--border)' }}>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap', fontSize: 12, fontFamily: 'var(--font-mono)' }}>
        <span style={{ padding: '4px 8px', background: 'var(--brand-50)', color: 'var(--brand-700)', borderRadius: 6, border: '1px solid var(--brand-100)' }}>msg recebida</span>
        <span style={{ color: 'var(--text-muted)' }}>→</span>
        <span style={{ padding: '4px 8px', background: '#fef3e7', color: '#d97706', borderRadius: 6, border: '1px solid #fcd9a4' }}>classificar IA</span>
        <span style={{ color: 'var(--text-muted)' }}>→</span>
        <span style={{ padding: '4px 8px', background: '#f3e8ff', color: '#7c3aed', borderRadius: 6, border: '1px solid #ddd0fa' }}>rotear setor</span>
        <span style={{ color: 'var(--text-muted)' }}>→</span>
        <span style={{ padding: '4px 8px', background: '#ecfdf5', color: '#059669', borderRadius: 6, border: '1px solid #a7f3d0' }}>atender</span>
      </div>
    </div>
  );
}

function GovernanceViz() {
  return (
    <div style={{ marginTop: 20, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 }}>
      {['Atender', 'Transferir', 'Relatórios', 'Financeiro', 'Config', 'Usuários', 'Contratos', 'API'].map((p, i) => (
        <div key={i} style={{
          padding: '6px 8px',
          borderRadius: 6,
          border: '1px solid var(--border)',
          fontSize: 11,
          fontFamily: 'var(--font-mono)',
          textAlign: 'center',
          color: i < 5 ? 'var(--brand-700)' : 'var(--text-muted)',
          background: i < 5 ? 'var(--brand-50)' : 'var(--surface-2)',
        }}>{p}</div>
      ))}
    </div>
  );
}

// ============================================
// MODULES PILLARS
// ============================================
function Modules() {
  const pillars = [
    {
      title: 'Atendimento & Comunicação',
      desc: 'Todos os canais que falam com seu cliente, no mesmo painel.',
      color: '#25D366',
      bg: '#ecfdf5',
      items: [
        { icon: 'whatsapp', name: 'Atendimentos WhatsApp', desc: 'Múltiplas conexões, distribuição, transferência, histórico e monitoramento.', href: 'whatsapp.html' },
        { icon: 'megaphone', name: 'Campanhas', desc: 'Envio em massa com templates, variáveis e acompanhamento de desempenho.' },
        { icon: 'calendar', name: 'Agendamentos', desc: 'Mensagens programadas com recorrência e controle de status.' },
        { icon: 'chat', name: 'Chat interno', desc: 'Comunicação da equipe em tempo real, integrada à operação.' },
        { icon: 'mail', name: 'E-mail', desc: 'Caixas unificadas, pastas e organização corporativa.' },
      ]
    },
    {
      title: 'Comercial & Relacionamento',
      desc: 'CRM, contatos, oportunidades e contratos em um único funil.',
      color: '#3b5bdb',
      bg: '#eef2ff',
      items: [
        { icon: 'users', name: 'Cadastros unificados', desc: 'Estrutura hierárquica de empresas e usuários.' },
        { icon: 'users', name: 'Contatos', desc: 'Tags, categorias, grupos e segmentação centralizada.' },
        { icon: 'kanban', name: 'Kanban / CRM', desc: 'Gestão de oportunidades, funil e acompanhamento comercial.', href: 'modulo-crm.html' },
        { icon: 'contract', name: 'Contratos', desc: 'Ciclo completo, vigência, valores e vínculos com clientes.' },
      ]
    },
    {
      title: 'Gestão Operacional',
      desc: 'Tarefas, tickets, calendário e base de conhecimento.',
      color: '#8b5cf6',
      bg: '#f3e8ff',
      items: [
        { icon: 'ticket', name: 'Tickets de suporte', desc: 'Status, prioridade, histórico, filtros e acompanhamento.' },
        { icon: 'task', name: 'Tarefas', desc: 'Kanban visual com responsáveis, subtarefas, recorrência e lembretes.' },
        { icon: 'calendar', name: 'Calendário', desc: 'Eventos, compromissos e recorrência sincronizados.' },
        { icon: 'bell', name: 'Informativos', desc: 'Comunicação interna segmentada e publicação corporativa.' },
        { icon: 'book', name: 'Base de conhecimento', desc: 'Artigos, consultas e apoio à equipe e clientes.' },
        { icon: 'cap', name: 'Treinamentos', desc: 'Capacitação, progresso e certificação da equipe.' },
      ]
    },
    {
      title: 'Financeiro & Serviços',
      desc: 'Contas, recorrência, serviços e catálogo sob controle.',
      color: '#10b981',
      bg: '#ecfdf5',
      items: [
        { icon: 'money', name: 'Financeiro', desc: 'Contas a pagar, a receber, projeção, assinaturas e cobranças.', href: 'modulo-financeiro.html' },
        { icon: 'grid', name: 'Serviços', desc: 'Catálogo, prestação, uso e vínculo com atendimentos e contratos.' },
        { icon: 'layers', name: 'Produtos', desc: 'Cadastro e apoio a fluxos comerciais e operacionais.' },
      ]
    },
    {
      title: 'Equipe & Conformidade',
      desc: 'Jornada, ponto e controles de rotina.',
      color: '#f59e0b',
      bg: '#fef3e7',
      items: [
        { icon: 'clock', name: 'Ponto eletrônico', desc: 'Jornada, intervalos, espelho e políticas de trabalho.' },
      ]
    },
    {
      title: 'Gestão Estratégica',
      desc: 'Relatórios, monitoramento e configurações avançadas.',
      color: '#ef4444',
      bg: '#fee2e2',
      items: [
        { icon: 'chart', name: 'Relatórios & Estatísticas', desc: 'Dashboards para acompanhamento de desempenho.' },
        { icon: 'bolt', name: 'Monitoramento', desc: 'Saúde da operação, filas e métricas em tempo real.' },
        { icon: 'settings', name: 'Configurações', desc: 'Empresa, segurança, integrações e personalização.' },
      ]
    },
  ];

  return (
    <section className="section" id="modulos" style={{ background: 'var(--bg-alt)' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Módulos da plataforma</span>
          <h2 className="display-2">Uma plataforma. Seis pilares.<br/>Mais de 20 módulos conectados.</h2>
          <p className="lead mt-2">Ative apenas o que faz sentido para sua operação. Expanda conforme o negócio cresce.</p>
        </div>

        <div className="flex flex-col gap-6">
          {pillars.map((p, i) => (
            <div key={i} className="card reveal" style={{ padding: 32, background: 'var(--surface)' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: 40, alignItems: 'start' }}>
                <div style={{ position: 'sticky', top: 100 }}>
                  <div style={{ width: 48, height: 48, borderRadius: 12, background: p.bg, color: p.color, display: 'grid', placeItems: 'center', marginBottom: 14 }}>
                    <Icon name={p.items[0].icon} size={22}/>
                  </div>
                  <h3 className="display-3" style={{ margin: 0, fontSize: 24 }}>{p.title}</h3>
                  <p className="mt-1 text-muted" style={{ fontSize: 14.5 }}>{p.desc}</p>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 14 }}>
                  {p.items.map((item, j) => {
                    const Tag = item.href ? 'a' : 'div';
                    const linkProps = item.href ? { href: item.href, style: { textDecoration: 'none', color: 'inherit', cursor: 'pointer' } } : {};
                    return (
                      <Tag key={j} className={`mod-chip ${item.href ? 'mod-chip-link' : ''}`} {...linkProps}>
                        <div className="mod-icon" style={{ background: p.bg, color: p.color }}>
                          <Icon name={item.icon} size={18}/>
                        </div>
                        <div>
                          <div style={{ fontWeight: 500, fontSize: 14.5, letterSpacing: '-0.005em', display: 'flex', alignItems: 'center', gap: 6 }}>
                            {item.name}
                            {item.href && <span style={{ fontSize: 11, color: p.color, opacity: 0.7 }}>→</span>}
                          </div>
                          <div style={{ fontSize: 12.5, color: 'var(--text-muted)', lineHeight: 1.5, marginTop: 4 }}>{item.desc}</div>
                        </div>
                      </Tag>
                    );
                  })}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Differentiators = Differentiators;
window.Modules = Modules;