// Login screen — RDB Backstage
// MemberSpace owns ALL authentication. We show a single "Sign In" button that
// opens the MemberSpace login popup (MS_LOGIN_HREF) — no custom email/password
// form, which would conflict with the MemberSpace widget (the widget hijacks the
// email field and swaps in its own button mid-flow). In the design preview the
// widget is inert, so the button falls back to the demo session to stay walkable.
function LoginScreen({ onSignIn }) {
  // Demo bypass is allowed ONLY off the live host (design preview / non-prod).
  // On the live site the button ALWAYS opens the MemberSpace popup — gating on
  // the host (not on whether the widget has loaded yet) closes the bypass where a
  // blocked/slow MemberSpace script would otherwise let the demo session fire.
  const previewMode = !(window.msIsLiveHost && window.msIsLiveHost());

  return (
    <div style={{
      minHeight: "100vh",
      width: "100%",
      background: "linear-gradient(180deg, #0D0D0D 0%, #1A1A1A 100%)",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      padding: "48px 24px",
      position: "relative",
      overflow: "hidden",
    }}>
      {/* corner marquee */}
      <div style={{
        position: "absolute", top: 32, left: 48,
        fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 10,
        letterSpacing: "0.32em", color: "var(--ink-6)", textTransform: "uppercase"
      }}>RDB Hospitality Group · Miami · Orlando</div>
      <div style={{
        position: "absolute", top: 32, right: 48,
        fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-6)"
      }}>v 2.4 · build 88241</div>
      <div style={{
        position: "absolute", bottom: 32, left: 48,
        fontFamily: "var(--font-body)", fontSize: 11, color: "var(--ink-5)"
      }}>Members only · Secured by MemberSpace.</div>
      <div style={{
        position: "absolute", bottom: 32, right: 48,
        fontFamily: "var(--font-body)", fontSize: 11, color: "var(--ink-5)"
      }}>Trouble signing in? <span style={{ color: "var(--rdb-gold)", cursor: "pointer" }}>Contact ops</span>.</div>

      <div style={{
        width: 420,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        gap: 40,
      }}>
        <Logo size={140} />

        <div style={{ width: "100%", display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
          <h1 style={{
            fontFamily: "var(--font-display)",
            fontWeight: 700,
            fontSize: 32,
            letterSpacing: "-0.02em",
            color: "var(--fg-1)",
            margin: 0
          }}>Welcome back.</h1>
          <p style={{
            fontFamily: "var(--font-body)",
            fontSize: 13,
            color: "var(--fg-3)",
            margin: 0,
            textAlign: "center"
          }}>Members only · sign in to access RDB Backstage.</p>
        </div>

        <div style={{ width: "100%", display: "flex", flexDirection: "column", gap: 18 }}>
          {/* MemberSpace owns auth. This is the ONLY sign-in control — it opens the
              invite-only MemberSpace login popup (MS_LOGIN_HREF). No custom email/
              password fields, which would conflict with the MemberSpace widget.
              In the design preview the widget is inert, so we fall back to the demo
              session (onSignIn) so the prototype stays walkable. */}
          <a
            href={previewMode ? undefined : (window.MS_LOGIN_HREF || "?msopen=/member/sign_in")}
            onClick={previewMode ? (e) => { e.preventDefault(); onSignIn({ email: "demo@rdbvip.com" }); } : undefined}
            style={{
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              width: "100%", padding: "16px 28px", background: "#27AAE1", color: "#0D0D0D",
              fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 14, letterSpacing: "0.04em",
              textDecoration: "none", borderRadius: 2, cursor: "pointer",
            }}
          >
            Sign In
          </a>
          <div style={{ textAlign: "center", fontFamily: "var(--font-body)", fontSize: 12, color: "var(--fg-3)" }}>
            Members only · secured by MemberSpace.
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LoginScreen });