/** Hero.jsx — title band with wordmark + mood + CTA */
function Hero({ mood = 'Skeptical' }) {
  return (
    <section className="rc-hero">
      <div className="rc-hero-inner">
        <div style={{display:'inline-block', background:'var(--royal-gold-500)', color:'var(--ink-900)', border:'2px solid var(--ink-900)', padding:'5px 14px', borderRadius:999, fontFamily:'var(--font-ui)', fontWeight:700, fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase', boxShadow:'2px 2px 0 var(--ink-900)'}}>
          ✦ Dispatch CCXIV
        </div>
        <h1>Milo's Royal Chronicles</h1>
        <div className="rc-hero-sub">Daily dispatches from His Royal Fluffiness</div>
        <div style={{display:'flex', gap:12, justifyContent:'center', marginTop:18}}>
          <button className="btn btn-gold">Read Today's Decree</button>
          <button className="btn btn-ghost">Browse the Archive</button>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;