/* 6ix Mela — Direction A hero: centered foil poster, logo on top, pure black + gold */
function Hero({ headline, sub, onTickets, onLineup, accentClass }) {
  return (
    <header className="hero grain">
      <div className="hero-bg"></div>
      <div className="hero-skyline"></div>
      <div className="hero-inner">
        <img className="hero-logo" src="assets/logo-v2.png" alt="6ix Mela" />
        <div className={'eyebrow ' + (accentClass || '')}>Toronto · Sat Sep 12 · '26 · The Bowl at Sobeys Stadium</div>
        <h1 dangerouslySetInnerHTML={{ __html: headline }}></h1>
        <div className="hero-rule"></div>
        <p className="hero-sub">{sub}</p>
        <div className="hero-cta">
          <button className="btn btn-primary btn-lg" onClick={onTickets}>Get Tickets <Icon name="arrow-up-right" size={18} /></button>
          <button className="btn btn-ghost btn-lg" onClick={onLineup}>See The Lineup</button>
        </div>
        <div className="hero-meta">
          <div className="mi"><Icon name="calendar" size={18} /> Sat · Sep 12, 2026</div>
          <div className="mi"><Icon name="clock" size={18} /> Doors 6 PM – 11 PM</div>
          <div className="mi"><Icon name="map-pin" size={18} /> The Bowl · Sobeys Stadium</div>
        </div>
      </div>
      <div className="scrollcue"><Icon name="arrow-down" size={26} /></div>
    </header>
  );
}
window.Hero = Hero;