const { Icon } = window.AntelopeDashDesignSystem_4664c0;

function SiteFooter() {
  return (
    <footer style={{ background: "var(--slate-900)", color: "var(--slate-400)", padding: "48px 24px", borderTop: "4px solid var(--copper-600)" }}>
      <div style={{ maxWidth: "80rem", margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px,1fr))", gap: 32, alignItems: "center" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <div>
              <h4 style={{ fontFamily: "var(--font-heading)", fontWeight: 700, color: "#fff", fontSize: 18, letterSpacing: "0.05em", margin: 0 }}>ANTELOPE DASH</h4>
              <p style={{ fontSize: 14, margin: "2px 0 0" }}>Curt Gowdy State Park, WY</p>
            </div>
          </div>
          <div style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
            <h4 style={{ fontFamily: "var(--font-heading)", fontWeight: 700, color: "#fff", fontSize: 13, letterSpacing: "0.12em", margin: 0 }}>CONTACT US</h4>
            <a href="mailto:racedirector@antelopedash.org" style={{ color: "var(--slate-400)", textDecoration: "none", fontWeight: 500 }}
               onMouseEnter={(e) => (e.currentTarget.style.color = "var(--copper-400)")}
               onMouseLeave={(e) => (e.currentTarget.style.color = "var(--slate-400)")}>racedirector@antelopedash.org</a>
          </div>
          <div style={{ display: "flex", justifyContent: "center", gap: 24 }}>
            <a href="https://www.facebook.com/AntelopeDash/" target="_blank" rel="noopener noreferrer" aria-label="Facebook" className="ad-social" style={{ color: "inherit", display: "inline-flex" }}>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="24" height="24"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
            </a>
            <a href="https://www.instagram.com/antelopedash/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" className="ad-social" style={{ color: "inherit", display: "inline-flex" }}>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="24" height="24"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
            </a>
          </div>
        </div>
        <div style={{ borderTop: "1px solid var(--slate-800)", marginTop: 48, paddingTop: 32, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16, fontSize: 14 }}>
          <p style={{ margin: 0 }}>© 2026 Antelope Dash Trail Races. All rights reserved.</p>
          <div style={{ display: "flex", gap: 16 }}>
            <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Privacy Policy</a>
            <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Terms of Service</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function MapModal({ open, title, image, onClose }) {
  if (!open) return null;
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", padding: 16, background: "rgba(15,23,42,0.8)", backdropFilter: "blur(4px)" }}>
      <div onClick={(e) => e.stopPropagation()} style={{ background: "#fff", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-xl)", width: "100%", maxWidth: "56rem", maxHeight: "90vh", overflow: "hidden", display: "flex", flexDirection: "column" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: 20, borderBottom: "1px solid var(--slate-100)" }}>
          <h3 style={{ fontFamily: "var(--font-heading)", fontWeight: 700, fontSize: 20, color: "var(--slate-900)", margin: 0 }}>{title}</h3>
          <button onClick={onClose} aria-label="Close" style={{ border: "none", cursor: "pointer", background: "var(--slate-100)", borderRadius: "9999px", padding: 6, display: "inline-flex", color: "var(--slate-500)" }}><Icon name="x" size={22} /></button>
        </div>
        <div style={{ padding: 16, background: "var(--slate-50)", overflow: "auto", display: "flex", justifyContent: "center" }}>
          <img src={`./assets/${image}`} alt={title} style={{ maxHeight: "65vh", maxWidth: "100%", objectFit: "contain", borderRadius: "var(--radius-md)", border: "1px solid var(--slate-200)" }} />
        </div>
        <div style={{ padding: 16, textAlign: "center", fontSize: 14, color: "var(--slate-500)" }}>Click anywhere outside the map to close.</div>
      </div>
    </div>
  );
}
window.SiteFooter = SiteFooter;
window.MapModal = MapModal;