/* global React, Page, PageHero, Icon, mountPage */
const { useState: usePs } = React;

// ============================================
// SOBRE
// ============================================
function SobrePage() {
  return (
    <Page navDark={true}>
      <PageHero
        eyebrow="Sobre a TSA"
        title="Construímos a plataforma que nossos clientes precisavam."
        subtitle="Somos uma empresa brasileira focada em centralizar operação, atendimento e gestão em um único ambiente — modular, multi-tenant e pronto para escalar."
      />

      <section className="section">
        <div className="container" style={{ maxWidth: 900 }}>
          <div className="prose">
            <h2>Nossa história</h2>
            <p>
              A TSA nasceu da percepção de que empresas brasileiras estavam presas a uma colcha de
              retalhos de ferramentas que não conversam entre si. Cada setor com um sistema diferente,
              dados duplicados, equipes ilhadas, e custos crescentes a cada novo módulo contratado.
            </p>
            <p>
              Construímos o <strong>TSA Connect Pro</strong> sob uma premissa simples: um ambiente único,
              modular, onde a empresa ativa apenas os recursos que precisa e expande conforme cresce.
              Hoje atendemos operações de todos os portes, de times enxutos a redes com dezenas de unidades.
            </p>

            <h2>Números</h2>
            <div className="stats-grid" style={{ marginTop: 24 }}>
              <div className="stat-tile">
                <div className="stat-num">+200</div>
                <div className="stat-label">Empresas ativas na plataforma</div>
              </div>
              <div className="stat-tile">
                <div className="stat-num">+50M</div>
                <div className="stat-label">Mensagens processadas por mês</div>
              </div>
              <div className="stat-tile">
                <div className="stat-num">99,9%</div>
                <div className="stat-label">Uptime médio nos últimos 12 meses</div>
              </div>
              <div className="stat-tile">
                <div className="stat-num">24/7</div>
                <div className="stat-label">Monitoramento e suporte</div>
              </div>
            </div>

            <h2>Compromisso com dados</h2>
            <p>
              Operamos sob a Lei Geral de Proteção de Dados (LGPD — Lei nº 13.709/2018) desde o dia um.
              Criptografia em trânsito e em repouso, logs auditáveis, controle granular de permissões
              por tenant, e um processo claro de atendimento ao titular de dados.
            </p>

            <h2>Parceria oficial Meta</h2>
            <p>
              Somos integrados à Cloud API oficial da Meta para WhatsApp Business Platform.
              Isso significa processamento de mensagens direto na infraestrutura oficial,
              sem gambiarras, sem risco de bloqueio e com templates aprovados conforme a política da Meta.
            </p>

            <h2>Empresa</h2>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--text-muted)', lineHeight: 1.8 }}>
              <div><strong style={{ color: 'var(--text)' }}>Razão Social:</strong> TSA Inteligência</div>
              <div><strong style={{ color: 'var(--text)' }}>Produto:</strong> TSA Connect Pro</div>
              <div><strong style={{ color: 'var(--text)' }}>CNPJ:</strong> 19.444.206/0001-39</div>
              <div><strong style={{ color: 'var(--text)' }}>Telefone:</strong> (19) 9 8182-7556</div>
              <div><strong style={{ color: 'var(--text)' }}>E-mail:</strong> contato@tsaconnectpro.com.br</div>
            </div>
          </div>
        </div>
      </section>
    </Page>
  );
}

// ============================================
// CONTATO
// ============================================
function ContatoPage() {
  const [sent, setSent] = usePs(false);
  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
  };
  return (
    <Page navDark={true}>
      <PageHero
        eyebrow="Fale com a gente"
        title="Solicite uma demonstração."
        subtitle="Nosso time comercial entra em contato em até 1 dia útil para entender sua operação e montar a melhor configuração."
      />

      <section className="section">
        <div className="container contact-grid">
          <div className="contact-form-card">
            {sent ? (
              <div style={{ textAlign:'center', padding:'40px 20px' }}>
                <div style={{ width:64, height:64, borderRadius:'50%', background:'var(--accent-soft)', color:'var(--accent)', display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto 20px' }}>
                  <Icon name="check" size={32}/>
                </div>
                <h3 style={{ margin:'0 0 10px' }}>Mensagem recebida.</h3>
                <p style={{ color:'var(--text-muted)', margin:0 }}>Nosso time entra em contato em breve.</p>
              </div>
            ) : (
              <form onSubmit={onSubmit}>
                <h3 style={{ margin:'0 0 6px' }}>Solicitar demonstração</h3>
                <p style={{ color:'var(--text-muted)', margin:'0 0 24px', fontSize:14 }}>Preencha e agendamos uma conversa.</p>
                <div className="form-grid">
                  <div className="form-field">
                    <label>Nome</label>
                    <input type="text" required placeholder="Seu nome"/>
                  </div>
                  <div className="form-field">
                    <label>Empresa</label>
                    <input type="text" required placeholder="Razão social"/>
                  </div>
                  <div className="form-field">
                    <label>E-mail corporativo</label>
                    <input type="email" required placeholder="voce@empresa.com.br"/>
                  </div>
                  <div className="form-field">
                    <label>WhatsApp</label>
                    <input type="tel" required placeholder="(00) 00000-0000"/>
                  </div>
                  <div className="form-field form-full">
                    <label>Número de atendentes</label>
                    <select required defaultValue="">
                      <option value="" disabled>Selecione</option>
                      <option>1 a 5</option>
                      <option>6 a 20</option>
                      <option>21 a 50</option>
                      <option>51 a 200</option>
                      <option>+200</option>
                    </select>
                  </div>
                  <div className="form-field form-full">
                    <label>Como podemos ajudar?</label>
                    <textarea rows="4" placeholder="Conte brevemente sobre sua operação."></textarea>
                  </div>
                </div>
                <button type="submit" className="btn btn-primary btn-lg" style={{ width:'100%', marginTop:20 }}>
                  Enviar solicitação
                </button>
                <p style={{ fontSize:11, color:'var(--text-muted)', marginTop:14, textAlign:'center' }}>
                  Ao enviar você concorda com nossa <a href="privacidade.html" style={{color:'var(--accent)'}}>Política de Privacidade</a>.
                </p>
              </form>
            )}
          </div>

          <div className="contact-side">
            <div className="contact-side-card">
              <h4>Comercial</h4>
              <a href="https://wa.me/5519981827556" className="contact-link">
                <Icon name="whatsapp" size={18}/> (19) 9 8182-7556
              </a>
              <a href="mailto:comercial@tsaconnectpro.com.br" className="contact-link">
                <Icon name="mail" size={18}/> comercial@tsaconnectpro.com.br
              </a>
            </div>
            <div className="contact-side-card">
              <h4>Suporte</h4>
              <a href="mailto:suporte@tsaconnectpro.com.br" className="contact-link">
                <Icon name="mail" size={18}/> suporte@tsaconnectpro.com.br
              </a>
              <div className="contact-meta">Atendimento 24/7 para clientes ativos</div>
            </div>
            <div className="contact-side-card">
              <h4>Encarregado de Dados (DPO)</h4>
              <a href="mailto:dpo@tsaconnectpro.com.br" className="contact-link">
                <Icon name="mail" size={18}/> dpo@tsaconnectpro.com.br
              </a>
              <div className="contact-meta">Para solicitações LGPD</div>
            </div>
            <div className="contact-side-card contact-side-muted">
              <div style={{ fontSize:12, color:'var(--text-muted)', fontFamily:'var(--font-mono)', lineHeight:1.8 }}>
                TSA Inteligência<br/>
                CNPJ 19.444.206/0001-39
              </div>
            </div>
          </div>
        </div>
      </section>
    </Page>
  );
}

window.SobrePage = SobrePage;
window.ContatoPage = ContatoPage;