window.HeroSection = function HeroSection(props) {
  const {
    eyebrow,
    title,
    text,
    id,
    backgroundImage,
    backgroundPosition,
    backgroundSize,
    mobileBackgroundPosition,
    mobileBackgroundSize,
    inner,
    className,
  } = props;
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 767);

  React.useEffect(function bindResizeListener() {
    const onResize = function onResize() {
      setIsMobile(window.innerWidth <= 767);
    };

    window.addEventListener("resize", onResize);
    return function cleanup() {
      window.removeEventListener("resize", onResize);
    };
  }, []);

  const style = backgroundImage
    ? {
        backgroundImage:
          "linear-gradient(90deg, rgba(24, 36, 52, 0.78) 0%, rgba(24, 36, 52, 0.72) 42%, rgba(24, 36, 52, 0.35) 74%), url('" +
          backgroundImage +
          "')",
        backgroundPosition:
          (isMobile ? mobileBackgroundPosition : backgroundPosition) || "center center",
        backgroundSize: (isMobile ? mobileBackgroundSize : backgroundSize) || "cover",
      }
    : undefined;

  return (
    <section
      className={`hero${inner ? " is-inner" : ""}${className ? " " + className : ""}`}
      id={id}
      style={style}
    >
      <div className="container">
        <div className="hero-copy">
          <div className="hero-eyebrow">{eyebrow}</div>
          <h1 className="hero-title">{title}</h1>
          {text ? <p className="hero-text">{text}</p> : null}
        </div>
      </div>
    </section>
  );
};