const FinalCTA = () => {
  const track = (cta) => window.trackEvent && window.trackEvent('cta_click', { location: 'final_cta', cta });

  const openContact = (e) => {
    e.preventDefault();
    track('consultation');
    window.openContactModal && window.openContactModal('final_cta');
  };

  const openMeeting = (e) => {
    e.preventDefault();
    track('meeting');
    window.open('https://cal.read.ai/den-hrybkov/30-min', '_blank', 'noopener,noreferrer,width=1040,height=760');
  };

  return (
    <section className="section section-light" id="contacts" data-track-section="final_cta">
      <div className="container">
        <div className="final-cta-wrap">
          <Waves stroke="#FFFFFF" opacity={0.1}/>
          <div style={{position:"relative",zIndex:1,maxWidth:640}}>
            <span className="eyebrow" style={{color:"var(--orange-400)"}}>Let's talk</span>
            <h2 style={{marginTop:12}}>Don't risk revenue loss during peak traffic or critical failures.</h2>
            <p className="lead">Get a free infrastructure consultation from a WiseOps engineer. We'll benchmark your setup against iGaming best-practice and show you exactly where money is leaking.</p>
          </div>
          <div className="final-cta-actions" style={{position:"relative",zIndex:1}}>
            <a href="#contact" className="btn btn-primary" onClick={openContact}>
              Get a Consultation
              <span className="btn-icon"><Icon name="chev-right" size={14} stroke={2.6}/></span>
            </a>
            <a href="https://cal.read.ai/den-hrybkov/30-min" target="_blank" rel="noopener noreferrer"
               className="btn btn-secondary" onClick={openMeeting}
               style={{background:"transparent", color:"#fff", borderColor:"rgba(255,255,255,0.35)"}}>
              Book a Meeting
              <span className="btn-icon"><Icon name="chev-right" size={14} stroke={2.6}/></span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

window.FinalCTA = FinalCTA;