const Icon = window.Icon;

const GALLERY_ITEMS = [
  { src: '../../uploads/pasted-1777616786789-0.png', alt: "Just J'N B+ - Duo promo photo", tag: 'Promo', wide: true },
  { src: '../../assets/left guy.png', alt: 'Just J - Artist portrait', tag: 'Promo' },
  { src: '../../assets/right guy.png', alt: 'B+ - Artist photo', tag: 'Promo' },
  { src: null, alt: 'Manifest Your Masterpiece - Album Art', tag: 'Artwork', variant: 'album' },
  { src: null, alt: 'Live performance', tag: 'Live', variant: 'live' },
  { src: null, alt: 'Behind the scenes', tag: 'BTS', variant: 'bts' },
];

const Gallery = () => (
  <section className="jjnb-section" id="gallery">
    <div className="jjnb-section__head">
      <div className="eyebrow">Photography &amp; Art</div>
      <h2 className="jjnb-section__title">Gallery</h2>
    </div>
    <div className="gallery-grid">
      {GALLERY_ITEMS.map((item, i) => (
        <GalleryItem key={i} {...item} />
      ))}
    </div>
  </section>
);

const GalleryItem = ({ src, alt, tag, wide, variant }) => {
  const [err, setErr] = React.useState(false);
  const variantClass = variant ? `gallery-ph--${variant}` : '';
  return (
    <div className={`gallery-item${wide ? ' gallery-item--wide' : ''}`}>
      {src && !err ? (
        <img
          src={src}
          alt={alt}
          className="gallery-item__img"
          onError={() => setErr(true)}
        />
      ) : (
        <div className={`gallery-ph ${variantClass}`}>
          <span className="ph-tag">{tag} - add photo</span>
        </div>
      )}
      <div className="gallery-item__overlay">
        <span className="gallery-tag">{tag}</span>
      </div>
    </div>
  );
};

const Footer = () => (
  <footer className="jjnb-footer">
    <div className="jjnb-footer__clef">
      <img src="../../assets/treble-clef.svg" alt="" />
    </div>
    <div className="jjnb-footer__inner">
      <div className="jjnb-footer__brand">
        <div className="jjnb-logo big">
          Just J <span className="quote">'</span>N<span className="quote">'</span> B<span className="plus">+</span>
        </div>
        <p className="muted">Creating music that inspires, unites,<br />and leaves a lasting impact.</p>
      </div>
      <div className="jjnb-footer__col">
        <div className="col-head">Explore</div>
        <a href="#home" onClick={(e) => { e.preventDefault(); document.getElementById('home').scrollIntoView({ behavior: 'smooth' }); }}>Home</a>
        <a href="#videos" onClick={(e) => { e.preventDefault(); document.getElementById('videos').scrollIntoView({ behavior: 'smooth' }); }}>Videos</a>
        <a href="#about" onClick={(e) => { e.preventDefault(); document.getElementById('about').scrollIntoView({ behavior: 'smooth' }); }}>About</a>
      </div>
      <div className="jjnb-footer__col">
        <div className="col-head">Just J</div>
        <a href="https://www.instagram.com/justj_official?igsh=MTd3MncyajA5OW82Zg==" target="_blank" rel="noreferrer" aria-label="Just J on Instagram"><Icon name="instagram" /> Instagram</a>
        <a href="https://www.facebook.com/share/1FP58ozZic/" target="_blank" rel="noreferrer" aria-label="Just J on Facebook"><Icon name="facebook" /> Facebook</a>
      </div>
      <div className="jjnb-footer__col">
        <div className="col-head">B+</div>
        <a href="https://www.instagram.com/bpositivebye?igsh=aDdidmY5Nmticms0" target="_blank" rel="noreferrer" aria-label="B+ on Instagram"><Icon name="instagram" /> Instagram</a>
        <a href="https://www.facebook.com/share/1J4AdXwvgk/" target="_blank" rel="noreferrer" aria-label="B+ on Facebook"><Icon name="facebook" /> Facebook</a>
      </div>
    </div>
    <div className="jjnb-footer__copy">© 2026 Just J'N B+. All Rights Reserved.</div>
  </footer>
);

window.Gallery = Gallery;
window.GalleryItem = GalleryItem;
window.Footer = Footer;