// Auth.jsx — Login, Register, ForgotPassword
const { useState: useAuthState } = React;

// Shared layout: a centered card on a soft tinted background.
const AuthShell = ({ children, side }) => (
  <div style={{
    minHeight: "calc(100vh - 240px)",
    background: "linear-gradient(180deg, var(--bg) 0%, var(--bg-elev-2) 100%)",
    display: "grid",
    gridTemplateColumns: "1fr",
    placeItems: "center",
    padding: "48px 32px",
  }}>
    <div style={{
      display: "grid",
      gridTemplateColumns: "minmax(0, 480px) minmax(0, 440px)",
      gap: 56,
      alignItems: "center",
      maxWidth: 1080,
      width: "100%",
    }}>
      <div style={{
        background: "var(--bg-elev-1)",
        borderRadius: "var(--radius-xl)",
        padding: "40px 44px",
        border: "1px solid var(--border-soft)",
        boxShadow: "var(--elev-2)",
      }}>{children}</div>
      <div>{side}</div>
    </div>
  </div>
);

// Reused side panel — brand block with bullets
const AuthSidePanel = ({ title, bullets }) => (
  <div style={{ color: "var(--fg-strong)" }}>
    <img src="../../assets/allen_black_letter_logo.svg" alt="Allen" style={{ height: 32, marginBottom: 28 }} />
    <h2 className="display-sm" style={{ marginBottom: 14 }}>{title}</h2>
    <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
      {bullets.map((b, i) => (
        <li key={i} style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
          <span style={{ flexShrink: 0, width: 28, height: 28, borderRadius: 14, background: "var(--primary-soft)", color: "var(--primary-press)", display: "grid", placeItems: "center" }}>
            <AllenIcon name={b.icon} size={16} color="var(--primary-press)" />
          </span>
          <div>
            <div style={{ font: "600 14px var(--font-sans)", color: "var(--fg-strong)" }}>{b.title}</div>
            <div style={{ font: "400 13px/1.5 var(--font-sans)", color: "var(--fg-muted)", marginTop: 2 }}>{b.sub}</div>
          </div>
        </li>
      ))}
    </ul>
  </div>
);

// Form primitives
const Field = ({ label, hint, error, children }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
    <label style={{ font: "600 13px var(--font-sans)", color: "var(--fg-strong)" }}>{label}</label>
    {children}
    {hint && !error && <span style={{ font: "400 12px var(--font-sans)", color: "var(--fg-subtle)" }}>{hint}</span>}
    {error && <span style={{ font: "500 12px var(--font-sans)", color: "var(--error)" }}>{error}</span>}
  </div>
);

const inputStyle = {
  padding: "12px 14px",
  border: "1.5px solid var(--border-strong)",
  borderRadius: "var(--radius-input)",
  font: "400 14px var(--font-sans)",
  background: "var(--bg-elev-1)",
  color: "var(--fg-strong)",
  outline: "none",
  transition: "border-color var(--dur-fast)",
};

const TextInput = (props) => (
  <input
    {...props}
    style={{ ...inputStyle, ...props.style }}
    onFocus={e => { e.target.style.borderColor = "var(--primary)"; e.target.style.outline = "2px solid var(--primary-soft)"; e.target.style.outlineOffset = "0"; }}
    onBlur={e => { e.target.style.borderColor = "var(--border-strong)"; e.target.style.outline = "none"; }}
  />
);

const PrimaryButton = ({ children, ...p }) => (
  <button {...p} style={{
    background: "var(--primary)", color: "#fff", border: 0,
    padding: "14px 20px", borderRadius: "9999px",
    font: "700 14px var(--font-sans)", cursor: "pointer",
    boxShadow: "var(--elev-cta-blue)",
    transition: "background var(--dur-fast) var(--ease-out-quart)",
    ...p.style,
  }}
  onMouseEnter={e => e.currentTarget.style.background = "var(--primary-hover)"}
  onMouseLeave={e => e.currentTarget.style.background = "var(--primary)"}
  >{children}</button>
);

// ----- Login page -----
const LoginPage = ({ onNav, onLogin }) => {
  const [mode, setMode]   = useAuthState("email"); // 'email' | 'phone'
  const [email, setEmail] = useAuthState("");
  const [pass, setPass]   = useAuthState("");
  const [show, setShow]   = useAuthState(false);
  const [phone, setPhone] = useAuthState("");
  const [otpSent, setOtpSent] = useAuthState(false);
  const [otp, setOtp] = useAuthState(["", "", "", "", "", ""]);
  const [resendIn, setResendIn] = useAuthState(0);
  const [error, setError] = useAuthState(null);
  const toast = useToast();

  // OTP resend countdown
  React.useEffect(() => {
    if (resendIn <= 0) return;
    const t = setTimeout(() => setResendIn(n => n - 1), 1000);
    return () => clearTimeout(t);
  }, [resendIn]);

  const sendOtp = () => {
    // Demo mode: accept any phone, including empty
    setError(null);
    setOtpSent(true);
    setResendIn(45);
    toast(`Código enviado al ${phone || "+52 322 000 0000"}`);
  };

  const verifyOtp = (codeArr) => {
    // Demo mode: accept any (or no) code
    setError(null);
    const last4 = phone.replace(/\D/g, "").slice(-4) || "0000";
    onLogin({ name: `Usuario ${last4}`, phone: phone || "+52 322 000 0000" });
    toast(`¡Hola de nuevo!`);
    onNav("home");
  };

  const onOtpChange = (i, val) => {
    const v = val.replace(/\D/g, "").slice(0, 1);
    const next = [...otp];
    next[i] = v;
    setOtp(next);
    // auto-advance
    if (v && i < 5) {
      const el = document.getElementById(`otp-${i + 1}`);
      el?.focus();
    }
    if (next.every(d => d) && i === 5) verifyOtp(next);
  };
  const onOtpKey = (i, e) => {
    if (e.key === "Backspace" && !otp[i] && i > 0) {
      document.getElementById(`otp-${i - 1}`)?.focus();
    }
  };

  const submit = (e) => {
    e.preventDefault();
    // Demo mode: accept any input
    setError(null);
    const name = email ? email.split("@")[0] : "Invitado";
    onLogin({ name, email: email || "demo@allenmx.com" });
    toast(`¡Hola de nuevo!`);
    onNav("home");
  };

  return (
    <AuthShell side={
      <AuthSidePanel
        title="Bienvenido a Allen."
        bullets={[
          { icon: "verified",      title: "Compra protegida",         sub: "Devolución gratis hasta 30 días en miles de productos." },
          { icon: "local_shipping",title: "Envío gratis +$599",        sub: "A todo México, con seguimiento en tiempo real." },
          { icon: "credit_card",   title: "12 MSI sin intereses",      sub: "Bancos participantes en compras seleccionadas." },
        ]}
      />
    }>
      <div className="label-sm" style={{ color: "var(--primary)" }}>Mi cuenta</div>
      <h1 className="headline-lg" style={{ marginTop: 6 }}>Inicia sesión</h1>
      <p className="body-sm" style={{ marginTop: 6, marginBottom: 20 }}>Usa tu correo o tu teléfono para entrar.</p>

      {/* Mode tabs: Email | Phone */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", background: "var(--bg-elev-2)", borderRadius: "9999px", padding: 4, marginBottom: 20 }}>
        {[
          { id: "email", label: "Correo",   icon: "person" },
          { id: "phone", label: "Teléfono", icon: "support_agent" },
        ].map(t => (
          <button key={t.id}
            onClick={() => { setMode(t.id); setError(null); setOtpSent(false); }}
            style={{
              padding: "10px 16px", borderRadius: "9999px",
              background: mode === t.id ? "var(--bg-elev-1)" : "transparent",
              color: mode === t.id ? "var(--fg-strong)" : "var(--fg-muted)",
              border: 0, font: mode === t.id ? "700 13px var(--font-sans)" : "500 13px var(--font-sans)",
              cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
              boxShadow: mode === t.id ? "var(--elev-1)" : "none",
              transition: "all var(--dur-fast) var(--ease-out-quart)",
            }}>
            <AllenIcon name={t.icon} size={16} /> {t.label}
          </button>
        ))}
      </div>

      {mode === "email" && (
        <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <Field label="Correo electrónico">
            <TextInput type="email" placeholder="tu@correo.com" value={email} onChange={e => setEmail(e.target.value)} autoComplete="email" />
          </Field>
          <Field label="Contraseña">
            <div style={{ position: "relative" }}>
              <TextInput type={show ? "text" : "password"} placeholder="Mínimo 6 caracteres" value={pass} onChange={e => setPass(e.target.value)} style={{ width: "100%", paddingRight: 44 }} autoComplete="current-password" />
              <button type="button" onClick={() => setShow(s => !s)} style={{ position: "absolute", right: 8, top: "50%", transform: "translateY(-50%)", background: "transparent", border: 0, padding: 8, cursor: "pointer", color: "var(--fg-muted)", display: "grid", placeItems: "center" }} aria-label={show ? "Ocultar" : "Mostrar"}>
                <AllenIcon name={show ? "search_off" : "search"} size={16} />
              </button>
            </div>
          </Field>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <label style={{ display: "flex", alignItems: "center", gap: 8, font: "500 13px var(--font-sans)", color: "var(--fg-muted)", cursor: "pointer" }}>
              <input type="checkbox" style={{ accentColor: "var(--primary)", width: 16, height: 16 }} /> Recuérdame
            </label>
            <a onClick={() => onNav("forgot")} style={{ font: "600 13px var(--font-sans)", color: "var(--primary)", cursor: "pointer" }}>¿Olvidaste tu contraseña?</a>
          </div>

          {error && (
            <div style={{ display: "flex", alignItems: "center", gap: 8, background: "var(--error-bg)", color: "var(--error)", padding: "10px 14px", borderRadius: "var(--radius-input)", font: "500 13px var(--font-sans)" }}>
              <AllenIcon name="close" size={16} color="var(--error)" /> {error}
            </div>
          )}

          <PrimaryButton type="submit">Entrar</PrimaryButton>
        </form>
      )}

      {mode === "phone" && !otpSent && (
        <form onSubmit={e => { e.preventDefault(); sendOtp(); }} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <Field label="Número de celular" hint="Te enviamos un código de 6 dígitos por SMS. Sin contraseña.">
            <div style={{ display: "flex", gap: 8 }}>
              <div style={{ ...inputStyle, display: "flex", alignItems: "center", gap: 6, font: "600 14px var(--font-sans)", padding: "12px 14px", flexShrink: 0 }}>
                <span style={{ fontSize: 16 }}>🇲🇽</span> +52
              </div>
              <TextInput
                type="tel" autoComplete="tel" inputMode="numeric"
                placeholder="322 145 2287"
                value={phone} onChange={e => setPhone(e.target.value.replace(/[^\d ]/g, ""))}
                maxLength={13}
                style={{ flex: 1, fontFamily: "var(--font-mono)", letterSpacing: ".05em" }}
              />
            </div>
          </Field>

          {error && (
            <div style={{ background: "var(--error-bg)", color: "var(--error)", padding: "10px 14px", borderRadius: "var(--radius-input)", font: "500 13px var(--font-sans)" }}>{error}</div>
          )}

          <PrimaryButton type="submit">Enviar código</PrimaryButton>

          <div style={{ display: "flex", alignItems: "center", gap: 8, padding: 12, background: "var(--bg-elev-2)", borderRadius: "var(--radius-md)" }}>
            <AllenIcon name="lock" size={16} color="var(--fg-muted)" />
            <span className="body-sm" style={{ fontSize: 12 }}>Tu número está seguro. Solo lo usamos para verificación y entregas.</span>
          </div>
        </form>
      )}

      {mode === "phone" && otpSent && (
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 6, color: "var(--fg-muted)", font: "500 13px var(--font-sans)" }}>
            Código enviado a <strong style={{ color: "var(--fg-strong)" }}>+52 {phone}</strong>
            <button type="button" onClick={() => { setOtpSent(false); setOtp(["", "", "", "", "", ""]); setError(null); }}
              style={{ background: "transparent", border: 0, color: "var(--primary)", font: "700 12px var(--font-sans)", cursor: "pointer", padding: 0, marginLeft: "auto" }}>
              Cambiar número
            </button>
          </div>

          <label style={{ font: "600 13px var(--font-sans)", color: "var(--fg-strong)" }}>Código de 6 dígitos</label>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 8 }}>
            {otp.map((d, i) => (
              <input key={i} id={`otp-${i}`}
                value={d} onChange={e => onOtpChange(i, e.target.value)} onKeyDown={e => onOtpKey(i, e)}
                inputMode="numeric" autoComplete="one-time-code" maxLength={1}
                style={{
                  ...inputStyle,
                  padding: "16px 0", textAlign: "center",
                  font: "700 22px var(--font-mono)", letterSpacing: 0,
                  borderColor: d ? "var(--primary)" : "var(--border-strong)",
                }} />
            ))}
          </div>

          {error && (
            <div style={{ background: "var(--error-bg)", color: "var(--error)", padding: "10px 14px", borderRadius: "var(--radius-input)", font: "500 13px var(--font-sans)" }}>{error}</div>
          )}

          <PrimaryButton onClick={() => verifyOtp()}>Verificar y entrar</PrimaryButton>

          <div style={{ textAlign: "center", font: "500 13px var(--font-sans)", color: "var(--fg-muted)" }}>
            {resendIn > 0 ? (
              <>Reenvía el código en <strong style={{ color: "var(--fg-strong)" }}>{resendIn}s</strong></>
            ) : (
              <a onClick={sendOtp} style={{ color: "var(--primary)", fontWeight: 700, cursor: "pointer" }}>Reenviar código</a>
            )}
          </div>
        </div>
      )}

      <div style={{ display: "flex", alignItems: "center", gap: 12, color: "var(--fg-subtle)", font: "500 12px var(--font-sans)", margin: "20px 0 14px" }}>
        <span style={{ flex: 1, height: 1, background: "var(--border-soft)" }} />
        o continúa con
        <span style={{ flex: 1, height: 1, background: "var(--border-soft)" }} />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
        <button type="button" style={socialBtn}>
          <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.56c2.08-1.92 3.28-4.74 3.28-8.1Z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.56-2.76c-.98.66-2.23 1.06-3.72 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23Z"/><path fill="#FBBC05" d="M5.84 14.1A6.6 6.6 0 0 1 5.5 12c0-.73.13-1.44.34-2.1V7.07H2.18A11 11 0 0 0 1 12c0 1.78.43 3.46 1.18 4.93l3.66-2.84Z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.07.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1A11 11 0 0 0 2.18 7.07l3.66 2.83C6.71 7.31 9.14 5.38 12 5.38Z"/></svg>
          Google
        </button>
        <button type="button" style={socialBtn}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 12.55c0-2.83 2.3-4.18 2.4-4.24-1.31-1.92-3.36-2.18-4.08-2.2-1.74-.18-3.39 1.02-4.27 1.02-.88 0-2.24-1-3.68-.97-1.9.03-3.65 1.1-4.62 2.8-1.97 3.42-.5 8.48 1.42 11.26.93 1.36 2.04 2.89 3.5 2.83 1.4-.06 1.93-.91 3.62-.91 1.69 0 2.17.91 3.66.88 1.51-.03 2.46-1.39 3.39-2.76 1.07-1.58 1.51-3.12 1.53-3.2-.03-.01-2.93-1.12-2.96-4.44Zm-2.8-8.16c.78-.94 1.3-2.25 1.16-3.55-1.12.04-2.48.74-3.28 1.68-.72.83-1.35 2.16-1.18 3.44 1.25.1 2.52-.63 3.3-1.57Z"/></svg>
          Apple
        </button>
      </div>

      <div style={{ marginTop: 18, textAlign: "center", font: "500 13px var(--font-sans)", color: "var(--fg-muted)" }}>
        ¿Aún no tienes cuenta? <a onClick={() => onNav("register")} style={{ color: "var(--primary)", fontWeight: 700, cursor: "pointer" }}>Crea una en 1 minuto</a>
      </div>
    </AuthShell>
  );
};

const socialBtn = {
  background: "var(--bg-elev-1)", color: "var(--fg-strong)", border: "1.5px solid var(--border-strong)",
  padding: "12px 16px", borderRadius: "9999px", font: "700 14px var(--font-sans)",
  display: "flex", alignItems: "center", justifyContent: "center", gap: 10, cursor: "pointer",
  transition: "background var(--dur-fast)",
};

// ----- Register page -----
const RegisterPage = ({ onNav, onLogin }) => {
  const [step, setStep] = useAuthState(1);
  const [form, setForm] = useAuthState({ name: "", email: "", phone: "", pass: "", accept: false, marketing: true });
  const [error, setError] = useAuthState(null);
  const toast = useToast();
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const submit = (e) => {
    e.preventDefault();
    // Demo mode: accept any input
    setError(null);
    onLogin({ name: form.name || "Invitado", email: form.email || "demo@allenmx.com" });
    toast(`¡Bienvenido, ${(form.name || "Invitado").split(" ")[0]}!`);
    onNav("home");
  };

  return (
    <AuthShell side={
      <AuthSidePanel
        title="Crea tu cuenta Allen."
        bullets={[
          { icon: "support_agent", title: "Una sola cuenta",  sub: "Ecommerce, Food, Travel y Experts en una sola sesión." },
          { icon: "verified",      title: "KYC seguro",       sub: "Compras protegidas con verificación de identidad opcional." },
          { icon: "favorite",      title: "Listas y deseos",  sub: "Guarda productos, sigue marcas y recibe alertas de precio." },
        ]}
      />
    }>
      <div className="label-sm" style={{ color: "var(--primary)" }}>Mi cuenta</div>
      <h1 className="headline-lg" style={{ marginTop: 6 }}>Crea tu cuenta</h1>
      <p className="body-sm" style={{ marginTop: 6, marginBottom: 24 }}>Solo necesitamos lo básico. Te toma menos de 1 minuto.</p>

      <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        <Field label="Nombre completo">
          <TextInput placeholder="Bau Andalón" value={form.name} onChange={e => set("name", e.target.value)} />
        </Field>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <Field label="Correo electrónico">
            <TextInput type="email" placeholder="tu@correo.com" value={form.email} onChange={e => set("email", e.target.value)} />
          </Field>
          <Field label="Celular" hint="Opcional. Lo usamos para verificación y entregas.">
            <TextInput type="tel" placeholder="+52 322 000 0000" value={form.phone} onChange={e => set("phone", e.target.value)} />
          </Field>
        </div>
        <Field label="Contraseña" hint="Mínimo 6 caracteres. Combina letras y números.">
          <TextInput type="password" placeholder="••••••••" value={form.pass} onChange={e => set("pass", e.target.value)} />
        </Field>

        <label style={{ display: "flex", alignItems: "flex-start", gap: 10, font: "500 13px/1.5 var(--font-sans)", color: "var(--fg-muted)", cursor: "pointer" }}>
          <input type="checkbox" checked={form.accept} onChange={e => set("accept", e.target.checked)} style={{ accentColor: "var(--primary)", width: 16, height: 16, marginTop: 2 }} />
          <span>Acepto los <a style={{ color: "var(--primary)", fontWeight: 700 }}>Términos</a> y la <a style={{ color: "var(--primary)", fontWeight: 700 }}>Política de Privacidad</a> de Allen.</span>
        </label>
        <label style={{ display: "flex", alignItems: "flex-start", gap: 10, font: "500 13px/1.5 var(--font-sans)", color: "var(--fg-muted)", cursor: "pointer" }}>
          <input type="checkbox" checked={form.marketing} onChange={e => set("marketing", e.target.checked)} style={{ accentColor: "var(--primary)", width: 16, height: 16, marginTop: 2 }} />
          Quiero recibir ofertas y novedades de Allen. Puedes cancelar cuando quieras.
        </label>

        {error && (
          <div style={{ background: "var(--error-bg)", color: "var(--error)", padding: "10px 14px", borderRadius: "var(--radius-input)", font: "500 13px var(--font-sans)" }}>{error}</div>
        )}
        <PrimaryButton type="submit">Crear cuenta</PrimaryButton>
        <div style={{ marginTop: 6, textAlign: "center", font: "500 13px var(--font-sans)", color: "var(--fg-muted)" }}>
          ¿Ya tienes cuenta? <a onClick={() => onNav("login")} style={{ color: "var(--primary)", fontWeight: 700, cursor: "pointer" }}>Inicia sesión</a>
        </div>
      </form>
    </AuthShell>
  );
};

// ----- Forgot password -----
const ForgotPage = ({ onNav }) => {
  const [email, setEmail] = useAuthState("");
  const [sent, setSent] = useAuthState(false);

  return (
    <AuthShell side={
      <AuthSidePanel
        title="¿Olvidaste tu contraseña?"
        bullets={[
          { icon: "lock",          title: "Recuperación segura", sub: "Te enviamos un enlace al correo registrado." },
          { icon: "support_agent", title: "Soporte 24/7",         sub: "Si no recibes el correo en 10 minutos, escríbenos." },
        ]}
      />
    }>
      <a onClick={() => onNav("login")} style={{ font: "600 13px var(--font-sans)", color: "var(--primary)", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 4 }}>
        <AllenIcon name="chevron_right" size={14} style={{ transform: "rotate(180deg)" }} /> Volver a iniciar sesión
      </a>
      <h1 className="headline-lg" style={{ marginTop: 18 }}>Recupera tu contraseña</h1>
      <p className="body-sm" style={{ marginTop: 6, marginBottom: 24 }}>Ingresa tu correo. Te enviamos un enlace para crear una nueva contraseña.</p>

      {!sent ? (
        <form onSubmit={e => { e.preventDefault(); setSent(true); }} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <Field label="Correo electrónico">
            <TextInput type="email" placeholder="tu@correo.com" value={email} onChange={e => setEmail(e.target.value)} />
          </Field>
          <PrimaryButton type="submit">Enviar enlace</PrimaryButton>
        </form>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 16, padding: 20, background: "var(--success-bg)", borderRadius: "var(--radius-md)" }}>
          <AllenIcon name="check_circle" size={28} fill color="var(--success)" />
          <div>
            <div className="title">Revisa tu correo</div>
            <div className="body-sm" style={{ marginTop: 4 }}>Te enviamos un enlace a <strong style={{ color: "var(--fg-strong)" }}>{email}</strong>. Expira en 30 minutos.</div>
          </div>
          <button onClick={() => onNav("login")} style={{ alignSelf: "flex-start", background: "transparent", border: 0, color: "var(--primary)", font: "700 13px var(--font-sans)", cursor: "pointer" }}>Volver a iniciar sesión →</button>
        </div>
      )}
    </AuthShell>
  );
};

window.LoginPage = LoginPage;
window.RegisterPage = RegisterPage;
window.ForgotPage = ForgotPage;
// Form primitives reused by Account and Seller — must be on window because
// each <script type="text/babel"> runs in its own scope.
Object.assign(window, { AuthShell, AuthSidePanel, Field, TextInput, PrimaryButton, inputStyle });