// Hero.jsx — full-bleed cinematic opener; stacks to show full band photo on mobile
function Hero({ onNav }) {
  return (
    <header id="top" className="dk-hero">
      <div className="dk-hero-bg">
        <div className="dk-hero-fade-sides"></div>
        <div className="dk-hero-fade-v"></div>
      </div>
      <div className="dk-hero-content dk-hero-in">
        <img src="assets/logo-drakharon.png" alt="Drakharon" style={{ height: 'clamp(96px,18vh,180px)', width: 'auto', marginBottom: 26 }} />
        <div style={{
          fontFamily: 'var(--font-display)', fontWeight: 600, textTransform: 'uppercase',
          letterSpacing: '0.35em', fontSize: 13, color: 'var(--gold)', marginBottom: 26,
        }}>✦ &nbsp;Álbum debut · MMXXVI&nbsp; ✦</div>
        <p style={{
          fontFamily: 'var(--font-body)', fontStyle: 'italic', fontSize: 'clamp(20px,2.8vw,30px)',
          color: 'var(--text-primary)', maxWidth: 680, margin: '0 auto 40px', lineHeight: 1.5,
        }}>«Mientras canten su nombre, Drakharon no estará muerto.»</p>
        <div style={{ display: 'flex', gap: 18, justifyContent: 'center', flexWrap: 'wrap' }}>
          <HeroBtn onClick={() => onNav && onNav('album')}>Escuchar el álbum</HeroBtn>
          <HeroBtn ghost onClick={() => onNav && onNav('mundo')}>Entrar al mundo</HeroBtn>
        </div>
      </div>
      <div className="dk-scrollcue" style={{
        position: 'absolute', bottom: 26, left: '50%', transform: 'translateX(-50%)',
        color: 'var(--text-muted)', fontFamily: 'var(--font-display)', fontSize: 11,
        letterSpacing: '0.3em', textTransform: 'uppercase', zIndex: 2,
      }}>Desciende ▾</div>
    </header>
  );
}

function HeroBtn({ children, ghost, onClick }) {
  const [h, setH] = React.useState(false);
  const base = {
    fontFamily: 'var(--font-display)', fontWeight: 600, textTransform: 'uppercase',
    letterSpacing: '0.22em', fontSize: 13, padding: '16px 34px', cursor: 'pointer',
    border: '1px solid', borderRadius: 0,
    transition: 'background var(--dur) var(--ease), color var(--dur) var(--ease)',
  };
  const color = ghost ? 'var(--silver)' : 'var(--gold)';
  const bcolor = ghost ? 'var(--silver)' : 'var(--gold)';
  return (
    <button onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{
      ...base,
      background: h ? color : 'rgba(8,8,8,0.35)',
      color: h ? 'var(--on-gold)' : color,
      borderColor: bcolor,
    }}>{children}</button>
  );
}

Object.assign(window, { Hero, HeroBtn });