/* global React, Icon, Logo, useCountUp */
const { useState:useStateT, useEffect:useEffectT, useRef:useRefT } = React;

function Header(){
  const [scrolled,setScrolled]=useStateT(false);
  useEffectT(()=>{
    const on=()=>setScrolled(window.scrollY>12);
    on(); window.addEventListener('scroll',on,{passive:true});
    return ()=>window.removeEventListener('scroll',on);
  },[]);
  return (
    <header className={"hdr"+(scrolled?" scrolled":"")}>
      <div className="wrap hdr-in">
        <a href="#top" aria-label="Tovix"><Logo h={30}/></a>
        <nav className="nav">
          <a href="#recursos">Recursos</a>
          <a href="#como">Como funciona</a>
          <a href="#planos">Planos</a>
          <a href="#faq">FAQ</a>
        </nav>
        <div className="hdr-cta">
          <a className="login" href="https://app.tovix.com.br">Entrar</a>
          <a className="btn btn-primary" href="#">Agendar demonstração</a>
        </div>
      </div>
    </header>
  );
}

function Hero(){
  return (
    <section className="hero" id="top">
      <div className="wrap hero-grid">
        <div className="hero-copy">
          <span className="eyebrow reveal">CRM de leads para incorporadoras</span>
          <h1 className="reveal d1">Nenhum lead <span className="grad">esquecido</span>.<br/>Nenhuma venda perdida.</h1>
          <p className="lead reveal d2">O Tovix organiza a captação, distribuição e o atendimento dos seus leads imobiliários — com trava por corretor, SLA monitorado e auditoria completa de ponta a ponta.</p>
          <div className="hero-cta reveal d3">
            <a className="btn btn-primary btn-lg" href="#planos">Agendar demonstração <span className="arr"><Icon name="arrow" size={18}/></span></a>
            <a className="btn btn-ghost btn-lg" href="#planos">Ver planos</a>
          </div>
          <div className="hero-trust reveal d3">
            <div className="avatars">
              <span>IN</span><span>PV</span><span>CR</span><span>SV</span>
            </div>
            <span className="label">Incorporadoras, parceiros de venda e corretores no mesmo fluxo.</span>
          </div>
        </div>
        <div className="mock reveal d2">
          <DashboardMock/>
          <div className="float-card float-a">
            <div className="ic" style={{background:'var(--green-bg)',color:'var(--green)'}}><Icon name="check" size={20}/></div>
            <div>
              <div style={{fontFamily:'var(--f-head)',fontWeight:700,fontSize:14}}>Lead travado</div>
              <div style={{fontSize:11.5,color:'var(--muted)'}}>atribuído ao corretor</div>
            </div>
          </div>
          <div className="float-card float-b">
            <div className="ic" style={{background:'var(--amber-bg)',color:'var(--amber)'}}><Icon name="timer" size={20}/></div>
            <div>
              <div style={{fontFamily:'var(--f-head)',fontWeight:700,fontSize:14}}>SLA: 02:14</div>
              <div style={{fontSize:11.5,color:'var(--muted)'}}>dentro do prazo</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function DashboardMock(){
  const rows=[
    {n:"Marina Alves",e:"contato pelo site",t:"há 4 min",ava:"MA",badge:["Novo","b-blue"]},
    {n:"Ricardo Tavares",e:"Res. Vista Parque",t:"em atendimento",ava:"RT",badge:["Corretor: Ana","b-green"]},
    {n:"Júlia Bernardes",e:"Edifício Aurora",t:"aguardando 22h",ava:"JB",badge:["Atenção SLA","b-amber"]},
  ];
  return (
    <div className="mock-card">
      <div className="mock-top">
        <div className="mock-dots"><i/><i/><i/></div>
        <div className="mock-url">app.tovix.com.br/leads</div>
      </div>
      <div className="mock-body">
        <div className="mock-h">
          <div>
            <div className="t">Painel comercial</div>
            <div className="sub">Incorporadora Horizonte · hoje</div>
          </div>
          <div className="chip" style={{background:'var(--green-bg)',color:'var(--green)'}}><span className="dot" style={{background:'var(--green)'}}/>ao vivo</div>
        </div>
        <div className="kpis">
          <div className="kpi"><div className="lab">Total de leads</div><div className="num">1.284</div></div>
          <div className="kpi"><div className="lab">Em atendimento</div><div className="num blue">312</div></div>
          <div className="kpi"><div className="lab">Atrasados</div><div className="num amber">18</div></div>
          <div className="kpi"><div className="lab">Conversão</div><div className="num green">9,4%</div></div>
        </div>
        {rows.map((r,i)=>(
          <div className="lead-row" key={i}>
            <div className="lr-name">
              <div className="lr-ava">{r.ava}</div>
              <div><div className="n">{r.n}</div><div className="e">{r.e}</div></div>
            </div>
            <div className="lr-meta">{r.t}</div>
            <div className={"badge "+r.badge[1]}>{r.badge[0]}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function TrustStrip(){
  const names=["Incorporadora Horizonte","Grupo Vértice","Atlântica Urbanismo","Nova Cidade","Prime Realty"];
  return (
    <div className="strip">
      <div className="wrap strip-in">
        <span className="lab">Feito para operações que não podem perder um lead</span>
        {names.map((n,i)=><span className="name" key={i}>{n}</span>)}
      </div>
    </div>
  );
}

function Metric({to,suffix,prefix,decimals,label,run}){
  const v=useCountUp(to,run,{decimals:decimals||0});
  const fmt=(decimals?String(v).replace('.',','):Number(v).toLocaleString('pt-BR'));
  return (
    <div className="metric">
      <div className="v">{prefix}{fmt}<span className="u">{suffix}</span></div>
      <div className="l">{label}</div>
    </div>
  );
}

function Metrics(){
  const [run,setRun]=useStateT(false);
  const ref=useRefT(null);
  useEffectT(()=>{
    const io=new IntersectionObserver(([e])=>{if(e.isIntersecting){setRun(true);io.disconnect();}},{threshold:.4});
    if(ref.current) io.observe(ref.current);
    return ()=>io.disconnect();
  },[]);
  return (
    <section className="section metrics" ref={ref}>
      <div className="wrap">
        <div className="sec-head reveal" style={{marginBottom:48}}>
          <span className="eyebrow" style={{color:'var(--blue-400)'}}>Resultados</span>
          <h2 className="title" style={{color:'#fff',marginTop:14}}>Mais controle, menos lead perdido.</h2>
        </div>
        <div className="metrics-grid">
          <Metric to={72} prefix="−" suffix="%" label="leads sem atendimento após adotar SLA monitorado" run={run}/>
          <Metric to={34} prefix="+" suffix="%" label="de conversão com distribuição inteligente" run={run}/>
          <Metric to={24} suffix="h" label="de SLA acompanhado em tempo real com alertas" run={run}/>
          <Metric to={100} suffix="%" label="dos atendimentos rastreados e auditáveis" run={run}/>
        </div>
      </div>
    </section>
  );
}

Object.assign(window,{ Header, Hero, TrustStrip, Metrics });