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

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

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

  const industries = [
    { icon: "dice",     label: "Sportsbook" },
    { icon: "game",     label: "Casino" },
    { icon: "ball",     label: "Live Dealer" },
    { icon: "card",     label: "Payments" },
    { icon: "cog",      label: "Aggregators" },
    { icon: "globe",    label: "Multi-brand" },
  ];

  const stats = [
    { v: "99.99%", l: "Uptime SLA on managed gambling platforms" },
    { v: "3 min",  l: "Failover time to backup platform" },
    { v: "10x",    l: "Peak traffic absorbed without slowdowns" },
    { v: "3–5×",   l: "Lower IT infrastructure spend" },
    { v: "60 s",   l: "Anomaly detection for financial flows" },
  ];

  return (
    <section className="hero" data-track-section="hero">
      <Waves />
      <div className="container hero-inner">
        <div className="inline-pill" style={{marginBottom: 22}}>
          <span className="dot"></span> iGaming Infrastructure, Managed by WiseOps
        </div>
        <h1>
          Keep your betting &amp; casino platform<br/>
          <span className="accent">online, fast, and profitable.</span>
        </h1>
        <p className="lead">
          WiseOps builds, fixes, and optimizes infrastructure for gambling operators —
          zero-downtime deployments, auto-scaling for peak events, real-time monitoring of
          every bet and deposit, and rapid recovery when things break.
        </p>
        <div className="hero-cta">
          <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}>
            Book a Meeting
            <span className="btn-icon"><Icon name="chev-right" size={13} stroke={2.6}/></span>
          </a>
        </div>

        <div className="industries" aria-label="Verticals we serve">
          {industries.map((it,i)=>(
            <div className="industry" key={i}>
              <span className="industry-icon"><Icon name={it.icon} size={18} stroke={2} /></span>
              {it.label}
            </div>
          ))}
        </div>

        <div className="stats">
          {stats.map((s,i)=>(
            <div className="stat" key={i}>
              <div className="stat-num">{s.v}</div>
              <div className="stat-label">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;