/* global React, Icon, Logo */
function Pricing(){
  const plans=[
    {name:"Essencial",desc:"Para a incorporadora que está organizando o comercial.",
      cur:"R$",amt:"199",per:"/ mês por empresa",btn:["Começar agora","btn-dark"],feat:false,
      items:[["Até 5 usuários",1],["1 incorporadora",1],["Funil e captação de leads",1],["Trava de lead por corretor",1],["Dashboard essencial",1],["SLA e alertas",0],["Auditoria e logs completos",0]]},
    {name:"Profissional",desc:"Para operações com equipe, metas e SLA de atendimento.",
      cur:"R$",amt:"599",per:"/ mês por empresa",btn:["Agendar demonstração","btn-light"],feat:true,tag:"Mais popular",
      items:[["Até 30 usuários",1],["1 incorporadora + parceiros",1],["Distribuição inteligente",1],["SLA monitorado + alertas",1],["Dashboard executivo + rankings",1],["Controle de comissão",1],["Auditoria e logs completos",1]]},
    {name:"Enterprise",desc:"Para grupos com várias empresas e governança própria.",
      consult:"Consulte",per:"plano sob medida",btn:["Falar com vendas","btn-dark"],feat:false,
      items:[["Usuários ilimitados",1],["Múltiplas incorporadoras",1],["Permissões e perfis avançados",1],["SLA e regras personalizadas",1],["Integrações e API",1],["Onboarding dedicado",1],["Suporte prioritário + SLA",1]]},
  ];
  return (
    <section className="section" id="planos">
      <div className="wrap">
        <div className="sec-head center reveal">
          <span className="eyebrow center">Planos e preços</span>
          <h2 className="title" style={{marginTop:14}}>Assinatura simples, por empresa.</h2>
          <p className="lead" style={{marginTop:16,marginInline:'auto'}}>Preço fixo mensal, sem cobrança por lead. Escolha o plano e comece a não perder mais nenhuma oportunidade.</p>
        </div>
        <div className="price-grid">
          {plans.map((p,i)=>(
            <div className={"plan"+(p.feat?" feat-plan":"")+" reveal d"+(i+1)} key={i}>
              {p.tag&&<div className="plan-tag">{p.tag}</div>}
              <div className="pname">{p.name}</div>
              <div className="pdesc">{p.desc}</div>
              <div className="price">
                {p.consult
                  ? <span className="consult">{p.consult}</span>
                  : <><span className="cur">{p.cur}</span><span className="amt">{p.amt}</span></>}
              </div>
              <div className="per" style={{fontSize:13.5,color:p.feat?'#aebfd8':'var(--muted)'}}>{p.per}</div>
              <a className={"btn btn-lg pbtn "+p.btn[1]} href="#cta" style={{width:'100%'}}>{p.btn[0]}</a>
              <ul>
                {p.items.map((it,j)=>(
                  <li className={it[1]?"":"muted"} key={j}>
                    <span className="ck"><Icon name={it[1]?"check":"check"} size={13}/></span>{it[0]}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <p className="price-note reveal">Todos os planos incluem dados isolados por operação, backups e atualizações contínuas. Valores em reais (BRL).</p>
      </div>
    </section>
  );
}

function FAQ(){
  const qs=[
    ["Como o Tovix evita que dois corretores atendam o mesmo lead?","Quando um corretor assume um lead, ele é travado exclusivamente para aquele profissional. Ninguém mais consegue assumir ou atender, e o sistema grava data, hora e responsável — eliminando disputa interna e atendimento duplicado."],
    ["O que é o SLA de atendimento?","É o prazo máximo para o primeiro contato com o lead. Você define o tempo (por exemplo, 24h) e o Tovix monitora cada lead em tempo real, sinalizando os que estão perto do limite e alertando sobre os atrasados."],
    ["Consigo gerenciar mais de uma incorporadora?","Sim. Nos planos Profissional e Enterprise você opera várias empresas e parceiros de venda na mesma plataforma, com dados isolados por operação e visão consolidada para diretoria."],
    ["Os dados ficam seguros e auditáveis?","Todas as ações críticas geram log e cada lead mantém histórico completo. O acesso é controlado por 6 perfis com permissões granulares, garantindo rastreabilidade e governança de ponta a ponta."],
    ["O preço é por usuário ou por empresa?","A assinatura é mensal e fixa por empresa, conforme o plano — sem cobrança por lead. O Enterprise é dimensionado sob medida para grupos com várias operações."],
    ["Como começo a usar?","Agende uma demonstração pelo botão no topo ou escreva para contato@tovix.com.br. Configuramos sua operação, perfis e empreendimentos e acompanhamos o onboarding da equipe."],
  ];
  const [open,setOpen]=React.useState(0);
  return (
    <section className="section" id="faq" style={{background:'var(--bg-soft)'}}>
      <div className="wrap">
        <div className="sec-head center reveal">
          <span className="eyebrow center">Perguntas frequentes</span>
          <h2 className="title" style={{marginTop:14}}>Ainda com dúvidas?</h2>
        </div>
        <div className="faq-wrap">
          {qs.map((q,i)=>(
            <div className={"faq"+(open===i?" open":"")} key={i}>
              <button onClick={()=>setOpen(open===i?-1:i)} aria-expanded={open===i}>
                <span className="q">{q[0]}</span><span className="pm"/>
              </button>
              <div className="ans" style={{maxHeight:open===i?'240px':'0'}}><p>{q[1]}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA(){
  return (
    <section className="section" id="cta">
      <div className="wrap">
        <div className="cta reveal">
          <div className="cta-in">
            <h2>Comece a controlar cada lead hoje.</h2>
            <p>Agende uma demonstração e veja o fluxo completo — captação, trava, SLA e auditoria — rodando na sua operação.</p>
            <div className="cta-btns">
              <a className="btn btn-light btn-lg" href="mailto:contato@tovix.com.br">Agendar demonstração</a>
              <a className="btn btn-outline-light btn-lg" href="#planos">Ver planos</a>
            </div>
            <div className="mail">contato@tovix.com.br</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer(){
  const cols=[
    ["Produto",["Recursos","Como funciona","Planos","FAQ"]],
    ["Empresa",["Sobre o Tovix","Segurança","Parceiros","Contato"]],
    ["Recursos",["Documentação","Status","Atualizações","Suporte"]],
  ];
  return (
    <footer className="ftr">
      <div className="wrap">
        <div className="ftr-grid">
          <div>
            <Logo white h={30}/>
            <p className="blurb">CRM de controle de leads para incorporadoras, parceiros de venda e corretores.</p>
          </div>
          {cols.map((c,i)=>(
            <div key={i}>
              <h5>{c[0]}</h5>
              <ul>{c[1].map((l,j)=><li key={j}><a href="#">{l}</a></li>)}</ul>
            </div>
          ))}
        </div>
        <div className="ftr-bot">
          <span>© 2026 Tovix. Todos os direitos reservados.</span>
          <span>contato@tovix.com.br · Política de privacidade · Termos</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window,{ Pricing, FAQ, CTA, Footer });