function Hero({ stats }) {
  return (
    <section className="hero">
      <iframe
        className="hero-video-media"
        src="https://www.youtube.com/embed/e2lRZJMzQxg?autoplay=1&mute=1&loop=1&playlist=e2lRZJMzQxg&controls=0&modestbranding=1&rel=0&playsinline=1"
        title="Agile Developer Studios hero video"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerPolicy="strict-origin-when-cross-origin"
        allowFullScreen
      ></iframe>

      <div className="page-shell hero-content-shell">
        <div className="hero-content-grid hero-content-grid-single">
          <div className="hero-copy">
            <p className="eyebrow">Modern healthcare AI, thoughtfully delivered</p>
            <h1>Pathology is making the same leap cameras made when film went digital.</h1>
            <p className="hero-text">
              Just as photography moved from film to digital, pathology is moving from the microscope to
              digital workflows, opening the door to faster review, better collaboration, and AI-powered
              insight. Agile Developer Studios builds software for that transition, including AutoSlide for
              whole slide image analysis and cancer detection.
            </p>

            <div className="cta-row">
              <a className="button button-primary" href="https://autoslide.io" target="_blank" rel="noreferrer">
                Visit AutoSlide
              </a>
              <a className="button button-secondary" href="#contact">
                Talk With Us
              </a>
            </div>

            <div className="stat-grid">
              {stats.map((stat) => (
                <article className="stat-card" key={stat.label}>
                  <strong>{stat.value}</strong>
                  <span>{stat.label}</span>
                </article>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}