const Icon = window.Icon;

const Artists = () => (
  <section className="jjnb-section" id="about">
    <div className="jjnb-section__head jjnb-section__head--center">
      <div className="divider-flourish"></div>
      <div className="eyebrow">Meet the Artists</div>
      <div className="divider-flourish flip"></div>
    </div>
    <div className="jjnb-artists">
      <ArtistCard
        name="Just J"
        subtitle=""
        bio="Performer/Songwriter who hails from Utah. Since he was young he has been a creative writer and outgoing performer. Since starting his music journey he has opened for many big names doing 1000s of shows, co-founded a record label, and has held many food drives for the less fortunate. Just J has always been very close with his brother B+ so when tragedy struck in the form of a vaccine injury which caused chronic nerve damage in B's entire body, including central vision blindness, J dropped everything to take care of him through the painful healing process. In those moments of darkness they chose to create these songs not only to uplift themselves, but to spread a message of hope and love for anyone going through what they were going through."
        socials={[
          { platform: 'Instagram', icon: 'instagram', href: 'https://www.instagram.com/justj_official?igsh=MTd3MncyajA5OW82Zg==' },
          { platform: 'Facebook', icon: 'facebook', href: 'https://www.facebook.com/share/1FP58ozZic/' },
        ]}
        hue="#D92CFF"
        hue2="#FF6A00"
        photo="../../assets/left guy.png"
      />
      <ArtistCard
        name="B+ Positive"
        subtitle=""
        bio="B has always loved singing his heart out ever since he was young. He and his brother J have had each other's backs since childhood, sharing a love for music, lyrics, vocals, and writing. After being disabled and blinded by a vaccine injury and almost dying multiple times, the brothers came together to lift each other up with heartfelt inspirational music carrying a message of hope, love, and positivity."
        socials={[
          { platform: 'Instagram', icon: 'instagram', href: 'https://www.instagram.com/bpositivebye?igsh=aDdidmY5Nmticms0' },
          { platform: 'Facebook', icon: 'facebook', href: 'https://www.facebook.com/share/1J4AdXwvgk/' },
        ]}
        hue="#00E5FF"
        hue2="#004CFF"
        photo="../../assets/right guy.png"
      />
    </div>
  </section>
);

const ArtistCard = ({ name, subtitle, bio, hue, hue2, photo, socials = [] }) => (
  <article className="glass jjnb-artist">
    <ArtistPortrait name={name} hue={hue} hue2={hue2} photo={photo} />
    <div className="jjnb-artist__body">
      <h3>{name}</h3>
      <div className="jjnb-artist__sub">{subtitle}</div>
      <p>{bio}</p>
      <div className="jjnb-artist__socials" aria-label={`${name} social media links`}>
        {socials.map(({ platform, icon, href }) => (
          <a
            key={platform}
            className="jjnb-social-pill"
            href={href}
            target="_blank"
            rel="noreferrer"
            aria-label={`${name} on ${platform}`}
          >
            <Icon name={icon} />
            <span>{platform}</span>
          </a>
        ))}
      </div>
    </div>
  </article>
);

const ArtistPortrait = ({ name, hue, hue2, photo }) => {
  const [err, setErr] = React.useState(false);
  return (
    <div className="jjnb-artist__portrait" style={{ '--hue': hue, '--hue2': hue2 }}>
      <div className="splash"></div>
      {photo && !err ? (
        <img
          src={photo}
          alt={`${name} - artist portrait`}
          className="portrait-img"
          onError={() => setErr(true)}
        />
      ) : (
        <>
          <div className="figure"><span>{name}</span></div>
          <div className="ph-tag">portrait placeholder</div>
        </>
      )}
    </div>
  );
};

window.Artists = Artists;
window.ArtistCard = ArtistCard;
window.ArtistPortrait = ArtistPortrait;