/* App shell: Nav, Footer, Hash router. */

const ROUTES = [
{ id: "home", label: "Home" },
{ id: "program", label: "Program" },
{ id: "divisions", label: "Divisions" },
{ id: "camp", label: "August Camp" },
{ id: "scholarship", label: "Scholarships" },
{ id: "merch", label: "Merch" },
{ id: "sponsors", label: "Community Partners" },
  { id: "about", label: "The Founder" },
  { id: "contact", label: "Contact" },
  { id: "faq", label: "FAQ" }];


function useHashRoute() {
  const get = () => window.location.hash.replace("#", "").split("?")[0] || "home";
  const [r, setR] = React.useState(get());
  React.useEffect(() => {
    const onHash = () => {
      setR(get());
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  return [r, (id) => {window.location.hash = id;}];
}

function Nav({ route, go }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 6);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  // close on route change
  React.useEffect(() => {setMenuOpen(false);}, [route]);
  // lock body scroll + esc-to-close while menu open
  React.useEffect(() => {
    if (!menuOpen) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const onKey = (e) => {if (e.key === "Escape") setMenuOpen(false);};
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener("keydown", onKey);
    };
  }, [menuOpen]);

  return (
    <React.Fragment>
    <header style={{
      position: "sticky",
      top: 0,
      zIndex: 40,
      backdropFilter: "blur(10px)",
      background: scrolled ?
      "color-mix(in oklab, var(--c-bg) 86%, transparent)" :
      "transparent",
      borderBottom: scrolled ? "1px solid var(--c-line)" : "1px solid transparent",
      transition: "all 200ms ease"
    }}>
      <div className="container" style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        gap: 24,
        padding: "16px 0 14px"
      }}>
        <a href="#home" style={{ display: "inline-flex" }} aria-label="London LOGIC Basketball — home">
          <LogoMark size={48} />
        </a>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <a href="#register" style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            padding: "11px 18px",
            background: "var(--c-red)", color: "#fff",
            borderRadius: 999,
            fontFamily: "var(--font-display)",
            letterSpacing: "0.06em",
            textTransform: "uppercase",
            fontSize: 14
          }}>Register <Arrow /></a>
          <button onClick={() => setMenuOpen(true)} aria-label="Open menu"
          style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            background: "transparent", border: "1px solid var(--c-line)",
            padding: "10px 16px 10px 14px", height: 42, borderRadius: 999,
            color: "var(--c-ink)"
          }}>
            <svg width="18" height="18" viewBox="0 0 18 18"><path d="M3 5h12M3 9h12M3 13h12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></svg>
            <span className="mono" style={{ fontSize: 12 }}>Menu</span>
          </button>
        </div>
      </div>
    </header>
    <NavMenu open={menuOpen} route={route} onClose={() => setMenuOpen(false)} />
    </React.Fragment>);

}

function NavMenu({ open, route, onClose }) {
  return (
    <div aria-hidden={!open} style={{
      position: "fixed", inset: 0, zIndex: 120,
      background: "var(--c-bg)",
      opacity: open ? 1 : 0,
      visibility: open ? "visible" : "hidden",
      transform: open ? "translateY(0)" : "translateY(-1.5%)",
      transition: "opacity 320ms ease, transform 380ms cubic-bezier(.2,.7,.2,1), visibility 0s linear " + (open ? "0s" : "380ms"),
      display: "flex", flexDirection: "column",
    }}>
      {/* menu header — mirrors the site header */}
      <div className="container" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: 24, padding: "16px 0 14px",
        borderBottom: "1px solid var(--c-line)",
      }}>
        <a href="#home" onClick={onClose} style={{ display: "inline-flex" }} aria-label="London LOGIC Basketball — home">
          <LogoMark size={48} />
        </a>
        <button onClick={onClose} aria-label="Close menu" style={{
          display: "inline-flex", alignItems: "center", gap: 10,
          background: "transparent", border: "1px solid var(--c-line)",
          padding: "10px 16px 10px 14px", height: 42, borderRadius: 999,
          color: "var(--c-ink)"
        }}>
          <svg width="18" height="18" viewBox="0 0 18 18"><path d="M4 4l10 10M14 4L4 14" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></svg>
          <span className="mono" style={{ fontSize: 12 }}>Close</span>
        </button>
      </div>

      {/* menu body — nav list + contact panel */}
      <div className="container nav-menu-grid" style={{
        flex: 1, minHeight: 0,
        display: "grid",
        gridTemplateColumns: "minmax(0, 1.55fr) minmax(280px, 1fr)",
        gap: "clamp(32px, 6vw, 96px)",
        alignItems: "center",
        padding: "clamp(24px, 4vh, 56px) var(--gutter)",
        overflowY: "auto",
      }}>
        <nav style={{ display: "flex", flexDirection: "column" }}>
          {ROUTES.map((r, i) => {
            const active = route === r.id;
            return (
              <a key={r.id} href={`#${r.id}`} onClick={onClose} className="nav-menu-link" style={{
                display: "flex", alignItems: "baseline", gap: 18,
                padding: "clamp(8px, 1.4vh, 16px) 0",
                borderBottom: i < ROUTES.length - 1 ? "1px solid var(--c-line)" : "none",
                color: active ? "var(--c-red)" : "var(--c-ink)",
              }}>
                <span className="mono" style={{ fontSize: 13, color: "var(--c-red)", flex: "0 0 auto", width: 28 }}>
                  {String(i + 1).padStart(2, "0")}
                </span>
                <span className="display" style={{ fontSize: "clamp(28px, 4.4vw, 58px)", lineHeight: 0.98 }}>
                  {r.label}
                </span>
              </a>);
          })}
        </nav>

        <aside style={{
          alignSelf: "stretch",
          color: "var(--c-ink)",
          display: "flex", flexDirection: "column", justifyContent: "center", gap: 20,
          padding: "clamp(24px, 3vw, 36px)",
          background: "var(--c-paper)",
          border: "1px solid var(--c-line)",
          borderRadius: "var(--radius-card)",
        }}>
          <div className="mono" style={{ color: "var(--c-red)", fontSize: 12 }}>Talk to Coach AD</div>
          <div className="display" style={{ fontSize: "clamp(22px, 2vw, 30px)", lineHeight: 1.02 }}>
            Questions about<br />the program?
          </div>
          <p style={{ margin: 0, color: "var(--c-ink-soft)", fontSize: 14.5, lineHeight: 1.6 }}>
            Coach AD personally answers every parent. Book a call or send a note.
          </p>
          <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 4 }}>
            <a href="https://calendly.com/coach_ad" target="_blank" rel="noopener noreferrer" style={{
              display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
              padding: "13px 16px", borderRadius: 999,
              background: "var(--c-red)", color: "#fff",
              fontFamily: "var(--font-display)", fontSize: 15, letterSpacing: "0.06em", textTransform: "uppercase",
            }}>Book a call <Arrow /></a>
            <a href="#contact" onClick={onClose} style={{
              display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
              padding: "13px 16px", borderRadius: 999,
              background: "transparent", color: "var(--c-ink)", border: "1px solid var(--c-line)",
              fontFamily: "var(--font-display)", fontSize: 15, letterSpacing: "0.06em", textTransform: "uppercase",
            }}>Contact</a>
          </div>
        </aside>
      </div>

      <style>{`
        .nav-menu-link:hover .display { color: var(--c-red); transition: color 140ms ease; }
        @media (max-width: 860px) {
          .nav-menu-grid { grid-template-columns: 1fr !important; align-items: start !important; }
          .nav-menu-grid aside { display: none !important; }
        }
      `}</style>
    </div>);

}

function Footer() {
  return (
    <footer style={{
      background: "#0a0a0a",
      color: "#ffffff",
      marginTop: 80,
      paddingTop: 64,
      paddingBottom: 32
    }}>
      <div className="container" style={{
        display: "grid",
        gridTemplateColumns: "minmax(260px, 1.4fr) repeat(3, 1fr)",
        gap: 40,
        paddingBottom: 56,
        borderBottom: "1px solid rgba(255,255,255,0.12)"
      }} className="footer-grid">
        <div style={{ paddingLeft: 24 }}>
          <LogoMark size={88} />
          <p style={{ marginTop: 18, color: "rgba(255,255,255,0.7)", maxWidth: "32ch", lineHeight: 1.6 }}>
            A development-first basketball academy in London, Ontario. Built by educators.
            We train the body, teach the game, and develop the mind.
          </p>
          <div style={{ display: "flex", gap: 10, marginTop: 22 }}>
            {[
            { id: "instagram", label: "Instagram" },
            { id: "tiktok", label: "TikTok" },
            { id: "youtube", label: "YouTube" }].
            map((s) =>
            <a key={s.id} href="#" aria-label={s.label} style={{
              width: 40, height: 40, borderRadius: 999,
              border: "1px solid rgba(255,255,255,0.18)",
              color: "rgba(255,255,255,0.92)",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              transition: "all 180ms ease"
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = "var(--c-red)";
              e.currentTarget.style.borderColor = "var(--c-red)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = "transparent";
              e.currentTarget.style.borderColor = "rgba(255,255,255,0.18)";
            }}>
                {typeof window.SocialGlyph !== "undefined" ? <window.SocialGlyph id={s.id} size={18} color="#fff" /> : s.label}
              </a>
            )}
          </div>
        </div>

        <FooterCol title="Program" links={[
        ["Philosophy", "program"], ["Divisions", "divisions"], ["Coach AD", "about"], ["FAQ", "faq"]]
        } />
        <FooterCol title="Camps" links={[
        ["August Camp 2026", "camp"], ["Pricing", "camp"], ["Scholarships", "scholarship"], ["Merch", "merch"], ["Register", "register"]]
        } />
        <FooterCol title="Connect" links={[
        ["Community Partners", "sponsors"], ["Contact us", "contact"], ["coach_ad@londonlogicbasketball.com", "contact"], ["London, ON", "contact"]]
        } />
      </div>

      <div className="container" style={{
        display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12,
        marginTop: 24,
        color: "rgba(255,255,255,0.5)",
        fontSize: 12,
        fontFamily: "var(--font-mono)",
        letterSpacing: "0.06em",
        textTransform: "uppercase"
      }}>
        <span>© 2026 London LOGIC Basketball</span>
        <span>Leading Our Generation In Creation</span>
      </div>
    </footer>);

}
function FooterCol({ title, links }) {
  return (
    <div>
      <h4 className="mono" style={{ margin: 0, color: "rgba(255,255,255,0.55)", marginBottom: 16 }}>{title}</h4>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {links.map(([l, to]) =>
        <a key={l} href={`#${to}`} style={{ color: "rgba(255,255,255,0.88)", fontSize: 14 }}>{l}</a>
        )}
      </div>
    </div>);

}

window.useHashRoute = useHashRoute;
window.Nav = Nav;
window.Footer = Footer;