// CardByte Enterprise — Login (split brand panel + form).
const React = window.React;
const Icon = window.CBIcon;

function LoginScreen({ onLogin }) {
  const { Input, Button, Checkbox, DigitalCard } = window.CardByteDesignSystem_069862;
  const A = "../../assets/";
  const [remember, setRemember] = React.useState(true);
  return (
    <div style={{ display: "flex", width: "100%", height: "100%", minHeight: 600, background: "#fff" }}>
      {/* Brand panel */}
      <div style={{ flex: "1 1 46%", background: "radial-gradient(circle at 75% 15%, #1B3E8C, var(--cb-navy) 60%)", color: "#fff", padding: "48px 52px", display: "flex", flexDirection: "column", position: "relative", overflow: "hidden" }}>
        <img src={A + "logo-full.svg"} style={{ height: 30, filter: "brightness(0) invert(1)", alignSelf: "flex-start" }} />
        <div style={{ marginTop: 64, maxWidth: 380 }}>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: 38, fontWeight: 600, lineHeight: 1.15, letterSpacing: "-0.02em", color: "#fff" }}>Networking, reinvented for your enterprise.</h1>
          <p style={{ opacity: 0.78, fontSize: 15.5, marginTop: 16, lineHeight: 1.6 }}>Save, organise, share and manage every contact your business meets — paired with a digital business card for every employee.</p>
        </div>
        <div style={{ marginTop: "auto", transform: "rotate(-4deg)", filter: "drop-shadow(0 24px 50px rgba(0,0,0,.35))" }}>
          <DigitalCard name="Dhruv Kapoor" role="Designer" company="Expresso" theme="blue" width={300} logoSrc={A + "logo-full.svg"} />
        </div>
        <div style={{ position: "absolute", top: -80, right: -80, width: 280, height: 280, borderRadius: "50%", background: "repeating-radial-gradient(circle, rgba(255,255,255,.05) 0 1px, transparent 1px 18px)" }} />
      </div>

      {/* Form panel */}
      <div style={{ flex: "1 1 54%", display: "flex", alignItems: "center", justifyContent: "center", padding: 40 }}>
        <div style={{ width: "100%", maxWidth: 360 }}>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 600, color: "var(--text-strong)" }}>Welcome back</h2>
          <p style={{ color: "var(--text-muted)", fontSize: 14.5, marginTop: 6, marginBottom: 28 }}>Log in to your CardByte Enterprise workspace.</p>
          <form onSubmit={(e) => { e.preventDefault(); onLogin && onLogin(); }} style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <Input label="Work email" type="email" placeholder="you@company.com" iconLeft={<Icon name="mail" size={16} />} defaultValue="aditi@cardbyte.ai" />
            <Input label="Password" type="password" placeholder="••••••••" defaultValue="password" />
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <Checkbox checked={remember} onChange={(e) => setRemember(e.target.checked)} label="Remember me" />
              <a href="#" style={{ fontSize: 13.5, fontWeight: 600 }}>Forgot password?</a>
            </div>
            <Button variant="primary" size="lg" block type="submit">Log in</Button>
          </form>
          <div style={{ textAlign: "center", marginTop: 22, fontSize: 14, color: "var(--text-muted)" }}>
            New to CardByte? <a href="#" style={{ fontWeight: 600 }}>Sign up free</a>
          </div>
        </div>
      </div>
    </div>
  );
}
window.CBLoginScreen = LoginScreen;