// Band.jsx — real members with vignetted portraits
function Band() {
  const members = [
    ['aelric', 'Aelric el Cuervo', 'Voz Principal', 'Custodio de la memoria del norte caído. Su voz es el juramento.'],
    ['drakhan', 'Drakhan Bramaforja', 'Guitarra Solista', 'Forjado en las Montañas del Trueno. Sus manos conocen el hierro y las cuerdas.'],
    ['riven', 'Riven Tres-Dedos', 'Segunda Guitarra', 'Espadachín que cambió el acero por las cuerdas. Veloz, impredecible.'],
    ['brennir', 'Brennir Lobo-de-Hierro', 'Bajo', 'El ancla del norte. Cuando toca, la tierra tiembla.'],
    ['mord', 'Mörd Mata-Reyes', 'Batería', 'Un soldado que expía cantando lo que no puede deshacer.'],
  ];
  return (
    <Section id="banda">
      <SectionHead eyebrow="Los Cinco" title="La Banda" />
      <div className="dk-band-grid">
        {members.map((m) => <Member key={m[0]} img={m[0]} name={m[1]} role={m[2]} bio={m[3]} />)}
      </div>
    </Section>
  );
}

function Member({ img, name, role, bio }) {
  const [h, setH] = React.useState(false);
  return (
    <div className="dk-band-card dk-reveal" onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        background: 'var(--surface)', display: 'flex', flexDirection: 'column',
        border: '1px solid ' + (h ? 'var(--border-gold)' : 'var(--border)'),
        transition: 'opacity 0.7s var(--ease), transform 0.7s var(--ease), border-color var(--dur) var(--ease)',
      }}>
      <div style={{ position: 'relative', aspectRatio: '4 / 5', overflow: 'hidden' }}>
        <img src={`assets/band/${img}.jpg`} alt={name} style={{
          width: '100%', height: '100%', objectFit: 'cover', display: 'block',
          filter: h ? 'none' : 'grayscale(0.25)',
          transform: h ? 'scale(1.03)' : 'scale(1)',
          transition: 'transform var(--dur) var(--ease), filter var(--dur) var(--ease)',
        }} />
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, transparent 45%, rgba(8,8,8,0.85) 100%)',
        }} />
      </div>
      <div style={{ padding: '22px 22px 28px', textAlign: 'center' }}>
        <div style={{
          fontFamily: 'var(--font-display)', textTransform: 'uppercase', letterSpacing: '0.2em',
          fontSize: 10, color: 'var(--gold)', marginBottom: 8,
        }}>{role}</div>
        <div style={{
          fontFamily: 'var(--font-display)', textTransform: 'uppercase', letterSpacing: '0.1em',
          fontSize: 17, fontWeight: 700, color: 'var(--text-primary)', marginBottom: 12, lineHeight: 1.25,
        }}>{name}</div>
        <p style={{ fontSize: 14.5, lineHeight: 1.7, color: 'var(--text-muted)', fontStyle: 'italic', margin: 0 }}>{bio}</p>
      </div>
    </div>
  );
}

Object.assign(window, { Band, Member });