/* global React, Icon */
const { useState: useSx, useEffect: useEx, useRef: useRx } = React;

// ============================================
// WHATSAPP DEEP-DIVE SECTION
// ============================================
function WhatsAppSection() {
  return (
    <section className="section" id="whatsapp" style={{ background: 'var(--bg)', position: 'relative', overflow: 'hidden' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div className="reveal">
            <span className="eyebrow">Atendimento WhatsApp</span>
            <h2 className="display-2 mt-2">O WhatsApp virou sua central.<br/>Traga a operação toda para cá.</h2>
            <p className="lead mt-3">
              Múltiplas conexões, distribuição entre atendentes, transferência por setor,
              respostas rápidas, anotações internas, mídias e um histórico completo que nunca se perde.
            </p>

            <div className="mt-4" style={{ display: 'grid', gap: 14 }}>
              {[
                { i: 'check', t: 'Cloud API oficial da Meta', d: 'Integração via WhatsApp Business Platform, dentro das políticas oficiais.' },
                { i: 'check', t: 'Distribuição inteligente', d: 'Filas por setor, round-robin, carga de trabalho e SLA.' },
                { i: 'check', t: 'Templates + variáveis dinâmicas', d: 'Disparo em massa personalizado com aprovação de template oficial.' },
                { i: 'check', t: 'Monitoramento em tempo real', d: 'Supervisor acompanha todas as conversas ativas, pausadas e encerradas.' },
              ].map((f, i) => (
                <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <div style={{ width: 26, height: 26, borderRadius: 7, background: '#25D36618', color: '#059669', display: 'grid', placeItems: 'center', flexShrink: 0, marginTop: 2 }}>
                    <Icon name={f.i} size={15}/>
                  </div>
                  <div>
                    <div style={{ fontWeight: 500, fontSize: 16, letterSpacing: '-0.01em' }}>{f.t}</div>
                    <div className="text-muted mt-1" style={{ fontSize: 14 }}>{f.d}</div>
                  </div>
                </div>
              ))}
            </div>

            <div className="mt-4" style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="#demo" className="btn btn-primary">Agendar demonstração <Icon name="arrow" size={16}/></a>
              <a href="#" className="btn btn-ghost">Ver documentação da API</a>
            </div>
          </div>

          <div className="reveal" data-delay="2">
            <ConversationPanel />
          </div>
        </div>
      </div>
    </section>
  );
}

function ConversationPanel() {
  return (
    <div className="card" style={{
      padding: 0,
      background: 'var(--surface)',
      overflow: 'hidden',
      boxShadow: 'var(--shadow-lg)',
      borderRadius: 16,
      border: '1px solid var(--border)',
    }}>
      {/* header */}
      <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 14 }}>
        <div style={{ width: 38, height: 38, borderRadius: '50%', background: 'linear-gradient(135deg, #5b7cf2, #1e3a8a)', display: 'grid', placeItems: 'center', color: 'white', fontWeight: 600, fontSize: 15 }}>MS</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 500, fontSize: 14.5 }}>Maria Santos</div>
          <div style={{ fontSize: 12, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 6 }}>
            <span className="dot"/> Online · Em atendimento há 2min
          </div>
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          <button className="btn btn-ghost btn-sm" style={{ padding: '6px 10px' }}><Icon name="phone" size={14}/></button>
          <button className="btn btn-ghost btn-sm" style={{ padding: '6px 10px' }}><Icon name="users" size={14}/> Transferir</button>
        </div>
      </div>

      {/* tags */}
      <div style={{ padding: '10px 18px', display: 'flex', gap: 6, flexWrap: 'wrap', borderBottom: '1px solid var(--border)', background: 'var(--surface-2)' }}>
        <span className="pill" style={{ fontSize: 11, padding: '3px 9px' }}>🎯 Lead Qualificado</span>
        <span className="pill" style={{ fontSize: 11, padding: '3px 9px', background: '#fef3e7', color: '#d97706', borderColor: '#fcd9a4' }}>⚡ Prioridade Alta</span>
        <span className="pill" style={{ fontSize: 11, padding: '3px 9px', background: '#ecfdf5', color: '#059669', borderColor: '#a7f3d0' }}>Comercial</span>
      </div>

      {/* messages */}
      <div style={{ padding: 20, background: 'var(--surface-2)', minHeight: 340, display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{ alignSelf: 'center', fontSize: 11, color: 'var(--text-muted)', background: 'var(--surface)', padding: '4px 12px', borderRadius: 999, border: '1px solid var(--border)' }}>Hoje, 14:22</div>

        <MsgIn text="Olá! Gostaria de saber os planos para suporte técnico." time="14:22" />
        <MsgOut text="Olá Maria! Claro, me conta qual o tamanho do seu time de suporte?" time="14:22" />
        <MsgIn text="Somos 50 atendentes, 3 setores." time="14:23" />

        {/* internal note */}
        <div style={{ alignSelf: 'center', maxWidth: '85%', background: '#fef9c3', border: '1px solid #fde68a', padding: '8px 14px', borderRadius: 10, fontSize: 12, color: '#854d0e' }}>
          📝 <strong>Nota interna:</strong> Cliente tem interesse no plano Enterprise. Guilherme da equipe comercial.
        </div>

        <MsgOut text="Para essa operação recomendo o plano Enterprise com White-label incluso. Posso te passar pro nosso consultor?" time="14:24" />

        <div className="wa-typing" style={{ alignSelf: 'flex-start', padding: '10px 14px', background: 'var(--surface)', borderRadius: 14, border: '1px solid var(--border)' }}>
          <span style={{ background: 'var(--text-muted)' }}/>
          <span style={{ background: 'var(--text-muted)' }}/>
          <span style={{ background: 'var(--text-muted)' }}/>
        </div>
      </div>

      {/* footer */}
      <div style={{ padding: '12px 18px', borderTop: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 10, background: 'var(--surface)' }}>
        <div style={{ flex: 1, padding: '9px 14px', borderRadius: 999, background: 'var(--surface-2)', border: '1px solid var(--border)', fontSize: 13.5, color: 'var(--text-muted)' }}>
          Digite uma resposta ou / para usar atalho...
        </div>
        <button style={{ width: 36, height: 36, borderRadius: '50%', background: 'var(--accent)', color: 'white', border: 'none', display: 'grid', placeItems: 'center' }}>
          <Icon name="arrow" size={16} color="white"/>
        </button>
      </div>
    </div>
  );
}

const MsgIn = ({ text, time }) => (
  <div style={{ alignSelf: 'flex-start', maxWidth: '78%', background: 'var(--surface)', border: '1px solid var(--border)', padding: '10px 14px', borderRadius: '14px 14px 14px 2px', fontSize: 14, color: 'var(--text)', lineHeight: 1.5 }}>
    {text} <span style={{ fontSize: 10.5, color: 'var(--text-muted)', marginLeft: 8 }}>{time}</span>
  </div>
);

const MsgOut = ({ text, time }) => (
  <div style={{ alignSelf: 'flex-end', maxWidth: '78%', background: 'var(--brand-500)', color: 'white', padding: '10px 14px', borderRadius: '14px 14px 2px 14px', fontSize: 14, lineHeight: 1.5 }}>
    {text} <span style={{ fontSize: 10.5, color: 'rgba(255,255,255,0.75)', marginLeft: 8 }}>{time} ✓✓</span>
  </div>
);

// ============================================
// MULTI-TENANT / WHITE-LABEL
// ============================================
function WhiteLabel() {
  return (
    <>
      {/* Intro — o que é WL */}
      <section className="section" id="whitelabel" style={{ background: 'var(--bg-alt)' }}>
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Multi-tenant · White-label</span>
            <h2 className="display-2">Uma base. Muitas operações.<br/>Marca própria em cada uma.</h2>
            <p className="lead mt-2">
              O White-label do TSA Connect Pro foi pensado para dois cenários distintos —
              <strong> corporações com várias unidades</strong> e <strong>parceiros que querem revender a plataforma</strong>.
              Em ambos os casos, a revenda WL opera sob sua própria marca, com isolamento total de dados.
            </p>
          </div>
          <TenantDiagram />
        </div>
      </section>

      {/* Os dois modelos */}
      <section className="section" style={{ background: 'var(--bg)' }}>
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Dois modelos, mesma plataforma</span>
            <h2 className="display-2">Para quem o White-label faz sentido.</h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 20 }}>
            {/* Modelo 1 — Multi-unidades */}
            <div className="card reveal" style={{ padding: 32, background: 'var(--surface)', borderTop: '3px solid #3b5bdb' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
                <div style={{ width: 44, height: 44, borderRadius: 10, background: '#eef2ff', color: '#3b5bdb', display: 'grid', placeItems: 'center' }}>
                  <Icon name="building" size={20}/>
                </div>
                <div>
                  <div style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: '#3b5bdb', letterSpacing: '0.08em', textTransform: 'uppercase' }}>Modelo 1</div>
                  <div style={{ fontWeight: 600, fontSize: 19, letterSpacing: '-0.01em' }}>Corporação multi-unidades</div>
                </div>
              </div>
              <p className="text-muted" style={{ fontSize: 14.5, lineHeight: 1.65, marginBottom: 18 }}>
                Grupo econômico ou franqueadora que opera várias empresas dentro do mesmo ecossistema —
                matriz, filiais e unidades de negócio com identidade unificada e dados isolados.
              </p>
              <div style={{ display: 'grid', gap: 10 }}>
                {[
                  'Visão consolidada da matriz + operação independente por unidade',
                  'Identidade visual única aplicada em todas as unidades',
                  'Relatórios agregados ou segmentados por filial',
                ].map((t, i) => (
                  <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 13.5 }}>
                    <div style={{ width: 18, height: 18, borderRadius: 5, background: '#eef2ff', color: '#3b5bdb', display: 'grid', placeItems: 'center', flexShrink: 0, marginTop: 1 }}>
                      <Icon name="check" size={11}/>
                    </div>
                    <span>{t}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Modelo 2 — Revenda */}
            <div className="card reveal" data-delay="2" style={{ padding: 32, background: 'var(--surface)', borderTop: '3px solid #10b981' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
                <div style={{ width: 44, height: 44, borderRadius: 10, background: '#ecfdf5', color: '#10b981', display: 'grid', placeItems: 'center' }}>
                  <Icon name="layers" size={20}/>
                </div>
                <div>
                  <div style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: '#10b981', letterSpacing: '0.08em', textTransform: 'uppercase' }}>Modelo 2</div>
                  <div style={{ fontWeight: 600, fontSize: 19, letterSpacing: '-0.01em' }}>Revenda White-label</div>
                </div>
              </div>
              <p className="text-muted" style={{ fontSize: 14.5, lineHeight: 1.65, marginBottom: 18 }}>
                Agência, integrador ou empresa de tecnologia que comercializa a plataforma como se fosse
                seu próprio produto — marca, domínio, precificação e contrato próprios.
              </p>
              <div style={{ display: 'grid', gap: 10 }}>
                {[
                  'Operação sob sua marca, com URL e identidade visual próprias',
                  'Você define o preço e o modelo comercial dos seus clientes',
                  'Pode ter parceiros comissionados atuando sob a sua revenda',
                ].map((t, i) => (
                  <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 13.5 }}>
                    <div style={{ width: 18, height: 18, borderRadius: 5, background: '#ecfdf5', color: '#10b981', display: 'grid', placeItems: 'center', flexShrink: 0, marginTop: 1 }}>
                      <Icon name="check" size={11}/>
                    </div>
                    <span>{t}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Hierarquia — TSA > Revendas > Parceiros + TSA > Parceiros */}
      <section className="section" style={{ background: 'var(--bg-alt)' }}>
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Hierarquia comercial</span>
            <h2 className="display-2">Revendas, parceiros e comissionamento.</h2>
            <p className="lead mt-2">
              A TSA Inteligência opera diretamente com clientes finais, com revendas White-label
              e com parceiros comissionados. Revendas WL também podem ter seus próprios parceiros comissionados.
            </p>
          </div>

          <HierarchyDiagram/>

          <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
            {[
              { t: 'Revendas White-label', d: 'Parceiros que operam com sua própria marca, atendem clientes diretamente e gerem o contrato comercial.', color: '#10b981', bg: '#ecfdf5', i: 'layers' },
              { t: 'Parceiros da TSA', d: 'Indicadores comissionados que recomendam a TSA Connect Pro para clientes finais. Comissão recorrente ou por venda.', color: '#3b5bdb', bg: '#eef2ff', i: 'users' },
              { t: 'Parceiros de Revendas', d: 'Cada revenda White-label pode credenciar seus próprios parceiros comissionados, ampliando o alcance.', color: '#8b5cf6', bg: '#f3e8ff', i: 'grid' },
            ].map((c, i) => (
              <div key={i} className="card reveal" data-delay={(i % 3) + 1} style={{ padding: 24, background: 'var(--surface)' }}>
                <div style={{ width: 38, height: 38, borderRadius: 10, background: c.bg, color: c.color, display: 'grid', placeItems: 'center', marginBottom: 12 }}>
                  <Icon name={c.i} size={18}/>
                </div>
                <div style={{ fontWeight: 600, fontSize: 15.5, letterSpacing: '-0.01em' }}>{c.t}</div>
                <div className="text-muted mt-2" style={{ fontSize: 13.5, lineHeight: 1.55 }}>{c.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* O que cada nível pode personalizar */}
      <section className="section" style={{ background: 'var(--bg)' }}>
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Escopo de personalização</span>
            <h2 className="display-2">O que cada nível pode personalizar.</h2>
            <p className="lead mt-2">
              A personalização de domínio próprio é exclusiva da revenda White-label.
              Empresas e clientes atendidos pela revenda WL operam sob o domínio da revenda, sem subdomínios personalizados adicionais.
            </p>
          </div>

          <div className="card reveal" style={{ padding: 0, background: 'var(--surface)', overflow: 'hidden', maxWidth: 880, margin: '0 auto' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
              <thead>
                <tr style={{ background: 'var(--surface-2)', borderBottom: '1px solid var(--border)' }}>
                  <th style={{ padding: '16px 20px', textAlign: 'left', fontSize: 12, fontFamily: 'var(--font-mono)', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-muted)', fontWeight: 500 }}>Nível</th>
                  <th style={{ padding: '16px 20px', textAlign: 'center', fontSize: 12, fontFamily: 'var(--font-mono)', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-muted)', fontWeight: 500 }}>Marca e logo</th>
                  <th style={{ padding: '16px 20px', textAlign: 'center', fontSize: 12, fontFamily: 'var(--font-mono)', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-muted)', fontWeight: 500 }}>Domínio próprio</th>
                  <th style={{ padding: '16px 20px', textAlign: 'center', fontSize: 12, fontFamily: 'var(--font-mono)', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-muted)', fontWeight: 500 }}>Precificação</th>
                </tr>
              </thead>
              <tbody>
                {[
                  { l: 'Revenda White-label', m: true, d: true, p: true, desc: 'Opera sob marca e URL próprias, define preços e contrato.' },
                  { l: 'Empresa com WL (multi-unidades)', m: true, d: false, p: false, desc: 'Unidades operam com marca unificada, sob o domínio da empresa contratante.' },
                  { l: 'Cliente final da revenda WL', m: false, d: false, p: false, desc: 'Acessa sob o domínio da revenda. Sem subdomínios individuais.' },
                ].map((r, i) => (
                  <tr key={i} style={{ borderBottom: i < 2 ? '1px solid var(--border)' : 'none' }}>
                    <td style={{ padding: '18px 20px' }}>
                      <div style={{ fontWeight: 500, fontSize: 14.5 }}>{r.l}</div>
                      <div className="text-muted" style={{ fontSize: 12.5, marginTop: 3 }}>{r.desc}</div>
                    </td>
                    <td style={{ padding: '18px 20px', textAlign: 'center' }}><CheckCell on={r.m}/></td>
                    <td style={{ padding: '18px 20px', textAlign: 'center' }}><CheckCell on={r.d}/></td>
                    <td style={{ padding: '18px 20px', textAlign: 'center' }}><CheckCell on={r.p}/></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>
    </>
  );
}

function CheckCell({ on }) {
  if (on) return (
    <div style={{ display: 'inline-flex', width: 26, height: 26, borderRadius: 7, background: '#ecfdf5', color: '#10b981', alignItems: 'center', justifyContent: 'center' }}>
      <Icon name="check" size={14}/>
    </div>
  );
  return (
    <div style={{ display: 'inline-flex', width: 26, height: 26, borderRadius: 7, background: 'var(--surface-2)', color: 'var(--text-muted)', alignItems: 'center', justifyContent: 'center', border: '1px solid var(--border)', fontSize: 15, lineHeight: 1 }}>—</div>
  );
}

function HierarchyDiagram() {
  const nodeStyle = {
    padding: '14px 20px', borderRadius: 12, background: 'var(--surface)', border: '1px solid var(--border)',
    fontSize: 13.5, fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 10,
  };
  const subStyle = { ...nodeStyle, padding: '10px 16px', fontSize: 12.5, fontWeight: 400, color: 'var(--text-muted)' };

  return (
    <div className="card reveal" style={{ padding: '40px 24px', background: 'var(--surface)', overflowX: 'auto' }}>
      <div style={{ minWidth: 720, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0 }}>
        {/* Topo — TSA */}
        <div style={{ ...nodeStyle, background: 'linear-gradient(135deg, var(--brand-700), var(--brand-900))', color: 'white', borderColor: 'transparent', padding: '16px 28px', fontSize: 15 }}>
          <div style={{ width: 28, height: 28, borderRadius: 7, background: 'rgba(255,255,255,0.15)', display: 'grid', placeItems: 'center' }}>
            <Icon name="building" size={14}/>
          </div>
          TSA Inteligência
        </div>

        {/* conectores */}
        <div style={{ width: 1, height: 24, background: 'var(--border)' }}/>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', width: '100%', borderTop: '1px solid var(--border)', position: 'relative', height: 0 }}>
          <div style={{ position: 'absolute', left: '16.6%', top: 0, width: 1, height: 24, background: 'var(--border)' }}/>
          <div style={{ position: 'absolute', left: '50%', top: 0, width: 1, height: 24, background: 'var(--border)' }}/>
          <div style={{ position: 'absolute', left: '83.3%', top: 0, width: 1, height: 24, background: 'var(--border)' }}/>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', width: '100%', gap: 24, marginTop: 24 }}>
          {/* Coluna 1 — Clientes diretos */}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
            <div style={{ ...nodeStyle, background: 'var(--surface-2)' }}>
              <div style={{ width: 22, height: 22, borderRadius: 5, background: '#eef2ff', color: '#3b5bdb', display: 'grid', placeItems: 'center' }}>
                <Icon name="users" size={12}/>
              </div>
              Clientes diretos
            </div>
            <div style={{ fontSize: 11, color: 'var(--text-muted)', textAlign: 'center', maxWidth: 180 }}>Atendidos pela TSA sob a marca TSA Connect Pro.</div>
          </div>

          {/* Coluna 2 — Parceiros TSA */}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
            <div style={{ ...nodeStyle, background: '#eef2ff', color: '#3b5bdb', borderColor: '#dbe4ff' }}>
              <div style={{ width: 22, height: 22, borderRadius: 5, background: 'white', color: '#3b5bdb', display: 'grid', placeItems: 'center' }}>
                <Icon name="bolt" size={12}/>
              </div>
              Parceiros TSA
            </div>
            <div style={{ fontSize: 11, color: 'var(--text-muted)', textAlign: 'center', maxWidth: 180 }}>Indicadores comissionados trazendo clientes para a TSA.</div>
            <div style={{ width: 1, height: 16, background: 'var(--border)' }}/>
            <div style={subStyle}>→ Clientes TSA</div>
          </div>

          {/* Coluna 3 — Revendas WL */}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
            <div style={{ ...nodeStyle, background: '#ecfdf5', color: '#10b981', borderColor: '#a7f3d0' }}>
              <div style={{ width: 22, height: 22, borderRadius: 5, background: 'white', color: '#10b981', display: 'grid', placeItems: 'center' }}>
                <Icon name="layers" size={12}/>
              </div>
              Revendas White-label
            </div>
            <div style={{ fontSize: 11, color: 'var(--text-muted)', textAlign: 'center', maxWidth: 200 }}>Operam sob marca e domínio próprios.</div>
            <div style={{ width: 1, height: 16, background: 'var(--border)' }}/>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, width: '100%', justifyItems: 'center' }}>
              <div style={subStyle}>Clientes da revenda</div>
              <div style={{ ...subStyle, background: '#f3e8ff', color: '#8b5cf6', borderColor: '#e9d5ff' }}>Parceiros da revenda</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function TenantDiagram() {
  const tenants = [
    { name: 'Revenda Alpha', tag: 'Revenda White-label', url: 'atende.revendalpha.com.br', color: '#10b981', users: 248, companies: 18 },
    { name: 'Grupo Nordeste', tag: 'Corporação multi-unidades', url: 'central.gruponordeste.com', color: '#3b5bdb', users: 124, companies: 12 },
    { name: 'TSA Connect Pro', tag: 'Operação direta TSA', url: 'app.tsaconnectpro.com', color: '#8b5cf6', users: 420, companies: 54 },
  ];

  return (
    <div className="card reveal" style={{ padding: 48, background: 'var(--surface)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginBottom: 32 }}>
        {tenants.map((t, i) => (
          <div key={i} style={{
            padding: 24,
            borderRadius: 14,
            border: `1px solid var(--border)`,
            background: 'var(--surface)',
            position: 'relative',
            overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: t.color }} />
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
              <div style={{ width: 30, height: 30, borderRadius: 7, background: `${t.color}22`, color: t.color, display: 'grid', placeItems: 'center' }}>
                <Icon name="building" size={16}/>
              </div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 15 }}>{t.name}</div>
                <div style={{ fontSize: 10.5, fontFamily: 'var(--font-mono)', letterSpacing: '0.05em', textTransform: 'uppercase', color: t.color, marginTop: 2 }}>{t.tag}</div>
              </div>
            </div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-muted)', background: 'var(--surface-2)', padding: '6px 10px', borderRadius: 6, border: '1px solid var(--border)', marginBottom: 14 }}>
              {t.url}
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
              <div>
                <div className="text-muted" style={{ fontSize: 11 }}>Usuários</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600 }}>{t.users}</div>
              </div>
              <div>
                <div className="text-muted" style={{ fontSize: 11 }}>Empresas</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600 }}>{t.companies}</div>
              </div>
              <div>
                <div className="text-muted" style={{ fontSize: 11 }}>Status</div>
                <div style={{ fontSize: 12, color: '#059669', marginTop: 4, display: 'flex', alignItems: 'center', gap: 4 }}>
                  <span className="dot"/> Ativo
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* base layer */}
      <div style={{ position: 'relative', padding: '40px 24px 24px' }}>
        <div style={{ position: 'absolute', top: -20, left: '50%', transform: 'translateX(-50%)', width: 1, height: 40, background: 'var(--border)' }}/>
        <svg width="100%" height="20" viewBox="0 0 100 20" preserveAspectRatio="none" style={{ position: 'absolute', top: -6, left: 0, overflow: 'visible' }}>
          <path d="M 15 0 Q 15 12, 50 12 T 85 0" stroke="var(--border)" fill="none" strokeWidth="0.3"/>
        </svg>
        <div style={{
          padding: '24px 32px',
          borderRadius: 14,
          background: 'linear-gradient(135deg, var(--brand-700), var(--brand-900))',
          color: 'white',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 24,
          flexWrap: 'wrap',
        }}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.65)' }}>Core TSA Connect Pro</div>
            <div className="display-3" style={{ color: 'white', marginTop: 4 }}>Uma plataforma, dados isolados, marca de cada um.</div>
          </div>
          <div style={{ display: 'flex', gap: 32, fontSize: 13 }}>
            <div>
              <div style={{ color: 'rgba(255,255,255,0.6)' }}>Tenants ativos</div>
              <div className="display-3" style={{ color: 'white', margin: 0 }}>42</div>
            </div>
            <div>
              <div style={{ color: 'rgba(255,255,255,0.6)' }}>Atendentes</div>
              <div className="display-3" style={{ color: 'white', margin: 0 }}>1.284</div>
            </div>
            <div>
              <div style={{ color: 'rgba(255,255,255,0.6)' }}>Msgs/dia</div>
              <div className="display-3" style={{ color: 'white', margin: 0 }}>820k</div>
            </div>
          </div>
        </div>
      </div>

      <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {[
          { i: 'lock', t: 'Isolamento total', d: 'Dados, usuários e configs completamente separados.' },
          { i: 'palette', t: 'Identidade visual', d: 'Logo, cores e nome da plataforma personalizados.' },
          { i: 'money', t: 'Modelo comercial', d: 'Revenda WL define seus próprios planos e preços.' },
          { i: 'settings', t: 'Admin central TSA', d: 'Visão consolidada de todas as revendas e unidades.' },
        ].map((f, i) => (
          <div key={i} style={{ padding: 18, borderRadius: 10, background: 'var(--surface-2)', border: '1px solid var(--border)' }}>
            <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--brand-50)', color: 'var(--brand-700)', display: 'grid', placeItems: 'center', marginBottom: 10 }}>
              <Icon name={f.i} size={16}/>
            </div>
            <div style={{ fontWeight: 500, fontSize: 14 }}>{f.t}</div>
            <div className="text-muted mt-1" style={{ fontSize: 12.5 }}>{f.d}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.WhatsAppSection = WhatsAppSection;
window.WhiteLabel = WhiteLabel;