// Footer.jsx — sello + tagline, sin contenido inventado
function Footer() {
  return (
    <footer style={{
      background: 'var(--bg)', borderTop: '1px solid var(--border)',
      padding: 'clamp(56px,9vh,96px) 24px 44px', textAlign: 'center',
    }}>
      <div className="dk-reveal">
        <div style={{ color: 'var(--gold)', fontSize: 18, marginBottom: 24 }}>✦</div>
        <img src="assets/logo-drakharon.png" alt="Drakharon" style={{ height: 84, marginBottom: 28 }} />
        <p style={{
          fontFamily: 'var(--font-body)', fontStyle: 'italic', fontSize: 19,
          color: 'var(--silver)', maxWidth: 560, margin: '0 auto 32px', lineHeight: 1.5,
        }}>«Mientras canten su nombre, Drakharon no estará muerto.»</p>
        <div style={{ maxWidth: 300, margin: '0 auto 28px' }}><Divider width={300} /></div>
        <div style={{
          fontFamily: 'var(--font-display)', textTransform: 'uppercase', letterSpacing: '0.22em',
          fontSize: 11, color: 'var(--text-muted)',
        }}>Drakharon · Álbum debut · MMXXVI</div>
        <div style={{ marginTop: 16 }}>
          <FootLink href="aviso-legal.html" label="Aviso legal" />
        </div>
      </div>
    </footer>
  );
}

function FootLink({ href, label }) {
  const [h, setH] = React.useState(false);
  return (
    <a href={href} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{
      fontFamily: 'var(--font-display)', textTransform: 'uppercase', letterSpacing: '0.2em',
      fontSize: 11, cursor: 'pointer', color: h ? 'var(--gold)' : 'var(--text-muted)',
      transition: 'color var(--dur) var(--ease)',
    }}>{label}</a>
  );
}

Object.assign(window, { Footer });