// Tracks.jsx — debut LP: cover (left) + tracklist (right) + streaming links
const DK_ALBUM_ID = '2113073239';
function Tracks() {
  // [num, title, dur, bandcampTrackId]
  const tracks = [
    ['01', 'El Despertar de los Antiguos', '3:24', '1421693746'],
    ['02', 'La Profecía del Cuervo', '5:49', '3874884184'],
    ['03', 'Sangre del Norte', '5:52', '3488101813'],
    ['04', 'Lanza del Alba', '4:42', '1645518300'],
    ['05', 'Brumas de Khaal', '5:24', '467347542'],
    ['06', 'El Dragón de Hierro', '4:28', '1218038611'],
    ['07', 'La Batalla del Yermo', '6:43', '890275537'],
    ['08', 'El Lamento del Traidor', '6:34', '1434923620'],
    ['09', 'Hijos del Yermo', '5:13', '459408355'],
    ['10', 'El Último Drakhar', '7:07', '338401151'],
  ];
  const [openId, setOpenId] = React.useState(null);
  return (
    <Section id="album" warm>
      <SectionHead eyebrow="Álbum debut · MMXXVI" title="Drakharon" />
      <div className="dk-album-grid">
        <div className="dk-album-cover" style={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
          <AlbumCover />
          <PlatformLinks />
        </div>
        <div className="dk-reveal" style={{ border: '1px solid var(--border)', borderBottom: 'none' }}>
          {tracks.map(([num, title, dur, tid], i) => (
            <TrackRow key={i} num={num} title={title} dur={dur} trackId={tid}
              open={openId === i} onToggle={() => setOpenId(o => o === i ? null : i)} />
          ))}
        </div>
      </div>
    </Section>
  );
}

// Album cover — real artwork
function AlbumCover() {
  return (
    <div className="dk-reveal" style={{ width: '100%' }}>
      <div style={{
        position: 'relative', width: '100%', aspectRatio: '1 / 1',
        border: '1px solid var(--border-gold)', overflow: 'hidden',
      }}>
        <img src="assets/album-cover.jpg" alt="Drakharon — álbum debut" style={{
          width: '100%', height: '100%', objectFit: 'cover', display: 'block',
        }} />
      </div>
    </div>
  );
}

function TrackRow({ num, title, dur, trackId, open, onToggle }) {
  const [h, setH] = React.useState(false);
  const active = h || open;
  const src = 'https://bandcamp.com/EmbeddedPlayer/album=' + DK_ALBUM_ID +
    '/size=small/bgcol=111111/linkcol=c8a84b/track=' + trackId + '/transparent=true/';
  return (
    <div style={{ borderBottom: '1px solid var(--border)' }}>
      <div onClick={onToggle} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        role="button" aria-expanded={open} title={open ? 'Cerrar' : 'Reproducir'}
        style={{
          display: 'flex', alignItems: 'center', gap: 20, padding: '16px 22px', cursor: 'pointer',
          background: active ? 'rgba(200,168,75,0.06)' : 'var(--surface)',
          transition: 'background var(--dur) var(--ease)',
        }}>
        <span style={{
          width: 26, textAlign: 'center', color: 'var(--gold)', fontSize: 14,
          fontFamily: 'var(--font-display)', letterSpacing: '0.06em',
        }}>{open ? '‖' : (h ? '▸' : num)}</span>
        <span style={{
          flex: 1, fontFamily: 'var(--font-display)', textTransform: 'uppercase',
          letterSpacing: '0.1em', fontSize: 15,
          color: active ? 'var(--gold)' : 'var(--text-primary)',
          transition: 'color var(--dur) var(--ease)',
        }}>{title}</span>
        <span style={{ fontFamily: 'var(--font-body)', color: 'var(--text-muted)', fontSize: 15, minWidth: 44, textAlign: 'right' }}>{dur}</span>
      </div>
      <div style={{
        maxHeight: open ? 100 : 0, overflow: 'hidden',
        transition: 'max-height var(--dur) var(--ease)',
        background: 'var(--surface)',
      }}>
        <div style={{ padding: '18px 22px' }}>
          {open && (
            <iframe title={'Reproductor — ' + title} src={src} seamless
              style={{ border: 0, width: '100%', height: 42, display: 'block' }} />
          )}
        </div>
      </div>
    </div>
  );
}

function PlatformLinks() {
  const platforms = [
    { label: 'YouTube', href: 'https://youtube.com/@drakharon', ready: true },
    { label: 'Bandcamp', href: 'https://drakharon.bandcamp.com', ready: true },
  ];
  return (
    <div className="dk-reveal" style={{ textAlign: 'center', marginTop: 'auto', paddingTop: 'clamp(28px,4vh,40px)' }}>
      <div style={{
        fontFamily: 'var(--font-display)', textTransform: 'uppercase', letterSpacing: '0.28em',
        fontSize: 12, color: 'var(--text-muted)', marginBottom: 22,
      }}>Escúchalo en</div>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr', gap: 12,
        margin: '0 auto',
      }}>
        {platforms.map(p => <PlatformBtn key={p.label} label={p.label} href={p.href} ready={p.ready} />)}
      </div>
    </div>
  );
}

function PlatformBtn({ label, href, ready }) {
  const [h, setH] = React.useState(false);
  if (!ready) {
    return (
      <span title="Próximamente" style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 3,
        fontFamily: 'var(--font-display)', fontWeight: 600, textTransform: 'uppercase',
        letterSpacing: '0.18em', fontSize: 12, padding: '12px 12px',
        border: '1px solid var(--border)', borderRadius: 0,
        background: 'transparent', color: 'var(--text-muted)', cursor: 'default',
      }}>
        {label}
        <span style={{ fontSize: 8.5, letterSpacing: '0.22em', color: 'var(--text-muted)', opacity: 0.8 }}>Próximamente</span>
      </span>
    );
  }
  return (
    <a href={href} target="_blank" rel="noopener noreferrer" onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: 'var(--font-display)', fontWeight: 600, textTransform: 'uppercase',
      letterSpacing: '0.18em', fontSize: 12, padding: '15px 12px', cursor: 'pointer',
      border: '1px solid var(--gold)', borderRadius: 0,
      background: h ? 'var(--gold)' : 'transparent',
      color: h ? 'var(--on-gold)' : 'var(--gold)',
      transition: 'background var(--dur) var(--ease), color var(--dur) var(--ease)',
    }}>{label}</a>
  );
}

Object.assign(window, { Tracks, AlbumCover, TrackRow, PlatformLinks, PlatformBtn });