// running/src/loginScreen.jsx — slice 2 of the module split.
//
// The signed-out screen. Props-only (onSuccess/error come from App),
// no data-layer dependencies — which makes it the loading-order stress
// test: it is the FIRST thing rendered on a cold visit, so if slice
// wiring ever breaks, this screen breaks loudly rather than subtly.

const { C } = window.SharedUI;

    function LoginScreen({ onSuccess, error }) {

      return (
        <div style={{
          minHeight:"100vh", background: C.bg0,
          display:"flex", alignItems:"center", justifyContent:"center",
        }}>
          {/* Background grid */}
          <div style={{
            position:"fixed", inset:0, zIndex:0,
            backgroundImage:`linear-gradient(${C.border}30 1px, transparent 1px), linear-gradient(90deg, ${C.border}30 1px, transparent 1px)`,
            backgroundSize:"40px 40px",
          }}/>

          <div style={{ position:"relative", zIndex:1, textAlign:"center", maxWidth: 400, padding: 40 }}>
            {/* Logo */}
            <div style={{ marginBottom: 32 }}>
              <div style={{ fontSize: 64, fontFamily:"'Space Grotesk', sans-serif", fontWeight: 900, color: C.cyan, lineHeight: 1 }}>
                chris<span style={{ color: C.green }}>.</span>run
              </div>
              <div style={{ fontSize: 14, color: C.textMuted, marginTop: 8, letterSpacing:"0.1em" }}>
                AI-powered run coaching
              </div>
            </div>

            {/* Feature pills */}
            <div style={{ display:"flex", gap: 8, justifyContent:"center", flexWrap:"wrap", marginBottom: 40 }}>
              {["Strava sync", "Claude coaching", "Nutrition AI", "Race planning"].map(f => (
                <span key={f} style={{
                  background: C.bg2, border:`1px solid ${C.border}`,
                  borderRadius: 20, padding:"4px 12px", fontSize: 11, color: C.textDim
                }}>{f}</span>
              ))}
            </div>

            {error && (
              <div style={{ background:`${C.red}18`, border:`1px solid ${C.red}40`, borderRadius: 8, padding:"10px 16px", marginBottom: 20, color: C.red, fontSize: 13 }}>
                {error}
              </div>
            )}

            <button onClick={onSuccess} style={{
              display:"flex", alignItems:"center", gap:12, padding:"12px 32px",
              background:"#fff", color:"#333", border:"none", borderRadius:4,
              fontSize:14, fontWeight:500, cursor:"pointer", margin:"0 auto",
              fontFamily:"'Roboto', sans-serif",
            }}>
              <img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" width="18" height="18" alt="G"/>
              Sign in with Google
            </button>

            <div style={{ marginTop: 20, fontSize: 11, color: C.textMuted }}>
              Private access only
            </div>
          </div>
        </div>
      );
    }

    // ─────────────────────────────────────────────────────────────────────────
    // STRAVA CONNECT
    // ─────────────────────────────────────────────────────────────────────────

window.AppViews = Object.assign(window.AppViews || {}, { LoginScreen });