// Footer.jsx — dark site footer, matches /02-Website footer treatments
const Footer = () => (
  <div className="bee-footer">
    <div className="col">
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
        <img src="../../assets/logo-mark-white.png" alt="" style={{ height: 36 }} />
        <img src="../../assets/wordmark-white.png" alt="beestera" style={{ height: 22 }} />
      </div>
      <p>Developing great players. Better people.<br/>Camps, training and the Beestera app — built around the player.</p>
      <div style={{ display: "flex", gap: 10, marginTop: 14 }}>
        {["IG", "FB", "YT", "TT"].map((s) => (
          <div key={s} style={{ width: 34, height: 34, borderRadius: "50%", background: "rgba(255,255,255,.08)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 700, cursor: "pointer" }}>{s}</div>
        ))}
      </div>
    </div>
    <div className="col">
      <h4>Camps</h4>
      <a>Day camps</a><a>Overnight</a><a>Goalkeeper</a><a>Private training</a>
    </div>
    <div className="col">
      <h4>Company</h4>
      <a>About</a><a>Coaches</a><a>Press</a><a>Careers</a>
    </div>
    <div className="col">
      <h4>Help</h4>
      <a>Support</a><a>Contact</a><a>Refund policy</a><a>FAQs</a>
    </div>
    <div className="copy">
      <span>© 2026 Beestera, Inc. All rights reserved.</span>
      <span>Privacy · Terms · Accessibility</span>
    </div>
  </div>
);

window.Footer = Footer;