// ═══════════════════════════════════════════════════════════════
// SCREEN · Login · design humanizado, minimalista e limpo
// Desktop: parede de polaroids animadas (espírito de equipe) com
//          formulário glass à direita.
// Mobile : banner com foto da equipe + formulário.
// ═══════════════════════════════════════════════════════════════

// Fotos reais da equipe · assets/equipe-1.jpg ... equipe-9.jpg
const POLAROIDS_LOGIN = [
  'assets/equipe-1.jpg',
  'assets/equipe-2.jpg',
  'assets/equipe-3.jpg',
  'assets/equipe-4.jpg',
  'assets/equipe-5.jpg',
  'assets/equipe-6.jpg',
  'assets/equipe-7.jpg',
  'assets/equipe-8.jpg',
  'assets/equipe-9.jpg',
];
// Divide as 9 fotos entre as 2 linhas pra evitar repetição
const POLAROIDS_LINHA_1 = POLAROIDS_LOGIN.slice(0, 5);
const POLAROIDS_LINHA_2 = POLAROIDS_LOGIN.slice(5);

// Uma polaroid individual · moldura branca, foto quadrada, sem legenda.
function Polaroid({ src, rot, swayDelay, size = 230 }) {
  const [err, setErr] = useState(false);
  return (
    <div style={{
      flex: '0 0 auto',
      width: size,
      margin: '24px 26px',
      animation: `polaroid-sway 7s ease-in-out ${swayDelay}s infinite`,
      willChange: 'transform',
    }}>
      <div style={{
        transform: `rotate(${rot}deg)`,
        background: '#FBFAF5',
        padding: 10,
        paddingBottom: 22,
        borderRadius: 3,
        boxShadow: '0 22px 50px rgba(0,0,0,.55), 0 8px 16px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.05) inset',
      }}>
        <div style={{
          width: '100%',
          aspectRatio: '1 / 1',
          background: 'linear-gradient(135deg, #E0F4EC 0%, #B6E3D2 60%, #8ECFB7 100%)',
          overflow: 'hidden',
          position: 'relative',
          borderRadius: 1,
        }}>
          {!err && (
            <img
              src={src}
              alt=""
              onError={() => setErr(true)}
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', userSelect: 'none' }}
              draggable={false}
            />
          )}
          {err && (
            <div style={{
              position: 'absolute', inset: 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#00735A',
            }}>
              <Icon name="users" size={48} />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// Linha rolante de polaroids · recebe a sub-lista de fotos.
function PolaroidRow({ fotos, direction = 'left', speed = 90, rotSeed = 0 }) {
  // duplica só uma vez pro loop seamless
  const lista = [...fotos, ...fotos];
  return (
    <div
      aria-hidden="true"
      style={{
        display: 'flex',
        width: 'max-content',
        animation: `polaroid-marquee-${direction} ${speed}s linear infinite`,
        willChange: 'transform',
      }}
    >
      {lista.map((src, i) => {
        const rot = ((Math.sin((i + 1) * 1.7 + rotSeed) * 7) | 0);
        const swayDelay = ((i * 0.43) % 6);
        return <Polaroid key={i} src={src} rot={rot} swayDelay={swayDelay} />;
      })}
    </div>
  );
}

// Parede completa de polaroids (background do login desktop)
function PolaroidsLoginBg() {
  return (
    <div
      aria-hidden="true"
      style={{
        position: 'absolute', inset: 0, zIndex: 0,
        overflow: 'hidden',
        display: 'flex', flexDirection: 'column',
        justifyContent: 'center',
        gap: 14,
        opacity: 0,
        animation: 'polaroid-zoom-in 1.4s var(--ease-out) .15s forwards',
      }}
    >
      <PolaroidRow fotos={POLAROIDS_LINHA_1} direction="left"  speed={95}  rotSeed={0}   />
      <PolaroidRow fotos={POLAROIDS_LINHA_2} direction="right" speed={115} rotSeed={2.3} />
    </div>
  );
}

const ScreenLogin = ({ onLogin }) => {
  const [email, setEmail]       = useState('');
  const [senha, setSenha]       = useState('');
  const [erro, setErro]         = useState('');
  const [loading, setLoading]   = useState(false);
  const [focusedField, setFocus] = useState('');
  const [modo, setModo]         = useState('login'); // login | signup | forgot
  const [nome, setNome]         = useState('');
  const [senha2, setSenha2]     = useState('');
  const [forgotMsg, setForgotMsg] = useState('');
  const isMobile = useMobile();

  async function esqueciSenha() {
    setErro(''); setForgotMsg('');
    if (!email) { setErro('Digite seu email primeiro.'); return; }
    setLoading(true);
    const r = await dispararResetSenha(email);
    setLoading(false);
    if (r?.ok) setForgotMsg('Se este email estiver cadastrado, você vai receber um link de redefinição em alguns minutos.');
    else setErro('Falha ao enviar reset: ' + (r?.erro || 'desconhecido'));
  }

  const demo = [
    { label: 'Admin (GC)',  email: 'ana.carolina@empresa.com.br', senha: '123', cor: '#00836B' },
    { label: 'Gestor',      email: 'thiago.gomes@empresa.com.br', senha: '123', cor: '#1F4A8A' },
    { label: 'Colaborador', email: 'lucas.costa@empresa.com.br',  senha: '123', cor: '#6B3FA0' },
  ];

  function entrar(e) {
    if (e && e.preventDefault) e.preventDefault();
    setErro('');
    setLoading(true);
    setTimeout(async function () {
      try {
        const user = await autenticar(email, senha);
        if (user) onLogin(user);
        else { setErro('E-mail ou senha incorretos. Tente um dos acessos demo.'); setLoading(false); }
      } catch (err) {
        setErro('Erro ao tentar autenticar: ' + (err?.message || 'desconhecido'));
        setLoading(false);
      }
    }, 600);
  }

  function cadastrar(e) {
    if (e && e.preventDefault) e.preventDefault();
    setErro('');
    if (!nome.trim() || !email.trim() || !senha) { setErro('Preencha nome, e-mail e senha.'); return; }
    if (senha.length < 3) { setErro('A senha deve ter ao menos 3 caracteres.'); return; }
    if (senha !== senha2) { setErro('As senhas não conferem.'); return; }
    setLoading(true);
    setTimeout(function () {
      const res = cadastrarUsuario({ nome, email, senha });
      if (res.ok) onLogin(res.user);
      else { setErro(res.erro || 'Não foi possível criar a conta.'); setLoading(false); }
    }, 600);
  }

  const btnDisabled = loading || !email || !senha || (modo === 'signup' && (!nome || !senha2));

  // Estilo dos inputs · aceita modo dark (glass card)
  const inputStyle = (field, dark) => dark ? ({
    width: '100%', padding: '12px 14px 12px 42px',
    border: '1px solid ' + (focusedField === field ? 'rgba(94,233,196,.6)' : 'rgba(255,255,255,.18)'),
    borderRadius: 10, fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0,
    boxSizing: 'border-box', transition: 'border-color .15s, box-shadow .15s, background .15s',
    boxShadow: focusedField === field ? '0 0 0 3px rgba(94,233,196,.18)' : 'none',
    background: focusedField === field ? 'rgba(255,255,255,.10)' : 'rgba(255,255,255,.06)',
    color: '#fff', caretColor: '#5EE9C4',
  }) : ({
    width: '100%', padding: '12px 14px 12px 42px',
    border: '1px solid ' + (focusedField === field ? '#00967B' : '#E4E7EB'),
    borderRadius: 10, fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0,
    boxSizing: 'border-box', transition: 'border-color .15s, box-shadow .15s',
    boxShadow: focusedField === field ? '0 0 0 3px rgba(0,150,123,.10)' : 'none',
    background: '#fff', color: 'var(--escalab-ink)',
  });

  const Logo = ({ dark } = {}) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
      <img src="assets/escalab-icon.png" width={32} height={32} style={{ borderRadius: 7 }} onError={(e) => { e.target.style.display = 'none'; }} />
      <div>
        <div style={{ fontSize: 16, fontWeight: 700, color: dark ? '#fff' : 'var(--escalab-ink)', letterSpacing: '-.01em', lineHeight: 1.1 }}>Escalab</div>
        <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '.11em', textTransform: 'uppercase', color: dark ? '#5EE9C4' : 'var(--escalab-brand)', marginTop: 2 }}>Gente e Cultura</div>
      </div>
    </div>
  );

  // ── Formulário ──────────────────────────────────────────────────────────
  const renderForm = (dark) => (
    <form onSubmit={modo === 'signup' ? cadastrar : entrar} style={{ display: 'flex', flexDirection: 'column' }}>
      {modo === 'signup' && (
        <div style={{ marginBottom: 13 }}>
          <label style={{ fontSize: 11.5, fontWeight: 700, color: dark ? 'rgba(255,255,255,.88)' : 'var(--escalab-slate)', letterSpacing: '.06em', textTransform: 'uppercase', display: 'block', marginBottom: 6 }}>Nome completo</label>
          <div style={{ position: 'relative' }}>
            <div style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: focusedField === 'nome' ? (dark ? '#5EE9C4' : 'var(--escalab-brand)') : (dark ? 'rgba(255,255,255,.65)' : 'var(--escalab-slate)'), pointerEvents: 'none' }}>
              <Icon name="user" size={15} />
            </div>
            <input value={nome} onChange={(e) => setNome(e.target.value)} type="text" placeholder="Seu nome" onFocus={() => setFocus('nome')} onBlur={() => setFocus('')} style={inputStyle('nome', dark)} />
          </div>
        </div>
      )}

      <div style={{ marginBottom: 13 }}>
        <label style={{ fontSize: 11.5, fontWeight: 700, color: dark ? 'rgba(255,255,255,.88)' : 'var(--escalab-slate)', letterSpacing: '.06em', textTransform: 'uppercase', display: 'block', marginBottom: 6 }}>E-mail</label>
        <div style={{ position: 'relative' }}>
          <div style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: focusedField === 'email' ? (dark ? '#5EE9C4' : 'var(--escalab-brand)') : (dark ? 'rgba(255,255,255,.65)' : 'var(--escalab-slate)'), pointerEvents: 'none' }}>
            <Icon name="user" size={15} />
          </div>
          <input value={email} onChange={(e) => setEmail(e.target.value)} type="email" placeholder="seu@escalab.com.br" onFocus={() => setFocus('email')} onBlur={() => setFocus('')} style={inputStyle('email', dark)} />
        </div>
      </div>

      <div style={{ marginBottom: modo === 'signup' ? 13 : 22 }}>
        <label style={{ fontSize: 11.5, fontWeight: 700, color: dark ? 'rgba(255,255,255,.88)' : 'var(--escalab-slate)', letterSpacing: '.06em', textTransform: 'uppercase', display: 'block', marginBottom: 6 }}>Senha</label>
        <div style={{ position: 'relative' }}>
          <div style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: focusedField === 'senha' ? (dark ? '#5EE9C4' : 'var(--escalab-brand)') : (dark ? 'rgba(255,255,255,.65)' : 'var(--escalab-slate)'), pointerEvents: 'none' }}>
            <Icon name="lock" size={15} />
          </div>
          <input value={senha} onChange={(e) => setSenha(e.target.value)} type="password" placeholder="••••••••" onFocus={() => setFocus('senha')} onBlur={() => setFocus('')} style={inputStyle('senha', dark)} />
        </div>
      </div>

      {modo === 'signup' && (
        <div style={{ marginBottom: 22 }}>
          <label style={{ fontSize: 11.5, fontWeight: 700, color: dark ? 'rgba(255,255,255,.88)' : 'var(--escalab-slate)', letterSpacing: '.06em', textTransform: 'uppercase', display: 'block', marginBottom: 6 }}>Confirmar senha</label>
          <div style={{ position: 'relative' }}>
            <div style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: focusedField === 'senha2' ? (dark ? '#5EE9C4' : 'var(--escalab-brand)') : (dark ? 'rgba(255,255,255,.65)' : 'var(--escalab-slate)'), pointerEvents: 'none' }}>
              <Icon name="lock" size={15} />
            </div>
            <input value={senha2} onChange={(e) => setSenha2(e.target.value)} type="password" placeholder="••••••••" onFocus={() => setFocus('senha2')} onBlur={() => setFocus('')} style={inputStyle('senha2', dark)} />
          </div>
        </div>
      )}

      <button
        type="submit"
        disabled={btnDisabled}
        style={{
          width: '100%', padding: '13px 14px', fontSize: 14.5, fontWeight: 600,
          fontFamily: 'var(--font-sans)',
          cursor: btnDisabled ? 'not-allowed' : 'pointer',
          opacity: btnDisabled ? 0.5 : 1,
          background: btnDisabled ? (dark ? 'rgba(255,255,255,.12)' : '#A8B8B2') : 'var(--escalab-brand)',
          color: '#fff', border: 0, borderRadius: 10,
          boxShadow: btnDisabled ? 'none' : '0 4px 14px rgba(0,150,123,.32)',
          transition: 'background .18s, box-shadow .18s, transform .12s',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          letterSpacing: '-.005em',
        }}
        onMouseEnter={(e) => { if (!btnDisabled) e.currentTarget.style.background = 'var(--escalab-brand-deep)'; }}
        onMouseLeave={(e) => { if (!btnDisabled) e.currentTarget.style.background = 'var(--escalab-brand)'; }}
      >
        {loading ? (
          <span style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
            <span style={{ width: 16, height: 16, border: '2px solid rgba(255,255,255,.35)', borderTopColor: '#fff', borderRadius: '50%', animation: 'spin .7s linear infinite', display: 'inline-block' }} />
            {modo === 'signup' ? 'Criando…' : 'Entrando…'}
          </span>
        ) : (
          <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            {modo === 'signup' ? 'Criar conta' : 'Entrar'} <Icon name="chev_right" size={15} />
          </span>
        )}
      </button>

      <div style={{ textAlign: 'center', marginTop: 14, fontSize: 13, color: dark ? 'rgba(255,255,255,.82)' : 'var(--escalab-slate)' }}>
        {modo === 'signup' ? 'Já tem acesso? ' : 'É um novo colaborador? '}
        <button type="button" onClick={() => { setModo(modo === 'signup' ? 'login' : 'signup'); setErro(''); setSenha2(''); }}
          style={{ border: 0, background: 'transparent', cursor: 'pointer', color: dark ? '#5EE9C4' : 'var(--escalab-brand)', fontWeight: 600, fontSize: 13, fontFamily: 'var(--font-sans)', padding: 0 }}>
          {modo === 'signup' ? 'Fazer login' : 'Criar conta'}
        </button>
      </div>

      {modo === 'signup' && (
        <div style={{ marginTop: 12, background: dark ? 'rgba(94,233,196,.10)' : 'var(--escalab-brand-tint)', border: dark ? '1px solid rgba(94,233,196,.22)' : '1px solid var(--escalab-brand-soft)', borderRadius: 9, padding: '10px 12px', fontSize: 12.5, color: dark ? '#B7F0DC' : 'var(--escalab-brand-deep)', lineHeight: 1.5 }}>
          Você terá acesso à tela de <strong>Admissão</strong> para preencher seus dados. O GC aprova seu cadastro para liberar o acesso completo.
        </div>
      )}

      {modo === 'login' && (
        <div style={{ textAlign: 'center', marginTop: 10 }}>
          <button type="button" onClick={esqueciSenha}
            style={{ border: 0, background: 'transparent', cursor: 'pointer', color: dark ? 'rgba(255,255,255,.62)' : 'var(--escalab-mute)', fontSize: 12.5, fontFamily: 'var(--font-sans)', padding: 0, textDecoration: 'underline' }}>
            Esqueci minha senha
          </button>
        </div>
      )}

      {forgotMsg && (
        <div style={{ marginTop: 12, background: dark ? 'rgba(94,233,196,.10)' : '#E6F5F1', border: dark ? '1px solid rgba(94,233,196,.22)' : '1px solid #B3D9CB', borderRadius: 9, padding: '10px 12px', fontSize: 12.5, color: dark ? '#B7F0DC' : '#00614D', lineHeight: 1.5 }}>
          {forgotMsg}
        </div>
      )}
    </form>
  );

  // ── Acessos demo (compacto) ─────────────────────────────────────────────
  const renderDemo = (dark) => (
    <div style={{ marginTop: 24, paddingTop: 18, borderTop: dark ? '1px solid rgba(255,255,255,.10)' : '1px solid #F0F2F5' }}>
      <div style={{ fontSize: 10.5, fontWeight: 800, letterSpacing: '.12em', textTransform: 'uppercase', color: dark ? 'rgba(255,255,255,.82)' : 'var(--escalab-slate)', marginBottom: 10, textAlign: 'center' }}>
        Acessos de demonstração
      </div>
      <div style={{ display: 'flex', gap: 7 }}>
        {demo.map((d) => (
          <button
            key={d.email}
            type="button"
            onClick={() => { setEmail(d.email); setSenha(d.senha); setErro(''); }}
            style={{
              flex: 1, border: dark ? '1px solid rgba(255,255,255,.14)' : '1px solid #E4E7EB',
              background: dark ? 'rgba(255,255,255,.06)' : '#fff',
              borderRadius: 8, padding: '8px 6px', cursor: 'pointer', textAlign: 'center',
              fontSize: 12, fontWeight: 600,
              color: dark ? '#fff' : d.cor,
              fontFamily: 'var(--font-sans)',
              transition: 'border-color .15s, background .15s',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = d.cor + '99'; e.currentTarget.style.background = dark ? 'rgba(255,255,255,.10)' : (d.cor + '08'); }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = dark ? 'rgba(255,255,255,.14)' : '#E4E7EB'; e.currentTarget.style.background = dark ? 'rgba(255,255,255,.06)' : '#fff'; }}
          >
            {d.label}
          </button>
        ))}
      </div>
    </div>
  );

  // ══════════════════════════════════════════════════════════════════
  // MOBILE · banner com cross-fade das fotos novas da equipe
  // ══════════════════════════════════════════════════════════════════
  if (isMobile) {
    // Rotaciona 5 fotos novas com cross-fade infinito · cada foto fica visível ~5s
    const fotosMobile = ['assets/equipe-1.jpg','assets/equipe-3.jpg','assets/equipe-5.jpg','assets/equipe-7.jpg','assets/equipe-9.jpg'];
    const cicloSeg = fotosMobile.length * 5; // 5s por foto
    return (
      <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', background: '#fff' }}>
        <div style={{
          position: 'relative', height: 240, overflow: 'hidden',
          background: 'radial-gradient(120% 100% at 30% 20%, #00614D 0%, #003A33 60%, #000D0A 100%)',
        }}>
          {/* Cross-fade entre fotos · zoom sutil pra dar movimento */}
          {fotosMobile.map((src, i) => (
            <div key={src} style={{
              position: 'absolute', inset: 0,
              backgroundImage: `url(${src})`,
              backgroundSize: 'cover', backgroundPosition: 'center 35%',
              animation: `loginPhotoFade ${cicloSeg}s linear ${(i * cicloSeg / fotosMobile.length) - cicloSeg / fotosMobile.length}s infinite, loginPhotoZoom ${cicloSeg}s ease-in-out ${(i * cicloSeg / fotosMobile.length) - cicloSeg / fotosMobile.length}s infinite`,
              opacity: i === 0 ? 1 : 0,
              willChange: 'opacity, transform',
            }} />
          ))}
          {/* Gradiente de leitura: escurece embaixo p/ logo + transição suave pro form */}
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,58,51,.18) 0%, rgba(0,58,51,.05) 45%, rgba(255,255,255,.0) 70%, #ffffff 100%)' }} />
          <div style={{ position: 'absolute', left: 22, top: 22, zIndex: 1, animation: 'login-fade-in .6s ease both' }}>
            <Logo />
          </div>
        </div>

        <div style={{ flex: 1, padding: '8px 22px 36px', display: 'flex', flexDirection: 'column' }}>
          <div style={{ marginBottom: 22 }}>
            <h2 style={{ fontSize: 22, fontWeight: 700, color: 'var(--escalab-ink)', margin: '0 0 4px', letterSpacing: '-.02em' }}>
              {modo === 'signup' ? 'Criar conta' : 'Bem-vindo de volta'}
            </h2>
            <p style={{ fontSize: 13.5, color: 'var(--escalab-mute)', margin: 0 }}>
              {modo === 'signup' ? 'Primeiro acesso de novo colaborador' : 'Entre com suas credenciais para continuar'}
            </p>
          </div>

          {erro && (
            <div style={{ background: '#FDECEC', border: '1px solid #F4C7C3', color: '#B3261E', padding: '10px 13px', borderRadius: 10, fontSize: 13, marginBottom: 16, display: 'flex', gap: 8, alignItems: 'center', animation: 'fadeIn .2s' }}>
              <Icon name="warn" size={14} /> {erro}
            </div>
          )}

          {renderForm(false)}
          {modo === 'login' && renderDemo(false)}
        </div>
      </div>
    );
  }

  // ══════════════════════════════════════════════════════════════════
  // DESKTOP · parede de polaroids animadas + login glass à direita
  // ══════════════════════════════════════════════════════════════════
  return (
    <div style={{
      position: 'relative',
      minHeight: '100vh',
      width: '100%',
      overflow: 'hidden',
      // Fundo verde Escalab profundo · polaroids saltam
      background: 'radial-gradient(120% 90% at 30% 30%, #00614D 0%, #003B2F 45%, #00211B 80%, #000D0A 100%)',
    }}>

      {/* Padrão sutil de pontos para textura · sem distrair */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none',
        backgroundImage: 'radial-gradient(rgba(94,233,196,.07) 1px, transparent 1px)',
        backgroundSize: '28px 28px',
        opacity: .5,
      }} />

      {/* Camada das polaroids passando · animação contínua */}
      <PolaroidsLoginBg />

      {/* Vinheta superior/inferior para profundidade */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
        background: 'linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.50) 100%)',
      }} />

      {/* Gradient escuro lateral à direita · destaca o card de login */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background: 'linear-gradient(90deg, rgba(0,15,12,0) 0%, rgba(0,15,12,0) 42%, rgba(0,15,12,.30) 60%, rgba(0,15,12,.70) 80%, rgba(0,15,12,.92) 100%)',
        pointerEvents: 'none',
      }} />

      {/* Brilho sutil no topo (ajuda a logo) */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 180,
        background: 'linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,0) 100%)',
        pointerEvents: 'none', zIndex: 2,
      }} />

      {/* Logo glass clara · visível desde o início, sem animação */}
      <div style={{
        position: 'absolute', top: 36, left: 40, zIndex: 4,
        background: 'rgba(255,255,255,.95)',
        backdropFilter: 'blur(10px)',
        WebkitBackdropFilter: 'blur(10px)',
        padding: '11px 16px', borderRadius: 14,
        boxShadow: '0 4px 18px rgba(0,0,0,.22)',
      }}>
        <Logo />
      </div>

      {/* Card glass dark com o login · entra rápido junto com as polaroids */}
      <div style={{
        position: 'absolute', top: 0, right: 0, bottom: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
        padding: '40px 56px',
        zIndex: 3,
        opacity: 0,
        animation: 'login-fade-in 1s ease-out .4s forwards',
      }}>
        <div style={{
          width: 400, maxWidth: '100%',
          background: 'rgba(12,22,18,.98)',
          backdropFilter: 'blur(24px) saturate(160%)',
          WebkitBackdropFilter: 'blur(24px) saturate(160%)',
          border: '1px solid rgba(255,255,255,.16)',
          borderRadius: 20,
          padding: '34px 32px',
          boxShadow: '0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05) inset',
          maxHeight: 'calc(100vh - 80px)',
          overflowY: 'auto',
        }}>

          <div style={{ marginBottom: 26 }}>
            <h2 style={{ fontSize: 24, fontWeight: 800, color: '#fff', margin: '0 0 6px', letterSpacing: '-.025em', fontFamily: 'var(--font-sans)' }}>
              {modo === 'signup' ? 'Criar conta' : 'Bem-vindo de volta'}
            </h2>
            <p style={{ fontSize: 13.5, color: 'rgba(255,255,255,.65)', margin: 0 }}>
              {modo === 'signup' ? 'Primeiro acesso de novo colaborador' : 'Entre com suas credenciais para continuar'}
            </p>
          </div>

          {erro && (
            <div style={{ background: 'rgba(255,100,100,.14)', border: '1px solid rgba(255,140,140,.32)', color: '#FFB4B0', padding: '11px 14px', borderRadius: 10, fontSize: 13.5, marginBottom: 20, display: 'flex', gap: 9, alignItems: 'center', animation: 'fadeIn .2s' }}>
              <Icon name="warn" size={15} /> {erro}
            </div>
          )}

          {renderForm(true)}
          {modo === 'login' && renderDemo(true)}

          <div style={{ marginTop: 22, fontSize: 11.5, color: 'rgba(255,255,255,.40)', textAlign: 'center' }}>
            © 2026 Escalab · Gente e Cultura
          </div>
        </div>
      </div>
    </div>
  );
};

window.ScreenLogin = ScreenLogin;