// Site footer — copyright + social row
const Footer = () => (
  <footer style={{ paddingBottom: 40 }}>
    <div className="divider" />
    <div className="container footer-row" style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      gap: 16, flexWrap: 'wrap',
      paddingTop: 32,
    }}>
      <div style={{ fontSize: 18, color: 'var(--text-muted)' }}>
        BOBAFRIENDS © 2020. All Rights Reserved.
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        {[
          { Icon: Icon.Mail, href: 'mailto:hello@bobafriends.com', label: 'Email' },
          { Icon: Icon.Twitter, href: 'https://x.com/bobahooligan', label: 'Twitter' },
          { Icon: Icon.Instagram, href: 'https://www.instagram.com/bobafriends.ig/', label: 'Instagram' },
          { Icon: Icon.TikTok, href: 'https://bobafriends.net/', label: 'TikTok' },
        ].map(({ Icon: I, href, label }) => (
          <a key={label} href={href} aria-label={label} target="_blank" rel="noopener noreferrer" style={{
            width: 44, height: 44, borderRadius: '50%',
            background: 'var(--brand-black)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            color: '#fff',
            transition: 'transform 160ms ease',
          }}
          onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform = 'none'; }}
          >
            <I style={{ width: 18, height: 18 }} />
          </a>
        ))}
      </div>
    </div>
  </footer>
);

window.Footer = Footer;