/* Mobile shell: TopBar, MenuOverlay, BottomCta, FounderPrompt sheet */

const NAV = [
  { 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: "faq",       label: "FAQ" },
];

function Logo({ size = 32 }) {
  return (
    <img
      src="../assets/logo-london-logic-v2.png"
      alt="London LOGIC Basketball"
      width={size} height={size}
      style={{ width: size, height: size, objectFit: "contain", display: "block" }}
      draggable={false}
    />
  );
}

function AnnouncementMarquee() {
  const msg = "London's Premier Basketball Camp · Launching August 2026";
  const items = [msg, msg, msg, msg];
  const seq = [...items, ...items, ...items];
  return (
    <div style={{
      background: "var(--c-red)",
      color: "#fff",
      borderTop: "1px solid rgba(255,255,255,0.08)",
      borderBottom: "1px solid rgba(0,0,0,0.18)",
      padding: "10px 0",
      overflow: "hidden",
      whiteSpace: "nowrap",
      maskImage: "linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)",
      WebkitMaskImage: "linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)",
    }}>
      <div style={{
        display: "inline-flex",
        gap: 28,
        animation: "mqMobile 28s linear infinite",
      }}>
        {seq.map((it, i) =>
          <span key={i} style={{
            fontFamily: "var(--font-display)",
            fontSize: 20,
            letterSpacing: "0.02em",
            textTransform: "uppercase",
            display: "inline-flex",
            alignItems: "center",
            gap: 28,
          }}>
            <span>{it}</span>
            <span style={{ color: "#0a0a0a", fontSize: "0.7em" }}>★</span>
          </span>
        )}
      </div>
      <style>{`@keyframes mqMobile { from { transform: translateX(0) } to { transform: translateX(-33.333%) } }`}</style>
    </div>
  );
}

function TopBar({ onMenu, route }) {
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 40,
      paddingTop: "max(env(safe-area-inset-top, 0px) + 10px, 54px)",
      background: "rgba(10,10,10,0.86)",
      backdropFilter: "saturate(160%) blur(14px)",
      WebkitBackdropFilter: "saturate(160%) blur(14px)",
      borderBottom: "1px solid var(--c-line)",
    }}>
      <AnnouncementMarquee />
      <div style={{
        padding: "12px 18px 14px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
      }}>
      <a href="#home" style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <Logo size={30} />
        <div style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
          <span className="display" style={{ fontSize: 15, letterSpacing: "0.02em" }}>London LOGIC</span>
          <span className="mono" style={{ fontSize: 8.5, color: "var(--c-ink-dim)", marginTop: 3 }}>EST. 2026</span>
        </div>
      </a>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <a href="#register" className="tappable" style={{
          padding: "8px 12px", borderRadius: 999,
          background: "var(--c-red)", color: "#fff",
          fontFamily: "var(--font-mono)", fontSize: 10,
          letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 600,
          display: route === "register" ? "none" : "inline-flex",
          alignItems: "center", gap: 6,
          textDecoration: "none",
        }}>
          Register
        </a>
        <button onClick={onMenu} aria-label="Open menu" className="tappable" style={{
          background: "transparent", border: "none", padding: 8, margin: -8,
          color: "#fff", display: "grid", placeItems: "center",
        }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M3 7h18M3 12h18M3 17h18" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
          </svg>
        </button>
      </div>
      </div>
    </header>
  );
}

function MenuOverlay({ open, route, onGo, onClose }) {
  return (
    <div
      aria-hidden={!open}
      style={{
        position: "fixed", inset: 0, zIndex: 100,
        background: "#0a0a0a",
        transform: open ? "translateY(0)" : "translateY(-101%)",
        transition: "transform 380ms var(--ease-snap)",
        display: "flex", flexDirection: "column",
        paddingTop: "max(env(safe-area-inset-top, 0px), 44px)",
      }}
    >
      <div style={{
        padding: "14px 18px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        borderBottom: "1px solid var(--c-line)",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <Logo size={30}/>
          <span className="display" style={{ fontSize: 15 }}>Menu</span>
        </div>
        <button onClick={onClose} aria-label="Close menu" className="tappable" style={{
          background: "transparent", border: "none", color: "#fff", padding: 8, margin: -8,
          display: "grid", placeItems: "center",
        }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
            <path d="M5 5l14 14M19 5L5 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
          </svg>
        </button>
      </div>

      <nav style={{
        flex: 1, display: "flex", flexDirection: "column",
        padding: "6px 18px 0",
        overflowY: "auto",
      }}>
        {NAV.map((n, i) => {
          const active = route === n.id;
          return (
            <a key={n.id} href={`#${n.id}`} onClick={() => onGo(n.id)} style={{
              display: "flex", alignItems: "center", justifyContent: "space-between",
              padding: "12px 4px",
              borderBottom: i < NAV.length - 1 ? "1px solid var(--c-line)" : "none",
              color: active ? "var(--c-red)" : "#fff",
            }}>
              <span className="display" style={{ fontSize: 24, lineHeight: 1 }}>
                <span style={{ color: "var(--c-red)", fontSize: 13, fontFamily: "var(--font-mono)", marginRight: 10, verticalAlign: 3 }}>
                  0{i + 1}
                </span>
                {n.label}
              </span>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                <path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </a>
          );
        })}
      </nav>

      <div style={{ padding: "16px 18px 22px", borderTop: "1px solid var(--c-line)" }}>
        <div className="eyebrow" style={{ marginBottom: 10 }}>Talk to Coach AD</div>
        <a href="https://calendly.com/coach_ad" target="_blank" rel="noopener noreferrer" className="tappable" style={{
          display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
          padding: "13px 14px", borderRadius: 10,
          background: "var(--c-red)", color: "#fff",
          fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", fontWeight: 600,
          marginBottom: 8,
        }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="1.8"/><path d="M3 9h18M8 3v4M16 3v4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>
          Book a call
        </a>
        <div style={{ display: "flex", gap: 8 }}>
          <a href="mailto:coach_ad@londonlogicbasketball.com" className="tappable" style={{
            flex: 1, padding: "13px 14px", borderRadius: 10,
            background: "transparent", color: "#fff", border: "1px solid var(--c-line)",
            display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
            fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", fontWeight: 600,
          }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M3 7l9 6 9-6M3 7v10a2 2 0 002 2h14a2 2 0 002-2V7M3 7l2-2h14l2 2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
            Email
          </a>
        </div>
      </div>
    </div>
  );
}

function BottomCta({ route, onGo }) {
  // hide on routes where the page has its own primary action
  if (route === "program" || route === "register") return null;
  return (
    <div style={{
      position: "fixed", left: 0, right: 0, bottom: 0, zIndex: 30,
      padding: "12px 14px calc(12px + env(safe-area-inset-bottom, 0px))",
      background: "linear-gradient(0deg, #0a0a0a 60%, rgba(10,10,10,0.6) 100%)",
      pointerEvents: "none",
    }}>
      <button
        className="tappable"
        onClick={() => onGo("program")}
        style={{
          pointerEvents: "auto",
          width: "100%", height: 52, borderRadius: 14,
          background: "var(--c-red)", color: "#fff", border: "none",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "0 18px 0 20px",
          boxShadow: "0 12px 32px rgba(230,24,44,0.45)",
        }}
      >
        <span className="display" style={{ fontSize: 17, letterSpacing: "0.04em" }}>View the Program</span>
        <span style={{
          width: 32, height: 32, borderRadius: 999,
          background: "rgba(0,0,0,0.25)", display: "grid", placeItems: "center",
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M2 7h10M8 3l4 4-4 4" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </span>
      </button>
    </div>
  );
}

function FounderPrompt({ open, onClose }) {
  return (
    <>
      {/* scrim */}
      <div
        onClick={onClose}
        style={{
          position: "fixed", inset: 0, zIndex: 60,
          background: "rgba(0,0,0,0.55)",
          opacity: open ? 1 : 0,
          pointerEvents: open ? "auto" : "none",
          transition: "opacity 280ms var(--ease-snap)",
          backdropFilter: open ? "blur(4px)" : "none",
          WebkitBackdropFilter: open ? "blur(4px)" : "none",
        }}
      />
      {/* sheet */}
      <div
        role="dialog"
        aria-modal="true"
        style={{
          position: "fixed", left: 8, right: 8, bottom: 8, zIndex: 70,
          paddingBottom: "env(safe-area-inset-bottom, 0px)",
          transform: open ? "translateY(0)" : "translateY(120%)",
          transition: "transform 460ms var(--ease-snap)",
        }}
      >
        <div style={{
          background: "var(--c-paper)", border: "1px solid var(--c-line)",
          borderRadius: 22, padding: "20px 20px 22px",
          boxShadow: "0 -10px 40px rgba(0,0,0,0.4)",
        }}>
          <div style={{
            width: 40, height: 4, borderRadius: 999, background: "var(--c-line)",
            margin: "0 auto 16px",
          }}/>
          <div style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
            <div style={{
              width: 54, height: 54, borderRadius: 999, overflow: "hidden",
              flex: "0 0 auto",
              background: "#1a1a1a",
              backgroundImage: "url(../assets/founder-portrait.jpeg)",
              backgroundSize: "cover", backgroundPosition: "center 20%",
              border: "2px solid var(--c-red)",
            }}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="mono" style={{ color: "var(--c-red)", fontSize: 10 }}>Coach AD · Founder</div>
              <div className="display" style={{
                marginTop: 6, fontSize: 22, lineHeight: 1.05, color: "#fff",
              }}>
                Want me to walk you through the program?
              </div>
              <div style={{
                marginTop: 8, color: "var(--c-ink-soft)", fontSize: 13.5, lineHeight: 1.5,
              }}>
                Reach out anytime — I personally answer every parent who has questions about our program.
              </div>
            </div>
          </div>

          <div style={{ display: "flex", gap: 8, marginTop: 18 }}>
            <a
              href="https://calendly.com/coach_ad"
              target="_blank"
              rel="noopener noreferrer"
              onClick={onClose}
              className="tappable"
              style={{
                flex: 2, height: 46, borderRadius: 12,
                background: "var(--c-red)", color: "#fff",
                display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
                fontFamily: "var(--font-display)", fontSize: 14, letterSpacing: "0.06em",
                textTransform: "uppercase",
              }}
            >
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="1.8"/><path d="M3 9h18M8 3v4M16 3v4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>
              Book a call
            </a>
            <a
              href="mailto:coach_ad@londonlogicbasketball.com?subject=London%20LOGIC%20-%20Program%20Question"
              onClick={onClose}
              className="tappable"
              style={{
                flex: 1, height: 46, borderRadius: 12,
                background: "transparent", color: "#fff",
                border: "1px solid var(--c-line)",
                display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
                fontFamily: "var(--font-display)", fontSize: 14, letterSpacing: "0.06em",
                textTransform: "uppercase",
              }}
            >
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M3 7l9 6 9-6M3 7v10a2 2 0 002 2h14a2 2 0 002-2V7M3 7l2-2h14l2 2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
              Email
            </a>
          </div>

          <button
            onClick={onClose}
            style={{
              width: "100%", marginTop: 10, height: 38,
              background: "transparent", border: "none", color: "var(--c-ink-soft)",
              fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em",
              textTransform: "uppercase",
            }}
          >
            Maybe later
          </button>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { NAV, Logo, TopBar, MenuOverlay, BottomCta, FounderPrompt });