const { Button, Input } = window.GDVExpressDesignSystem_766357;

/* Branded split-screen member sign-in. Left: photo + welcome; right: the form. */
function LoginScreen({ onSignIn }) {
  const [email, setEmail] = React.useState("dana@example.com");
  const [pw, setPw] = React.useState("");
  const submit = (e) => { e.preventDefault(); onSignIn && onSignIn(); };

  return (
    <div style={{ minHeight: "100vh", display: "flex", fontFamily: "var(--font-sans)", background: "#fff" }}>
      {/* Brand panel */}
      <div style={{
        flex: "1.1 1 0", position: "relative", display: "flex", flexDirection: "column", justifyContent: "space-between",
        padding: "40px 48px", color: "#fff", backgroundColor: "var(--navy-800)",
        backgroundImage: "linear-gradient(160deg, rgba(33,58,110,.74), rgba(42,72,136,.6)), url('../../assets/photos/beach-hero.jpg')",
        backgroundSize: "cover", backgroundPosition: "center",
      }}>
        <img src="../../assets/logo/gdv-express-logo-reversed.png" alt="GDV Express" style={{ height: "30px", width: "auto", alignSelf: "flex-start" }} />
        <div style={{ maxWidth: "420px" }}>
          <div style={{ fontSize: "11px", letterSpacing: "0.18em", textTransform: "uppercase", color: "#fff", fontWeight: 700, marginBottom: "12px", opacity: 0.9 }}>Members travel for less</div>
          <h1 style={{ margin: "0 0 14px", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "40px", lineHeight: 1.08, letterSpacing: "-0.02em", textShadow: "0 2px 14px rgba(0,0,0,.3)" }}>Welcome back — your getaways are waiting.</h1>
          <p style={{ margin: 0, fontSize: "15.5px", lineHeight: 1.55, color: "rgba(255,255,255,.92)", textShadow: "0 1px 8px rgba(0,0,0,.35)" }}>
            Sign in to book condos, cruises, tours and more at member rates — and pick up wherever you left off with Gigi, your travel guide.
          </p>
        </div>
        <div style={{ fontSize: "12px", color: "rgba(255,255,255,.8)" }}>A real person from our team is always a tap away.</div>
      </div>

      {/* Form panel */}
      <div style={{ flex: "0.9 1 0", display: "flex", alignItems: "center", justifyContent: "center", padding: "40px 32px" }}>
        <form onSubmit={submit} style={{ width: "100%", maxWidth: "360px" }}>
          <h2 style={{ margin: "0 0 6px", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "26px", color: "var(--navy-800)" }}>Member sign in</h2>
          <p style={{ margin: "0 0 24px", fontSize: "13.5px", color: "var(--muted)" }}>Use the email on your GDV Express membership.</p>

          <div style={{ display: "flex", flexDirection: "column", gap: "14px" }}>
            <Input label="Email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com" />
            <Input label="Password" type="password" value={pw} onChange={(e) => setPw(e.target.value)} placeholder="••••••••" />
          </div>

          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", margin: "14px 0 20px" }}>
            <label style={{ display: "flex", alignItems: "center", gap: "7px", fontSize: "13px", color: "var(--ink-700)", cursor: "pointer" }}>
              <input type="checkbox" defaultChecked style={{ accentColor: "var(--navy-600)", width: "15px", height: "15px" }} /> Remember me
            </label>
            <a href="#" onClick={(e) => e.preventDefault()} style={{ fontSize: "13px", color: "var(--navy-600)", fontWeight: 700, textDecoration: "none" }}>Forgot password?</a>
          </div>

          <Button variant="primary" type="submit" style={{ width: "100%" }}>Sign in</Button>

          <div style={{ display: "flex", alignItems: "center", gap: "12px", margin: "22px 0" }}>
            <span style={{ flex: 1, height: "1px", background: "var(--line)" }}></span>
            <span style={{ fontSize: "11.5px", color: "var(--muted-2)", textTransform: "uppercase", letterSpacing: "0.08em" }}>Need help?</span>
            <span style={{ flex: 1, height: "1px", background: "var(--line)" }}></span>
          </div>

          <div style={{ textAlign: "center", fontSize: "13px", color: "var(--muted)", lineHeight: 1.6 }}>
            Can't find your membership? <a href="#" onClick={(e) => e.preventDefault()} style={{ color: "var(--navy-600)", fontWeight: 700, textDecoration: "none" }}>Look up your Member ID</a><br />
            or <a href="#" onClick={(e) => e.preventDefault()} style={{ color: "var(--navy-600)", fontWeight: 700, textDecoration: "none" }}>chat with Gigi</a>.
          </div>

          <div style={{ textAlign: "center", marginTop: "28px", fontSize: "11.5px", color: "var(--muted-2)" }}>© 2026 GDV Express · A GCI company</div>
        </form>
      </div>
    </div>
  );
}
window.LoginScreen = LoginScreen;