/* global React */
const { Eyebrow, Button } = window.UI;

function Hero({ onContact, onNav }) {
  const videoRef = React.useRef(null);
  React.useEffect(() => {
    const v = videoRef.current;
    if (v) { v.muted = true; v.volume = 0; v.removeAttribute("controls"); v.play && v.play().catch(() => {}); }
  }, []);
  return (
    <section className="sl-hero" id="top">
      <video ref={videoRef} className="sl-hero-video" src={window.__resources && window.__resources.heroVideo || "media/hero.mp4"}
        autoPlay muted loop playsInline controls={false} aria-hidden="true" />
      <div className="sl-hero-veil" />
      <div className="sl-hero-content">
        <Eyebrow style={{ color: "var(--summit-mint)" }}>Operational Growth Partner</Eyebrow>
        <h1>Construimos <span className="mint">operaciones</span><br />que escalan.</h1>
        <div className="sl-hero-cta">
          <Button icon="arrow-right" onClick={() => onNav("about")}>Conocé más</Button>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;