// Footer with social links + legal
const NikkiFooter = () => {
  const socials = [
    { label: 'TikTok', href: 'https://www.tiktok.com/@nikkirikerauthor' },
    { label: 'Instagram', href: 'https://www.instagram.com/nikkirikerwriter' },
    { label: 'Facebook', href: 'https://www.facebook.com/authornikkiriker' },
    { label: 'BookBub', href: 'https://www.bookbub.com/authors/nikki-riker' },
    { label: 'Goodreads', href: 'https://www.goodreads.com/nikkiriker' },
    { label: 'YouTube', href: 'https://www.youtube.com/@NikkiRikerAuthor' },
  ];
  return (
    <footer className="nr-footer" data-screen-label="Footer">
      <div className="nr-footer-top">
        <div className="nr-footer-brand">
          <span className="nr-footer-mark">Nikki Riker</span>
        </div>
        <div className="nr-footer-cols">
          <div>
            <span className="nr-footer-heading">Read</span>
            <a href="#freebook">Free eBook</a>
            <a href="https://nikkiriker-shop.fourthwall.com" target="_blank" rel="noopener noreferrer">Shop</a>
            <a href="#about">About</a>
          </div>
          <div>
            <span className="nr-footer-heading">Follow</span>
            {socials.map((s) => (
              <a key={s.href} href={s.href} target="_blank" rel="noopener noreferrer">{s.label}</a>
            ))}
          </div>
          <div>
            <span className="nr-footer-heading">Business</span>
            <a href="mailto:nikki@nikkiriker.com">Contact</a>
          </div>
        </div>
      </div>
      <div className="nr-footer-bottom">
        <span>© {new Date().getFullYear()} Nikki Riker. All rights reserved.</span>
        <span className="nr-footer-sigil">✦ &middot; ☾ &middot; ✦</span>
      </div>
    </footer>
  );
};

window.NikkiFooter = NikkiFooter;