const Hero = () => (
  <section className="hero" id="top">
    
    {/* Hero Background Video */}
    <video
      className="hero__video"
      autoPlay
      muted
      loop
      playsInline
      aria-hidden="true"
    >
      <source src="/assets/video/stonecrest-medspa-hero.mp4" type="video/mp4" />
    </video>

    {/* Existing overlay - keeps text readable */}
    <div className="hero__bg" aria-hidden="true"></div>

    <div className="container hero__inner">
      <h1 className="h-display hero__title">
        The provider your practice has been <em>waiting for</em>.
      </h1>

      <p className="lede hero__lede">
        Stonecrest Recruiting builds a bench of top-tier injectors, master estheticians, and
        functional wellness providers for provider-owned medical aesthetics practices &mdash;
        nationwide. We self-select candidates against the profile and ICP of your market, then
        shortlist only the ones you&rsquo;d hire twice.
      </p>

      <div className="hero__ctas">
        <a className="btn btn--gold" href="#contact">
          BOOK A CALL <span style={{ fontSize: '13px', letterSpacing: 0 }}>→</span>
        </a>
        <a className="btn btn--ghost-light" href="#providers">View the roster</a>
      </div>

      <div className="hero__meta">
        <div className="hero__stat">
          <span className="hero__stat-num">240<em>+</em></span>
          <span className="hero__stat-label">Providers placed</span>
        </div>

        <div className="hero__stat">
          <span className="hero__stat-num">50</span>
          <span className="hero__stat-label">States served</span>
        </div>

        <div className="hero__stat">
          <span className="hero__stat-num">21<em> days</em></span>
          <span className="hero__stat-label">Avg. time to shortlist</span>
        </div>

        <div className="hero__stat">
          <span className="hero__stat-num">90%</span>
<span className="hero__stat-label">Placement Success</span>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Hero });