// Login — 480x640 centered

const Ic = ({ size = 16, stroke = 1.75, children }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth={stroke}
       strokeLinecap="round" strokeLinejoin="round">{children}</svg>
);
const IcLogoSm = (p) => <Ic {...p} stroke={2}><path d="M12 2v4"/><path d="M12 18v4"/><path d="M4.93 4.93l2.83 2.83"/><path d="M16.24 16.24l2.83 2.83"/><path d="M2 12h4"/><path d="M18 12h4"/><path d="M4.93 19.07l2.83-2.83"/><path d="M16.24 7.76l2.83-2.83"/></Ic>;
const IcEye    = (p) => <Ic {...p}><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></Ic>;
const IcEyeOff = (p) => <Ic {...p}><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></Ic>;
const IcMail   = (p) => <Ic {...p}><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></Ic>;
const IcLock   = (p) => <Ic {...p}><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></Ic>;

// Brand-color SVGs
const GoogleLogo = () => (
  <svg width="16" height="16" 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.57c2.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.57-2.77c-.99.66-2.25 1.06-3.71 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.83z"/>
    <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z"/>
  </svg>
);
const MicrosoftLogo = () => (
  <svg width="14" height="14" viewBox="0 0 24 24">
    <rect width="10" height="10" x="1" y="1" fill="#F25022"/>
    <rect width="10" height="10" x="13" y="1" fill="#7FBA00"/>
    <rect width="10" height="10" x="1" y="13" fill="#00A4EF"/>
    <rect width="10" height="10" x="13" y="13" fill="#FFB900"/>
  </svg>
);

const Login = () => {
  const [email, setEmail] = React.useState("");
  const [pwd, setPwd]     = React.useState("");
  const [showPwd, setShowPwd] = React.useState(false);

  return (
    <div className="lg-stage" data-screen-label="10 Login">
      <div className="lg-bg" />

      <div className="lg-card">
        {/* Brand */}
        <div className="lg-brand">
          <div className="lg-mark"><IcLogoSm size={18} /></div>
          <span className="lg-brand-name">Copilotoprompter</span>
        </div>

        {/* Heading */}
        <div className="lg-head">
          <h1>Inicia sesión</h1>
          <p>Accede a tu cuenta para sincronizar tus guiones y configuración.</p>
        </div>

        {/* Form */}
        <form className="lg-form" onSubmit={(e) => e.preventDefault()}>
          <label className="lg-field">
            <span className="lg-label">Email</span>
            <div className="lg-input-wrap">
              <IcMail size={14} />
              <input type="email" placeholder="tu@email.com"
                     value={email} onChange={(e) => setEmail(e.target.value)}
                     autoComplete="email" />
            </div>
          </label>

          <label className="lg-field">
            <div className="lg-label-row">
              <span className="lg-label">Contraseña</span>
              <a className="lg-forgot" href="#" onClick={(e) => e.preventDefault()}>
                ¿Olvidaste tu contraseña?
              </a>
            </div>
            <div className="lg-input-wrap">
              <IcLock size={14} />
              <input type={showPwd ? "text" : "password"} placeholder="••••••••"
                     value={pwd} onChange={(e) => setPwd(e.target.value)}
                     autoComplete="current-password" />
              <button type="button" className="lg-eye"
                      onClick={() => setShowPwd((v) => !v)}
                      title={showPwd ? "Ocultar" : "Mostrar"}>
                {showPwd ? <IcEyeOff size={14} /> : <IcEye size={14} />}
              </button>
            </div>
          </label>

          <button className="btn-primary lg-submit" type="submit">
            Iniciar sesión
          </button>
        </form>

        {/* Separator */}
        <div className="lg-sep">
          <span>o</span>
        </div>

        {/* OAuth */}
        <div className="lg-oauth">
          <button className="lg-oauth-btn">
            <GoogleLogo />
            <span>Continuar con Google</span>
          </button>
          <button className="lg-oauth-btn">
            <MicrosoftLogo />
            <span>Continuar con Microsoft</span>
          </button>
        </div>

        {/* Footer */}
        <p className="lg-footer">
          ¿No tienes cuenta?{" "}
          <a href="#" onClick={(e) => e.preventDefault()}>Crear cuenta</a>
        </p>
      </div>
    </div>
  );
};

window.Login = Login;