/* Shared components for all HTH26 hi-fi pages */

const SITE = {
  dateFull: "Saturday, July 25, 2026",
  dateShort: "July 25, 2026",
  course: "Ely Park Golf Course",
  courseCity: "Binghamton, NY",
  shotgun: "8:30 AM & 3:00 PM Shotgun start",
  format: "4some Captain and Crew",
  contact: "marketing@ghsfcu.com",
};

const Topbar = ({ active }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const close = () => setMenuOpen(false);
  return (
    <nav className="topbar">
      <div className="topbar-inner">
        <a href="/" className="topbar-logo" onClick={close}>
          <img src="assets/logo.png" alt="HTH26" />
          <div className="wordmark">
            Hometown Heroes
            <small>Golf Classic · 2026</small>
          </div>
        </a>
        <div className={`topbar-nav ${menuOpen ? "open" : ""}`}>
          <a href="/#details" aria-current={active === "home" ? "page" : undefined} onClick={close}>Details</a>
          <a href="/#prizes" onClick={close}>Contests</a>
          <a href="/register" aria-current={active === "register" ? "page" : undefined} onClick={close}>Register Team</a>
          <a href="/sponsorships" className={`btn btn-sm ${active === "sponsors" ? "btn-navy" : "btn-red"}`} onClick={close}>
            {active === "sponsors" ? "Sponsoring ✓" : "Sponsor →"}
          </a>
        </div>
        <button
          className={`topbar-menu ${menuOpen ? "open" : ""}`}
          aria-label={menuOpen ? "Close menu" : "Open menu"}
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen(v => !v)}
        ><span /></button>
      </div>
    </nav>
  );
};

const Footer = () => (
  <footer className="footer">
    <div className="footer-inner">
      <div className="footer-brand">
        <img src="assets/logo.png" alt="HTH26" />
        <p>
          The Hometown Heroes Golf Classic is presented by GHS Federal Credit Union, benefiting the Southern Tier Veterans Support Group. 100% of net proceeds stay local.
        </p>
      </div>
      <div className="footer-col">
        <h4>Event</h4>
        <ul>
          <li><a href="/#details">Details</a></li>
          <li><a href="/#prizes">Contests & Prizes</a></li>
          <li><a href="/sponsorships">Sponsorships</a></li>
          <li><a href="/register">Register Team</a></li>
          <li><a href={`mailto:${SITE.contact}`}>Contact</a></li>
        </ul>
      </div>
      <div className="footer-col">
        <h4>Contact</h4>
        <ul>
          <li><a href={`mailto:${SITE.contact}`}>{SITE.contact}</a></li>
          <li><a href="#">Download sponsor packet (PDF)</a></li>
        </ul>
      </div>
    </div>
    <div className="footer-bottom">
      <div>© 2026 GHS Federal Credit Union · All rights reserved</div>
      <div>
        <a href="#" style={{ marginRight: 16 }}>Privacy</a>
        <a href="#">Terms</a>
      </div>
    </div>
  </footer>
);

Object.assign(window, { SITE, Topbar, Footer });