/* global React, Icon */
function Features(){
  const items=[
    {ic:"funnel",t:"Captação multicanal",d:"Leads entram pelo site, por campanhas ou cadastro manual do vendedor — todos centralizados em um só funil."},
    {ic:"route",t:"Distribuição e captura",d:"Distribua automaticamente ou deixe o corretor assumir. Cada lead encontra um responsável em segundos."},
    {ic:"lock",t:"Trava por corretor",d:"Ao assumir, o lead fica travado para aquele corretor — sem disputa interna e sem atendimento duplicado."},
    {ic:"timer",t:"SLA de atendimento",d:"Defina o prazo de primeiro contato. O Tovix monitora cada lead e dispara alertas antes do atraso."},
    {ic:"shield",t:"Auditoria e logs",d:"Histórico completo de cada lead e log de todas as ações críticas. Rastreabilidade total para a operação."},
    {ic:"chart",t:"Dashboard executivo",d:"Conversão, leads atrasados e volume por empreendimento em tempo real, com rankings de vendedores e corretores."},
    {ic:"network",t:"Múltiplas incorporadoras",d:"Gerencie várias empresas e parceiros de venda na mesma plataforma, com dados isolados por operação."},
    {ic:"coins",t:"Controle de comissão",d:"Registre vendas, percentuais e comissões por corretor e parceiro — fechamento comercial sem planilha."},
    {ic:"users",t:"6 perfis de acesso",d:"Diretor, admin, supervisor, vendedor e corretor: cada um vê e faz exatamente o que deve, com permissões granulares."},
  ];
  return (
    <section className="section" id="recursos">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Recursos</span>
          <h2 className="title" style={{marginTop:14}}>Tudo que a operação comercial precisa, num lugar só.</h2>
          <p className="lead" style={{marginTop:16}}>Do primeiro clique no site ao fechamento da venda — com governança, velocidade e transparência em cada etapa.</p>
        </div>
        <div className="feat-grid">
          {items.map((f,i)=>(
            <div className={"feat reveal d"+((i%3)+1)} key={i}>
              <div className="ic"><Icon name={f.ic} size={24}/></div>
              <h3>{f.t}</h3>
              <p>{f.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks(){
  const steps=[
    {st:"Lead capturado",sd:"Site, campanha ou cadastro manual.",
      tag:"Etapa 01 · Entrada",h:"Todo lead entra rastreado.",
      p:"Formulários do site e campanhas criam o lead automaticamente; o vendedor também cadastra manualmente. Origem, canal e empreendimento já ficam registrados.",
      li:["Criação automática pelo site","Cadastro manual pelo vendedor","Origem e canal registrados"]},
    {st:"Distribuição / captura",sd:"Automática ou assumida pelo corretor.",
      tag:"Etapa 02 · Roteamento",h:"O lead encontra um dono.",
      p:"Distribua por regras ou libere para os corretores assumirem. O primeiro a captar passa a ser o responsável — com data e hora gravadas.",
      li:["Distribuição por regras","Captura pelo corretor disponível","Registro de quem assumiu e quando"]},
    {st:"Trava e atendimento",sd:"Lead travado, SLA em contagem.",
      tag:"Etapa 03 · Atendimento",h:"Sem disputa, sem atraso.",
      p:"Ao assumir, o lead trava para aquele corretor. O SLA começa a contar e alertas avisam antes do prazo estourar.",
      li:["Trava exclusiva por corretor","Contagem de SLA em tempo real","Alertas de lead atrasado"]},
    {st:"Venda e comissão",sd:"Fechamento com histórico completo.",
      tag:"Etapa 04 · Fechamento",h:"Resultado registrado e auditável.",
      p:"Registre a venda, o valor e a comissão do corretor e parceiro. Todo o caminho do lead fica salvo em histórico e logs para auditoria.",
      li:["Registro de venda e valor","Cálculo de comissão por corretor/parceiro","Histórico e auditoria completos"]},
  ];
  const [active,setActive]=React.useState(0);
  const s=steps[active];
  return (
    <section className="section" id="como" style={{background:'var(--bg-soft)'}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Como funciona</span>
          <h2 className="title" style={{marginTop:14}}>O fluxo do lead, do clique ao contrato.</h2>
        </div>
        <div className="flow">
          <div className="steps reveal d1">
            {steps.map((st,i)=>(
              <button className={"step"+(active===i?" active":"")} key={i} onClick={()=>setActive(i)}>
                <div className="nbr">{i+1}</div>
                <div><div className="st">{st.st}</div><div className="sd">{st.sd}</div></div>
              </button>
            ))}
          </div>
          <div className="flow-panel reveal d2">
            <div className="fp-in" key={active} style={{animation:'fpIn .4s ease'}}>
              <div className="fp-tag">{s.tag}</div>
              <h3>{s.h}</h3>
              <p>{s.p}</p>
              <div className="fp-list">
                {s.li.map((l,i)=><div className="li" key={i}><span className="ck"><Icon name="check" size={13}/></span>{l}</div>)}
              </div>
            </div>
            <div className="fp-vis">{String(active+1).padStart(2,'0')} / 04</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window,{ Features, HowItWorks });