/* Minimal utility footer. Research-backed for a small two-pillar site:
   centered, balanced, lightweight. No wide multi-column wall, no empty gaps. */
function Footer() {
  return (
    <footer className="tr-footer tr-footer-min">
      <div className="footer-min-inner">

        <div className="footer-note">
          <span className="footer-note-eyebrow">A note from us</span>
          <p className="footer-note-hook">No one gave us a straight answer. So we built one.</p>
          <p className="footer-note-sub">Real prices, real dates, no spin. Give us a quick chat, and tell us what's missing!</p>
        </div>

        <div className="footer-min-mark">
          <span style={{ color: "var(--tr-amber-400)" }}>[tr]</span> TrainerRegistry
        </div>

        <div className="footer-min-social">
          <a aria-label="Email" href="mailto:hello@trainerregistry.com"><Icon name="mail" size={17} /></a>
          <a aria-label="WhatsApp" href="https://wa.me/971541771709" target="_blank" rel="noopener noreferrer"><Icon name="whatsapp" size={17} /></a>
          <a aria-label="YouTube" href="https://www.youtube.com/@trainerregistry" target="_blank" rel="noopener noreferrer"><Icon name="youtube" size={17} /></a>
          <a aria-label="Instagram" href="https://www.instagram.com/trainerregistry/" target="_blank" rel="noopener noreferrer"><Icon name="instagram" size={17} /></a>
          <a aria-label="Facebook" href="https://www.facebook.com/profile.php?id=61590413745821" target="_blank" rel="noopener noreferrer"><Icon name="facebook" size={17} /></a>
        </div>

        <div className="footer-min-base">
          <span>© 2026 TrainerRegistry</span>
          <span className="footer-min-legal">
            <a>Terms</a>
            <a>Privacy</a>
          </span>
        </div>

      </div>
    </footer>
  );
}

window.Footer = Footer;