/* ── News · Live · Music sections ── */

/* ── NEWS ── */
function NewsSection() {
  const [featured, ...rest] = NEWS_ITEMS;
  return (
    <section id="news" data-screen-label="01 News" style={{ padding: '100px 0', background: C.black, borderTop: '1px solid #161616' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 40px' }}>
        <SectionHeader num={1} title="NEWS" />

        {/* Featured */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.8fr', gap: 0, marginBottom: 2, border: '1px solid #222', background: '#0d0d0d' }}>
          <div style={{ overflow: 'hidden', maxHeight: 420 }}>
            <img src={featured.img} alt={featured.title}
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', animation: 'tb-flicker-img 4s infinite', transition: 'transform 0.6s ease' }}
              onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.04)'}
              onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
            />
          </div>
          <div style={{ padding: '48px 48px 48px 40px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
              <span style={{ background: C.rust, color: '#fff', fontSize: 9, fontWeight: 800, letterSpacing: '2px', padding: '4px 12px', textTransform: 'uppercase' }}>LATEST</span>
              <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '2px', color: C.muted, textTransform: 'uppercase' }}>{featured.date}</span>
            </div>
            <h3 style={{ fontSize: 'clamp(1.4rem, 2.5vw, 2rem)', fontWeight: 900, letterSpacing: '3px', textTransform: 'uppercase', color: '#e0e0e0', marginBottom: 20, lineHeight: 1.1, animation: 'tb-flicker 2.5s infinite' }}>
              {featured.title}
            </h3>
            <p style={{ fontSize: 14, lineHeight: 1.8, color: '#aaa', marginBottom: 36, maxWidth: 440 }}>{featured.body}</p>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <PlatformLink icon="fab fa-spotify" label="Spotify" href={STREAM_LINKS.spotify}/>
              <PlatformLink icon="fab fa-apple" label="Apple Music" href={STREAM_LINKS.apple}/>
              <PlatformLink icon="fab fa-soundcloud" label="SoundCloud" href={STREAM_LINKS.soundcloud}/>
              <PlatformLink icon="fab fa-youtube" label="YouTube" href={STREAM_LINKS.youtube}/>
              <PlatformLink icon="fas fa-compact-disc" label="Bandcamp" href={STREAM_LINKS.bandcamp}/>
            </div>
          </div>
        </div>

        {/* Grid — only show items with content */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 2 }}>
          {rest.map((item) => <NewsCard key={item.title} {...item} />)}
        </div>
      </div>
    </section>
  );
}

function NewsCard({ date, title, img }) {
  const [hov, setHov] = React.useState(false);
  return (
    <article onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ background: '#0d0d0d', border: `1px solid ${hov ? '#333' : '#1a1a1a'}`, cursor: 'default', transition: 'border-color 0.3s', overflow: 'hidden', display: 'flex' }}>
      <div style={{ overflow: 'hidden', width: 120, flexShrink: 0 }}>
        <img src={img} alt={title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transform: hov ? 'scale(1.05)' : 'scale(1)', transition: 'transform 0.5s ease', animation: 'tb-flicker-img 5s infinite' }}/>
      </div>
      <div style={{ padding: '24px 28px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: C.muted, marginBottom: 10 }}>{date}</div>
        <h4 style={{ fontSize: '0.9rem', fontWeight: 800, letterSpacing: '2px', textTransform: 'uppercase', color: '#e0e0e0', lineHeight: 1.3, animation: 'tb-flicker 3s infinite' }}>{title}</h4>
      </div>
    </article>
  );
}

/* ── LIVE ── */
function LiveSection() {
  return (
    <section id="live" data-screen-label="02 Live" style={{ padding: '100px 0', background: C.black, borderTop: '1px solid #161616' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 40px' }}>
        <SectionHeader num={2} title="LIVE" />

        <div style={{ marginBottom: 40 }}>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: C.muted, marginBottom: 28, paddingBottom: 16, borderBottom: '1px solid #1a1a1a' }}>
            NO UPCOMING DATES ANNOUNCED — CHECK BACK SOON
          </div>
        </div>

        <div>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: C.muted, marginBottom: 24, paddingBottom: 16, borderBottom: '1px solid #1a1a1a' }}>PAST SHOWS</div>
          {LIVE_DATES.map((d, i) => <PastDateRow key={i} {...d} />)}
        </div>
      </div>
    </section>
  );
}

function PastDateRow({ month, venue, city }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr 1fr', gap: 0, alignItems: 'center', padding: '16px 0', borderBottom: '1px solid #111', opacity: 0.5 }}>
      <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '2px', color: '#666', textTransform: 'uppercase' }}>{month}</div>
      <div style={{ fontSize: '0.9rem', fontWeight: 700, letterSpacing: '1px', textTransform: 'uppercase', color: '#999' }}>{venue}</div>
      <div style={{ fontSize: 11, color: '#555', letterSpacing: '1px', textTransform: 'uppercase' }}>{city}</div>
    </div>
  );
}

/* ── MUSIC ── */
function MusicSection() {
  return (
    <section id="music" data-screen-label="03 Music" style={{ padding: '100px 0', background: C.black, borderTop: '1px solid #161616' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 40px' }}>
        <SectionHeader num={3} title="MUSIC" />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginBottom: 48 }}>
          {/* Spotify */}
          <div>
            <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: C.muted, marginBottom: 16 }}>SPOTIFY</div>
            <iframe
              style={{ borderRadius: 0, border: '1px solid #222', width: '100%', display: 'block' }}
              src="https://open.spotify.com/embed/artist/4kcLNTZpOKAutZ4DhohZnS?utm_source=generator&theme=0"
              width="100%" height="450" frameBorder="0" allowFullScreen=""
              allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
              loading="lazy"
            ></iframe>
          </div>
          {/* SoundCloud */}
          <div>
            <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: C.muted, marginBottom: 16 }}>SOUNDCLOUD</div>
            <iframe
              width="100%" height="450"
              style={{ border: '1px solid #222', borderRadius: 0 }}
              scrolling="no" frameBorder="no" allow="autoplay"
              src="https://w.soundcloud.com/player/?url=https%3A//soundcloud.com/thebreakdownband&color=%2300a8e6&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false&visual=true"
            ></iframe>
          </div>
        </div>
        {/* Streaming links */}
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', paddingTop: 32, borderTop: '1px solid #1a1a1a', alignItems: 'center' }}>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: C.muted, marginRight: 10 }}>STREAM ON</div>
          <PlatformLink icon="fab fa-spotify"      label="Spotify"      href={STREAM_LINKS.spotify}/>
          <PlatformLink icon="fab fa-apple"        label="Apple Music"  href={STREAM_LINKS.apple}/>
          <PlatformLink icon="fab fa-soundcloud"   label="SoundCloud"   href={STREAM_LINKS.soundcloud}/>
          <PlatformLink icon="fab fa-youtube"      label="YouTube"      href={STREAM_LINKS.youtube}/>
          <PlatformLink icon="fas fa-compact-disc" label="Bandcamp"     href={STREAM_LINKS.bandcamp}/>
        </div>
      </div>
    </section>
  );
}

/* ── VIDEO ── */
const VIDEOS = [
  { id: 'XeHqhe-qqf0', title: 'Babylon',                      year: '2025' },
  { id: 'efTMg_N4VB0', title: 'Shimmer',                      year: '2025' },
  { id: 'Mg4WkCZShi0', title: 'High Life',                    year: '2022' },
  { id: 'isDD6Ie1cm4', title: 'Jump the Shark',               year: '2023' },
  { id: 'y8iS0MrYbPk', title: 'This Rigged Machine',          year: '2023' },
  { id: 'ydsrZW_AKFI', title: 'The Girl in the Mondrian Dress', year: '2021' },
];

function VideoSection() {
  const [active, setActive] = React.useState(null);

  return (
    <section id="video" data-screen-label="04 Video" style={{ padding: '100px 0', background: '#080808', borderTop: '1px solid #161616' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 40px' }}>
        <SectionHeader num={4} title="VIDEO" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 3 }}>
          {VIDEOS.map((v) => (
            <VideoThumb key={v.id} video={v} isActive={active === v.id} onPlay={() => setActive(v.id)} />
          ))}
        </div>
      </div>
    </section>
  );
}

function VideoThumb({ video, isActive, onPlay }) {
  const [hov, setHov] = React.useState(false);
  const thumb = `https://img.youtube.com/vi/${video.id}/maxresdefault.jpg`;

  return (
    <div onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ position: 'relative', aspectRatio: '16/9', overflow: 'hidden', background: '#111', border: `1px solid ${hov ? '#333' : '#1a1a1a'}`, transition: 'border-color 0.3s' }}>
      {isActive ? (
        <iframe
          src={`https://www.youtube.com/embed/${video.id}?autoplay=1&rel=0`}
          style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
        />
      ) : (
        <>
          <img src={thumb} alt={video.title}
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block',
              transform: hov ? 'scale(1.04)' : 'scale(1)', transition: 'transform 0.5s ease',
              filter: hov ? 'brightness(0.5)' : 'brightness(0.7)',
              animation: 'tb-flicker-img 6s infinite' }}
          />
          {/* Play button */}
          <div onClick={onPlay}
            style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
            <div style={{ width: 52, height: 52, border: `2px solid ${hov ? '#fff' : 'rgba(255,255,255,0.6)'}`, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'border-color 0.3s', marginBottom: 14, background: hov ? 'rgba(255,255,255,0.1)' : 'transparent' }}>
              <i className="fas fa-play" style={{ color: hov ? '#fff' : 'rgba(255,255,255,0.7)', fontSize: 16, marginLeft: 3 }}/>
            </div>
          </div>
          {/* Title overlay */}
          <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, background: 'linear-gradient(transparent, rgba(0,0,0,0.9))', padding: '32px 16px 14px', opacity: hov ? 1 : 0.7, transition: 'opacity 0.3s' }}>
            <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '1.5px', textTransform: 'uppercase', color: '#e0e0e0', animation: 'tb-flicker 3s infinite' }}>{video.title}</div>
            <div style={{ fontSize: 9, fontWeight: 600, letterSpacing: '2px', color: C.muted, textTransform: 'uppercase', marginTop: 3 }}>{video.year}</div>
          </div>
        </>
      )}
    </div>
  );
}

Object.assign(window, { NewsSection, LiveSection, MusicSection, VideoSection });