/* login.jsx — White-label login screen */

function LoginScreen({ onLogin }) {
  const [email, setEmail] = useState("operador@demo.com");
  const [password, setPassword] = useState("123456");
  const [loading, setLoading] = useState(false);
  const [showPwd, setShowPwd] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    setLoading(true);
    setTimeout(() => { setLoading(false); onLogin(); }, 700);
  };

  return (
    <div className="min-h-screen flex bg-[var(--bg)] relative overflow-hidden">
      {/* Decorative gradient blobs */}
      <div className="absolute -top-32 -left-32 w-[480px] h-[480px] rounded-full" style={{ background: "radial-gradient(circle, var(--accent-glow), transparent 70%)" }} />
      <div className="absolute -bottom-40 -right-40 w-[520px] h-[520px] rounded-full" style={{ background: "radial-gradient(circle, color-mix(in oklch, var(--accent-2) 30%, transparent), transparent 70%)" }} />

      {/* Left — form */}
      <div className="flex-1 flex flex-col justify-center px-8 sm:px-16 lg:px-24 relative z-10">
        <div className="w-full max-w-[400px] mx-auto">
          <BrandMark />

          <div className="mt-12 mb-1.5 flex items-center gap-2">
            <span className="neon-dot" />
            <span className="text-[10px] uppercase tracking-[0.18em] text-[var(--accent)] font-semibold">Acesso seguro · MFA disponível</span>
          </div>
          <h1 className="text-[32px] font-semibold tracking-tight leading-[1.1]">Bem-vindo de volta</h1>
          <p className="text-[14px] text-[var(--fg-muted)] mt-2">Entre com a sua conta corporativa para acessar o painel de inteligência comercial.</p>

          <form onSubmit={handleSubmit} className="mt-8 space-y-4">
            <div>
              <label className="text-[11px] uppercase tracking-wider font-medium text-[var(--fg-muted)]">E-mail corporativo</label>
              <div className="relative mt-1.5">
                <Icon name="mail" className="w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2 text-[var(--fg-faint)]" />
                <input
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="input pl-9"
                  placeholder="voce@empresa.com"
                />
              </div>
            </div>

            <div>
              <div className="flex justify-between items-center">
                <label className="text-[11px] uppercase tracking-wider font-medium text-[var(--fg-muted)]">Senha</label>
                <button type="button" className="text-[11px] text-[var(--fg-muted)] hover:text-[var(--accent)] transition-colors">
                  Esqueci minha senha
                </button>
              </div>
              <div className="relative mt-1.5">
                <Icon name="lock" className="w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2 text-[var(--fg-faint)]" />
                <input
                  type={showPwd ? "text" : "password"}
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="input pl-9 pr-10"
                  placeholder="••••••••"
                />
                <button
                  type="button"
                  onClick={() => setShowPwd((s) => !s)}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--fg-faint)] hover:text-[var(--fg)]"
                >
                  <Icon name={showPwd ? "eye-off" : "eye"} className="w-3.5 h-3.5" />
                </button>
              </div>
            </div>

            <button type="submit" disabled={loading} className="btn btn-primary w-full justify-center mt-2 disabled:opacity-60">
              {loading ? <Icon name="loader-2" className="w-4 h-4 animate-spin" /> : <Icon name="arrow-right" className="w-4 h-4" />}
              {loading ? "Validando…" : "Entrar"}
            </button>

            <div className="flex items-center gap-2 px-3 py-2 rounded-lg border border-dashed border-[var(--accent)] bg-[var(--accent-soft)] text-[11px]">
              <Icon name="key-round" className="w-3.5 h-3.5 text-[var(--accent)]" />
              <span className="text-[var(--fg-muted)]">Demo · qualquer e-mail · senha <code className="font-mono font-semibold text-[var(--fg)]">123456</code></span>
            </div>

            <div className="flex items-center gap-3 my-4">
              <div className="flex-1 h-px bg-[var(--border)]" />
              <span className="text-[10px] uppercase tracking-wider text-[var(--fg-faint)]">ou</span>
              <div className="flex-1 h-px bg-[var(--border)]" />
            </div>

            <button type="button" onClick={onLogin} className="btn w-full justify-center">
              <svg className="w-4 h-4" viewBox="0 0 48 48"><path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3c-1.6 4.6-6 8-11.3 8a12 12 0 1 1 0-24c3 0 5.8 1 7.9 3l5.7-5.7C34 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.4-.4-3.5z"/><path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.6 16.1 18.9 13 24 13c3 0 5.8 1 7.9 3l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z"/><path fill="#4CAF50" d="M24 44c5.2 0 9.9-2 13.5-5.2l-6.2-5.3c-2 1.5-4.6 2.5-7.3 2.5-5.2 0-9.6-3.4-11.2-8L6.3 33C9.6 39.4 16.2 44 24 44z"/><path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.1 4.1-3.9 5.5l6.2 5.3c-.4.4 6.6-4.8 6.6-15 0-1.3-.1-2.4-.6-3.3z"/></svg>
              Entrar com Google Workspace
            </button>

            <button type="button" onClick={onLogin} className="btn w-full justify-center">
              <Icon name="building-2" className="w-4 h-4" />
              SSO corporativo · SAML
            </button>
          </form>

          <div className="mt-10 pt-5 border-t border-[var(--border)] flex items-center justify-between text-[11px] text-[var(--fg-faint)]">
            <span>© DashM Group · 2026</span>
            <div className="flex gap-3">
              <a className="hover:text-[var(--fg)]">Termos</a>
              <a className="hover:text-[var(--fg)]">Privacidade</a>
              <a className="hover:text-[var(--fg)]">Status</a>
            </div>
          </div>
        </div>
      </div>

      {/* Right — marketing/feature panel */}
      <div className="hidden lg:flex w-[44%] flex-col justify-center px-12 relative z-10 border-l border-[var(--border)] bg-[var(--panel)]">
        <div className="grid-dots absolute inset-0 opacity-30" />
        <div className="relative max-w-[460px]">
          <div className="flex items-center gap-2 mb-4">
            <span className="badge badge-accent">MVP · Demo</span>
            <span className="badge">Mitryus core</span>
          </div>
          <h2 className="text-[34px] font-semibold tracking-tight leading-[1.05] text-[var(--fg)]">
            Inteligência comercial<br />
            <span className="font-serif italic text-[var(--accent)]">em tempo real,</span><br />
            <span className="text-[var(--fg-muted)]">desenhada pra sua operação.</span>
          </h2>
          <p className="text-[14px] text-[var(--fg-muted)] mt-5 leading-relaxed">
            Plataforma analítica white-label conectada ao seu ERP, com módulos de previsão, ruptura, cobertura e cadastro de pedidos prontos para escalar.
          </p>

          <div className="mt-8 grid grid-cols-2 gap-3">
            {[
              { icon: "line-chart", t: "Previsão de Vendas", d: "horizon 4-12 sem." },
              { icon: "shield-alert", t: "Ruptura & Cobertura", d: "rede + filial" },
              { icon: "megaphone", t: "Campanhas", d: "execução tracking" },
              { icon: "plug", t: "Mitryus", d: "integração nativa" },
            ].map((f) => (
              <div key={f.t} className="rounded-xl border border-[var(--border)] bg-[var(--panel-2)] p-3 hover:border-[var(--accent)] transition-colors group">
                <Icon name={f.icon} className="w-4 h-4 text-[var(--accent)] mb-2" />
                <div className="text-[12px] font-medium">{f.t}</div>
                <div className="text-[10px] text-[var(--fg-faint)] mt-0.5">{f.d}</div>
              </div>
            ))}
          </div>

          <div className="mt-8 p-4 rounded-xl border border-[var(--border)] bg-gradient-to-br from-[var(--panel-2)] via-[var(--panel)] to-[var(--accent-soft)] relative overflow-hidden">
            <div className="absolute -top-10 -right-10 w-32 h-32 rounded-full bg-[var(--accent-glow)] blur-3xl" />
            <div className="flex items-center gap-2 mb-2 relative">
              <div className="w-2 h-2 rounded-full bg-[var(--accent)] pulse-glow" />
              <span className="text-[10px] uppercase tracking-[0.14em] font-semibold text-[var(--accent)]">Live</span>
            </div>
            <div className="text-[12px] font-medium relative">Plataforma de demonstração</div>
            <p className="text-[11px] text-[var(--fg-muted)] mt-1 relative">Todos os dados são fictícios. Use qualquer credencial para entrar — o objetivo é navegar e validar fluxos.</p>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LoginScreen });