// FeaturedRelease.jsx — Album spotlight with YouTube-focused CTAs
// REPLACE: Swap FEATURED_YOUTUBE_ID with the main YouTube video/playlist ID.
// REPLACE: Swap album-art img src with the real album cover image path.

const FEATURED_YOUTUBE_ID = 'REPLACE_FEATURED_VIDEO_ID';

const FeaturedRelease = () => (
  <section className="jjnb-section" id="release">
    <div className="glass jjnb-release">
      <div className="jjnb-release__art">
        <AlbumArt/>
      </div>
      <div className="jjnb-release__body">
        <div className="eyebrow">Featured Release</div>
        <h2 className="jjnb-release__title">Manifest Your Masterpiece</h2>
        <div className="jjnb-release__meta">Jus J'N B+ &nbsp;·&nbsp; 10 Tracks &nbsp;·&nbsp; 2024</div>
        <p>
          A vibrant release built on raw emotion, melody, and meaning. Every track carries a piece of the journey,
          blending creative expression with real-life experience. This is more than music — this is our masterpiece.
        </p>
        <Waveform/>
        <div className="jjnb-release__ctas">
          <a
            className="btn"
            href={`https://www.youtube.com/watch?v=${FEATURED_YOUTUBE_ID}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
            Watch on YouTube
          </a>
        </div>
        <a className="jjnb-link" href="#videos" onClick={(e) => { e.preventDefault(); document.getElementById('videos').scrollIntoView({behavior:'smooth'}); }}>
          View All Videos →
        </a>
      </div>
    </div>
  </section>
);

const AlbumArt = () => {
  const [err, setErr] = React.useState(false);
  return (
    <div className="album-frame">
      {/* REPLACE: Swap this img src with the real album cover path */}
      {!err ? (
        <img
          src="../../uploads/pasted-1777616786789-0.png"
          alt="Manifest Your Masterpiece — Album Cover"
          className="album-photo"
          onError={() => setErr(true)}
        />
      ) : null}
      {/* Gradient placeholder — always rendered behind the photo */}
      <div className="album-ph">
        <div className="album-ph__swirls"></div>
        <div className="album-ph__inner">
          <div className="album-ph__title">Manifest<br/>Your Masterpiece</div>
          <div className="album-ph__figure"><span>JJB+</span></div>
          <div className="album-ph__credit">Jus J'N B+</div>
        </div>
      </div>
    </div>
  );
};

const Waveform = () => (
  <div className="waveform" aria-hidden="true">
    {Array.from({length: 64}).map((_, i) => {
      const h = 8 + Math.abs(Math.sin(i * 0.5)) * 24 + (i % 4) * 4;
      const active = i < 26;
      return (
        <span
          key={i}
          className={active ? 'wave-bar wave-bar--active' : 'wave-bar'}
          style={{height: h, background: active ? 'var(--accent-cyan)' : 'rgba(255,255,255,0.18)'}}
        />
      );
    })}
  </div>
);

window.FeaturedRelease = FeaturedRelease;
window.AlbumArt = AlbumArt;
window.Waveform = Waveform;