/* Live WhatsApp demo section */
function ChatDemo() {
  return (
    <section id="demo" className="tight">
      <div className="wrap">
        <div className="chatdemo">
          <div>
            <span className="chip"><Ic.waLogo size={14} /> Live demo</span>
            <h2 style={{marginTop: 18}}>This is what your customers feel.</h2>
            <p>An actual scripted conversation from a working client. The bot qualifies, answers, and books — all inside WhatsApp, on your business number.</p>
            <div style={{ display: 'flex', gap: 10, marginTop: 26, flexWrap: 'wrap' }}>
              <a href="#contact" className="btn accent">Build mine on WhatsApp <Ic.arrow size={14} /></a>
              <a href="#contact" className="btn ghost" style={{ borderColor: 'rgba(255,255,255,.2)', color: 'var(--paper)'}}>Talk to a human first</a>
            </div>
            <div style={{display: 'flex', gap: 22, marginTop: 32, flexWrap: 'wrap'}}>
              <div><div className="serif" style={{fontSize: 32, lineHeight: 1}}>24/7</div><div className="small" style={{color: 'color-mix(in oklab, white 60%, black)'}}>Always on</div></div>
              <div><div className="serif" style={{fontSize: 32, lineHeight: 1}}>80%</div><div className="small" style={{color: 'color-mix(in oklab, white 60%, black)'}}>Of queries self-served</div></div>
              <div><div className="serif" style={{fontSize: 32, lineHeight: 1}}>98%</div><div className="small" style={{color: 'color-mix(in oklab, white 60%, black)'}}>Read rate on WA</div></div>
            </div>
          </div>
          <div className="phone-frame">
            <div className="phone-screen">
              <WAChatStage compact={false} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.ChatDemo = ChatDemo;