/* global React, Icon */
const { useState: useSy, useEffect: useEy } = React;

// ============================================
// STATS / BENEFITS
// ============================================
function Benefits() {
  return (
    <section className="section" style={{ background: 'var(--bg)' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Benefícios para sua operação</span>
          <h2 className="display-2">Resultado que aparece no dashboard.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {[
            { n: '−38%', l: 'Tempo médio de primeira resposta', c: '#3b5bdb' },
            { n: '+2.4×', l: 'Produtividade por atendente', c: '#10b981' },
            { n: '7 dias', l: 'Onboarding até operação completa', c: '#8b5cf6' },
            { n: '99.95%', l: 'Uptime contratual', c: '#f59e0b' },
          ].map((s, i) => (
            <div key={i} className="reveal" data-delay={i+1} style={{ padding: 28, borderRadius: 14, border: '1px solid var(--border)', background: 'var(--surface)' }}>
              <div className="stat-num" style={{ color: s.c, background: 'none', WebkitBackgroundClip: 'initial' }}>{s.n}</div>
              <div className="text-muted mt-2" style={{ fontSize: 14.5 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================
// SECURITY (Meta Tech Partner focus)
// ============================================
function Security() {
  return (
    <section className="section" id="seguranca" style={{ background: 'var(--bg-alt)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'center' }}>
          <div className="reveal">
            <span className="eyebrow">Segurança & conformidade</span>
            <h2 className="display-2 mt-2">Enterprise-grade desde o primeiro dia.</h2>
            <p className="lead mt-3">
              Infraestrutura, processos e integrações preparados para as exigências de empresas que
              tratam dados sensíveis todos os dias.
            </p>
            <div className="mt-4" style={{ display: 'grid', gap: 14 }}>
              {[
                { t: 'LGPD nativa', d: 'Controles de consentimento, direitos do titular, logs de auditoria e retenção configurável.' },
                { t: 'WhatsApp Business Cloud API', d: 'Integração oficial via Meta, seguindo políticas de mensagens e templates aprovados.' },
                { t: 'Criptografia em trânsito e em repouso', d: 'TLS 1.3, AES-256 e rotação de chaves com HSM dedicado.' },
                { t: 'Controles de acesso granulares', d: 'Permissões por módulo, função, empresa e tenant. SSO e 2FA disponíveis.' },
              ].map((f, i) => (
                <div key={i} style={{ display: 'flex', gap: 14 }}>
                  <div style={{ width: 26, height: 26, borderRadius: 7, background: 'var(--brand-50)', color: 'var(--brand-700)', display: 'grid', placeItems: 'center', flexShrink: 0, marginTop: 2 }}>
                    <Icon name="shield" size={14}/>
                  </div>
                  <div>
                    <div style={{ fontWeight: 500 }}>{f.t}</div>
                    <div className="text-muted mt-1" style={{ fontSize: 14 }}>{f.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="reveal" data-delay="2" style={{
            padding: 40,
            borderRadius: 20,
            background: 'linear-gradient(135deg, var(--ink-950), var(--ink-900))',
            border: '1px solid var(--ink-800)',
            color: 'white',
            position: 'relative',
            overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', top: -80, right: -80, width: 300, height: 300,
              background: 'radial-gradient(closest-side, rgba(59,91,219,0.4), transparent 70%)',
              filter: 'blur(30px)'
            }}/>
            <div style={{ position: 'relative' }}>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
                {[
                  { l: 'LGPD', s: 'Lei 13.709' },
                  { l: 'ISO 27001', s: 'Em processo' },
                  { l: 'SOC 2', s: 'Type II' },
                  { l: 'Meta', s: 'Tech Partner*' },
                  { l: 'TLS 1.3', s: 'End-to-end' },
                  { l: '2FA', s: 'TOTP / SMS' },
                ].map((b, i) => (
                  <div key={i} style={{ padding: 18, borderRadius: 12, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)' }}>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600, letterSpacing: '-0.015em' }}>{b.l}</div>
                    <div style={{ fontSize: 11.5, color: 'rgba(255,255,255,0.55)', marginTop: 2 }}>{b.s}</div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 24, padding: 18, borderRadius: 12, background: 'rgba(59,91,219,0.1)', border: '1px solid rgba(59,91,219,0.25)' }}>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>Política de privacidade</div>
                <div style={{ fontSize: 14.5, marginTop: 6, color: 'rgba(255,255,255,0.9)' }}>
                  Transparência total sobre coleta, uso e armazenamento de dados. Documentação pública,
                  DPO designado e canal de titular de dados ativo.
                </div>
                <a href="privacidade.html" style={{ color: '#93adff', fontSize: 13, marginTop: 12, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  Ler política completa <Icon name="arrow" size={13}/>
                </a>
              </div>
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.4)', marginTop: 14 }}>
                *Processo de homologação como Meta Tech Partner em andamento via WhatsApp Business Platform.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================
// TESTIMONIALS
// ============================================
function Testimonials() {
  const items = [
    {
      q: 'Substituímos quatro ferramentas por uma só. Nossa operação ficou mais previsível e o time parou de perder contexto entre sistemas.',
      a: 'Gerente de Operações', c: '[CLIENTE A]', color: '#3b5bdb',
    },
    {
      q: 'O modelo white-label foi decisivo. Conseguimos lançar nossa marca de atendimento em 3 semanas com todos os módulos prontos.',
      a: 'CEO', c: '[REVENDA B]', color: '#8b5cf6',
    },
    {
      q: 'A distribuição inteligente e o BOT com IA reduziram 40% da carga no time de suporte. O SLA nunca esteve tão estável.',
      a: 'Diretor de CX', c: '[CLIENTE C]', color: '#10b981',
    },
  ];
  return (
    <section className="section" style={{ background: 'var(--bg)' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">O que dizem nossos clientes</span>
          <h2 className="display-2">Operações reais. Resultados mensuráveis.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {items.map((it, i) => (
            <div key={i} className="card reveal" data-delay={i+1} style={{ padding: 32, background: 'var(--surface)' }}>
              <svg width="28" height="24" viewBox="0 0 28 24" fill="none" style={{ opacity: 0.2 }}>
                <path d="M0 14h6v10H0V14Zm0-4V0h10v10H0Zm16 4h6v10h-6V14Zm0-4V0h10v10h-6Z" fill={it.color}/>
              </svg>
              <p className="mt-3" style={{ fontSize: 16.5, lineHeight: 1.55, letterSpacing: '-0.01em' }}>{it.q}</p>
              <div style={{ marginTop: 24, paddingTop: 20, borderTop: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 40, height: 40, borderRadius: '50%', background: `${it.color}22`, border: `1px solid ${it.color}55`, display: 'grid', placeItems: 'center', color: it.color, fontWeight: 600 }}>
                  {it.c.charAt(1)}
                </div>
                <div>
                  <div style={{ fontWeight: 500, fontSize: 14 }}>{it.a}</div>
                  <div className="text-muted" style={{ fontSize: 13 }}>{it.c}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="text-muted text-center mt-4" style={{ fontSize: 12.5 }}>
          * Depoimentos ilustrativos serão substituídos por cases reais após liberação pelos clientes.
        </div>
      </div>
    </section>
  );
}

// ============================================
// FAQ
// ============================================
function FAQ() {
  const [open, setOpen] = useSy(0);
  const items = [
    { q: 'O TSA Connect Pro usa a API oficial do WhatsApp?', a: 'Sim. Integramos via WhatsApp Business Cloud API da Meta, seguindo as políticas oficiais de mensagens, templates e janelas de atendimento. Não usamos conexões não-oficiais que podem resultar em banimento de números.' },
    { q: 'O que significa "multi-tenant" na prática?', a: 'Cada empresa que opera na plataforma tem seus dados, usuários, configurações e identidade visual completamente isolados. Um admin master pode gerenciar vários tenants de um único painel, mas dados de um tenant nunca se cruzam com os de outro.' },
    { q: 'Como funciona o modelo white-label?', a: 'Você opera com sua própria marca: domínio personalizado, logo, paleta de cores, nome do produto e comunicação. Seus clientes nunca veem a marca TSA Connect Pro. Ideal para revendas, agências e SaaS regionais.' },
    { q: 'Posso contratar apenas alguns módulos?', a: 'Sim. A plataforma é modular por design. Você ativa os módulos que fazem sentido para sua operação e expande quando precisar. Não há cobrança por módulos não utilizados.' },
    { q: 'Qual o prazo de implantação?', a: 'Operações padrão entram no ar em até 7 dias úteis após o kickoff, incluindo migração de contatos, configuração de setores e treinamento do time. Projetos com integrações customizadas podem ter prazo estendido.' },
    { q: 'A plataforma está em conformidade com a LGPD?', a: 'Sim. Temos DPO designado, canal de titular de dados, logs de auditoria, políticas de retenção configuráveis, direitos de acesso/portabilidade/exclusão automatizados e documentação pública sobre tratamento de dados.' },
    { q: 'Tem API para integração com meus sistemas?', a: 'Sim. Disponibilizamos API REST documentada, webhooks para eventos em tempo real e conectores nativos para os principais ERPs, CRMs e plataformas de e-commerce do mercado brasileiro.' },
    { q: 'Qual o SLA contratual?', a: '99,95% de uptime em plano Enterprise com suporte 24/7. Planos Standard têm uptime de 99,5% com suporte em horário comercial estendido.' },
  ];
  return (
    <section className="section" id="faq" style={{ background: 'var(--bg-alt)' }}>
      <div className="container" style={{ maxWidth: 860 }}>
        <div className="section-head">
          <span className="eyebrow">Perguntas frequentes</span>
          <h2 className="display-2">Tiramos as dúvidas antes da demo.</h2>
        </div>
        <div>
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-caret"><Icon name="plus" size={14}/></span>
              </div>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================
// CTA
// ============================================
function FinalCTA() {
  return (
    <section className="section" id="demo" style={{ background: 'var(--bg)' }}>
      <div className="container">
        <div className="reveal" style={{
          padding: '64px 48px',
          borderRadius: 24,
          background: 'linear-gradient(135deg, var(--brand-700), var(--brand-900))',
          color: 'white',
          textAlign: 'center',
          position: 'relative',
          overflow: 'hidden',
          border: '1px solid rgba(147,173,255,0.2)',
        }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 40% at 50% 0%, rgba(147,173,255,0.3), transparent)', pointerEvents: 'none' }}/>
          <div style={{ position: 'relative' }}>
            <div className="pill pill-dark" style={{ marginBottom: 20 }}>
              <span className="dot"/> Agenda aberta esta semana
            </div>
            <h2 className="display-2" style={{ color: 'white', margin: 0 }}>
              Pronto para centralizar<br/>sua operação?
            </h2>
            <p className="lead mt-3" style={{ color: 'rgba(255,255,255,0.75)', maxWidth: 560, margin: '16px auto 0' }}>
              Agende uma demonstração guiada de 30 minutos. Nosso time mapeia sua operação e
              monta uma proposta personalizada.
            </p>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 36, flexWrap: 'wrap' }}>
              <a href="#" className="btn btn-primary btn-lg" style={{ background: 'white', color: 'var(--brand-700)', boxShadow: '0 8px 24px rgba(0,0,0,0.2)' }}>
                Solicitar demonstração <Icon name="arrow" size={16}/>
              </a>
              <a href="https://wa.me/5519981827556" className="btn btn-dark btn-lg">
                <Icon name="whatsapp" size={16}/> Falar no WhatsApp
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Benefits = Benefits;
window.Security = Security;
window.Testimonials = Testimonials;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;