// Reusable beams-hero. Mount on every marketing page.
// Props: eyebrow, h1 (can contain <br/>), lede, ctaPrimary {label, href}, ctaSecondary, stats [{val, label}]
function BeamsHero({ eyebrow, h1, lede, ctaPrimary, ctaSecondary, stats }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!ref.current || !window.mountBeams) return;
    const dispose = window.mountBeams(ref.current);
    return dispose;
  }, []);

  return (
    <section className="hero hero-beams">
      <div className="beams-wrap" aria-hidden="true">
        <div ref={ref} className="beams-scene" />
        <div className="beams-vignette" />
      </div>

      <div className="container hero-content">
        <div className="hero-badge" role="note">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="square" strokeLinejoin="miter" aria-hidden="true">
            <path d="M12 3l8 3v6c0 4.5-3.3 8.4-8 9-4.7-0.6-8-4.5-8-9V6l8-3z"/>
            <path d="M9 12l2 2 4-4"/>
          </svg>
          <span>{eyebrow}</span>
        </div>

        <h1 className="hero-h1" dangerouslySetInnerHTML={{__html: h1}} />

        <p className="hero-lede">{lede}</p>

        <div className="hero-cta">
          <a href={ctaPrimary.href} className="btn btn-primary btn-shimmer" aria-label={ctaPrimary.aria || ctaPrimary.label}>
            {ctaPrimary.label}
          </a>
          <a href={ctaSecondary.href} className="btn btn-secondary btn-glass" aria-label={ctaSecondary.aria || ctaSecondary.label}>
            {ctaSecondary.label}
          </a>
        </div>

        <div className="hero-stats" role="list">
          {stats.map((s, i) => (
            <div key={i} className="hero-stat" role="listitem">
              <div className="hero-stat-val">{s.val}</div>
              <div className="hero-stat-label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.BeamsHero = BeamsHero;