// Hero — full-bleed cinematic banner; logo lives in the header above now
const NikkiHero = ({ tagline }) => {
  return (
    <section className="nr-hero" id="top" data-screen-label="Hero">
      <div className="nr-hero-media">
        <img src="assets/nikki-hero.jpg" alt="Nikki Riker reading Moonlit Thirst in a candlelit library" />
        <div className="nr-hero-vignette" aria-hidden="true" />
        <div className="nr-hero-grain" aria-hidden="true" />
      </div>

      <div className="nr-hero-chrome">
        <div className="nr-hero-bottom">
          <p className="nr-tagline">{tagline}</p>

          <div className="nr-hero-actions">
            <a href="#freebook" className="nr-btn nr-btn-primary">
              <span>Claim your free book</span>
              <svg width="14" height="10" viewBox="0 0 14 10" aria-hidden="true">
                <path d="M1 5h12M9 1l4 4-4 4" stroke="currentColor" strokeWidth="1.3" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </a>
            <a href="https://nikkiriker-shop.fourthwall.com" target="_blank" rel="noopener noreferrer" className="nr-btn nr-btn-ghost">
              <span>Enter the shop</span>
            </a>
          </div>
        </div>

      </div>

      <div className="nr-smoke" aria-hidden="true">
        <div className="nr-smoke-puff nr-smoke-1" />
        <div className="nr-smoke-puff nr-smoke-2" />
      </div>
    </section>
  );
};

window.NikkiHero = NikkiHero;