// Shop callout — signed paperbacks (Fourthwall)
// Kept intentionally simple: one focus, one ask. Expand to a full grid
// when there's actual inventory beyond paperbacks.
const NikkiShop = () => {
  return (
    <section className="nr-shop" id="shop" data-screen-label="Shop">
      <a
        href="https://nikkiriker-shop.fourthwall.com"
        target="_blank"
        rel="noopener noreferrer"
        className="nr-shop-card"
      >
        <div className="nr-shop-copy">
          <span className="nr-eyebrow">The Shop</span>
          <h2 className="nr-section-head">
            Signed paperbacks,<br/>
            <em>straight from her desk.</em>
          </h2>
          <p>
            Personally signed editions of the Midnight Riders series &mdash;
            shipped worldwide via Fourthwall. A piece of the story for your shelf.
          </p>
          <span className="nr-btn nr-btn-gold">
            <span>Enter the shop</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>
          </span>
        </div>
        <div className="nr-shop-feature" aria-hidden="true">
          <div className="nr-shop-feature-inner">
            <span className="nr-tile-glyph">✦</span>
            <span className="nr-tile-label">Signed editions</span>
            <span className="nr-shop-feature-note">Limited quantities</span>
          </div>
        </div>
      </a>
    </section>
  );
};

window.NikkiShop = NikkiShop;