const Hero = () => {
  const [photoErr, setPhotoErr] = React.useState(false);

  return (
    <section className="jjnb-hero" id="home">
      <div className="jjnb-hero__content">
        <h1 className="jjnb-hero__title">
          <span className="word w-manifest">Manifest</span>
          <span className="word w-your">Your Masterpiece</span>
        </h1>

        <div className="jjnb-hero__artist">
          Just J <span className="q">'</span>N<span className="q">'</span> B<span className="plus">+</span>
        </div>

        <p className="jjnb-hero__intro">
          We turn life into lyrics and moments into music.<br />
          Creativity is our language.<br />
          Expression is our purpose.
        </p>

        <div className="jjnb-hero__ctas">
          <a className="btn" href="#videos" onClick={(e) => { e.preventDefault(); document.getElementById('videos').scrollIntoView({ behavior: 'smooth' }); }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z" /></svg>
            Watch Videos
          </a>
        </div>
      </div>

      <div className="jjnb-hero__duo">
        <div className="duo-frame">
          <div className="duo-ph__splash" aria-hidden="true"></div>

          {!photoErr ? (
            <img
              src="../../assets/the bois.png"
              alt="Just J'N B+ - Just J and B+ together"
              className="duo-photo"
              onError={() => setPhotoErr(true)}
            />
          ) : (
            <div className="duo-ph__figures">
              <div className="fig"><span>Just J</span></div>
              <div className="fig"><span>B+</span></div>
            </div>
          )}

          <div className="duo-frame__notes" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="#FFB12B" className="n n1"><path d="M12 3v10.55A4 4 0 1 0 14 17V7h4V3h-6z" /></svg>
            <svg viewBox="0 0 24 24" fill="#00E5FF" className="n n2"><path d="M12 3v10.55A4 4 0 1 0 14 17V7h4V3h-6z" /></svg>
            <svg viewBox="0 0 24 24" fill="#D92CFF" className="n n3"><path d="M12 3v10.55A4 4 0 1 0 14 17V7h4V3h-6z" /></svg>
            <svg viewBox="0 0 24 24" fill="#FF6A00" className="n n4"><path d="M12 3v10.55A4 4 0 1 0 14 17V7h4V3h-6z" /></svg>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;