const ConnectCase = () => {
  const [active, setActive] = React.useState(0);
  const conversations = [
    { n: "Mariana Costa", m: "Oi! Vocês têm disponível...", t: "agora", a: "MC" },
    { n: "João Ribeiro", m: "Obrigado! Vou confirmar", t: "2min", a: "JR" },
    { n: "Lead #8341", m: "🤖 Qualificado → CRM", t: "5min", a: "L" },
    { n: "Carlos Mendes", m: "Bot respondeu o horário", t: "12min", a: "CM" },
  ];

  return (
    <section className="section" id="connect">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow">Case em destaque · 02</div>
            <h2 style={{marginTop:20}}>Nosso produto-<br/>bandeira:<br/><em className="grad-text" style={{fontWeight:400}}>BBOX Connect.</em></h2>
          </div>
          <div className="body">
            A plataforma de atendimento inteligente via WhatsApp que lançamos e operamos. Bot + humano no mesmo painel, qualificação automática de leads, integração com CRM. É o exemplo mais completo do que conseguimos fazer pra você.
          </div>
        </div>

        <div className="connect">
          <div className="connect-grid">
            <div className="connect-info">
              <div className="badge"><span style={{width:6,height:6,borderRadius:'50%',background:'var(--teal)',boxShadow:'0 0 8px var(--teal)'}}/> PRODUTO PRÓPRIO · LIVE</div>
              <h2>Atendimento<br/>via WhatsApp<br/>que <em>não dorme.</em></h2>
              <p>Da primeira mensagem ao fechamento da venda. O BBOX Connect une bot e humano num só painel, qualifica leads automaticamente e devolve tempo pra sua equipe focar em quem importa.</p>

              <div className="connect-stats">
                <div className="stat"><div className="n">73%</div><div className="l">leads qualificados automaticamente</div></div>
                <div className="stat"><div className="n">4.2×</div><div className="l">velocidade de resposta</div></div>
                <div className="stat"><div className="n">24/7</div><div className="l">atendimento sem folga</div></div>
              </div>

              <div className="connect-ctas">
                <a href="https://www.bboxconnect.com.br/" target="_blank" rel="noopener" className="btn-primary">
                  Conhecer o BBOX Connect
                  <ArrowTR/>
                </a>
                <a href="#contact" className="btn-ghost">Quero algo parecido</a>
              </div>
            </div>

            <div className="mockup">
              <div className="mockup-bar">
                <span className="dot"/><span className="dot"/><span className="dot"/>
                <span className="url">connect.bbox · inbox</span>
              </div>
              <div className="mockup-body">
                <div className="mockup-side">
                  <div className="s-label">inbox · 4</div>
                  {conversations.map((c, i) => (
                    <div key={i} className={`conv ${i===active?'active':''}`} onClick={()=>setActive(i)}>
                      <div className="av">{c.a}</div>
                      <div className="cv-meta">
                        <div className="n">{c.n}</div>
                        <div className="m">{c.m}</div>
                      </div>
                      <div className="time">{c.t}</div>
                    </div>
                  ))}
                </div>
                <div className="mockup-chat">
                  <div className="msg in">Boa tarde! Vocês têm disponibilidade amanhã às 14h?</div>
                  <div style={{height:14}}/>
                  <div className="msg bot">Olá, {conversations[active].n.split(' ')[0]} 👋 Tenho sim! Vou reservar e te mando a confirmação.</div>
                  <div className="msg out">Reservado ✓ Confirmação enviada no seu e-mail.</div>
                  <div className="msg in">Perfeito, obrigada!</div>
                  <div className="mockup-input">
                    <span>Digite uma mensagem…</span>
                    <span className="send"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6h8M6 2l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.ConnectCase = ConnectCase;