/* OrchEcomm — sign-in screen. */
function LoginScreen({ onSignIn }) {
  const I = window.OcIcons;
  const { Input, Button } = window.OrchEcommDesignSystem_091be6;
  return (
    <div style={{ position: "absolute", inset: 0, display: "flex", background: "var(--bg-app)" }}>
      {/* form side */}
      <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
        <div style={{ width: 360, maxWidth: "100%" }}>
          <img src="../../assets/orchecomm-logo.svg" height="32" alt="OrchEcomm" />
          <h1 style={{ font: "var(--type-page-title)", fontSize: "var(--text-2xl)", color: "var(--text-primary)", marginTop: 28 }}>Welcome back</h1>
          <p style={{ font: "var(--type-body)", color: "var(--text-secondary)", marginTop: 6 }}>Sign in to orchestrate your stores.</p>

          <form onSubmit={(e) => { e.preventDefault(); onSignIn(); }} style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 28 }}>
            <Input label="Email" type="email" defaultValue="cristian@evergreengoods.co" iconLeft={<I.Mail size={16} />} />
            <Input label="Password" type="password" defaultValue="••••••••••" iconLeft={<I.Lock size={16} />} />
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <label style={{ display: "inline-flex", alignItems: "center", gap: 8, font: "var(--type-body)", color: "var(--text-secondary)", cursor: "pointer" }}>
                <input type="checkbox" defaultChecked style={{ accentColor: "var(--green-700)", width: 15, height: 15 }} /> Remember me
              </label>
              <a href="#" onClick={(e) => e.preventDefault()} style={{ font: "var(--type-body)", color: "var(--text-link)", fontWeight: 500 }}>Forgot password?</a>
            </div>
            <Button type="submit" variant="primary" size="lg" fullWidth iconRight={<I.ArrowUpRight size={17} />}>Sign in</Button>
          </form>

          <div style={{ display: "flex", alignItems: "center", gap: 12, margin: "22px 0" }}>
            <span style={{ flex: 1, height: 1, background: "var(--border-default)" }} />
            <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>or continue with</span>
            <span style={{ flex: 1, height: 1, background: "var(--border-default)" }} />
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <Button variant="secondary" onClick={onSignIn}>WooCommerce</Button>
            <Button variant="secondary" onClick={onSignIn}>Shopify</Button>
          </div>
        </div>
      </div>

      {/* brand side */}
      <div style={{ flex: 1, background: "linear-gradient(150deg, var(--green-800), var(--green-900))", display: "flex", flexDirection: "column", justifyContent: "center", padding: 56, color: "#fff", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, opacity: 0.5, backgroundImage: "radial-gradient(circle at 1px 1px, rgba(255,255,255,0.14) 1px, transparent 0)", backgroundSize: "26px 26px" }} />
        <div style={{ position: "relative", maxWidth: 420 }}>
          <div style={{ font: "var(--type-eyebrow)", textTransform: "uppercase", letterSpacing: "var(--tracking-caps)", color: "var(--green-300)" }}>The operating layer for e-commerce</div>
          <div style={{ fontSize: 30, fontWeight: 700, lineHeight: 1.2, marginTop: 14, textWrap: "balance" }}>Modular enough to start small. Powerful enough to run everything.</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 32 }}>
            {[["Card", "One dashboard for every store, payment and integration"], ["Image", "On-brand visuals generated automatically from your catalog"], ["Zap", "Modules react to each other's events — no manual wiring"]].map(([ic, txt], i) => {
              const Ic = I[ic];
              return <div key={i} style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <span style={{ width: 34, height: 34, borderRadius: "var(--radius-sm)", background: "rgba(255,255,255,0.12)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><Ic size={18} /></span>
                <span style={{ font: "var(--type-body)", color: "var(--green-100)" }}>{txt}</span>
              </div>;
            })}
          </div>
        </div>
      </div>
    </div>
  );
}
window.LoginScreen = LoginScreen;