// Login Screen — Promoup 360°

function Login({ onLogin }) {
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [showPass, setShowPass] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');

  const OG = '#EA6B00';
  const NAVY = '#12085C';

  const handleLogin = async () => {
    if (!email.trim() || !password.trim()) { setError('Preencha todos os campos.'); return; }
    setLoading(true);
    setError('');
    const { data, error: err } = await sb.auth.signInWithPassword({ email, password });
    setLoading(false);
    if (err) {
      setError('E-mail ou senha inválidos. Verifique seus dados.');
    } else {
      onLogin(data.session);
    }
  };

  const onKey = (e) => { if (e.key === 'Enter') handleLogin(); };

  const features = [
    { icon: 'calendar', label: 'Agenda integrada com gestão de clientes' },
    { icon: 'budget',   label: 'Orçamentos profissionais em minutos' },
    { icon: 'users',    label: 'Rede completa de freelancers parceiros' },
    { icon: 'reports',  label: 'Relatórios e análises em tempo real' },
  ];

  const inputStyle = {
    width: '100%', boxSizing: 'border-box',
    padding: '11px 14px', fontSize: 14,
    border: '1.5px solid #E2E8F0', borderRadius: 10,
    outline: 'none', fontFamily: 'Inter, sans-serif',
    color: '#0F172A', background: '#F8FAFC',
    transition: 'border-color 0.15s, box-shadow 0.15s',
  };

  return (
    <div style={{ display: 'flex', minHeight: '100vh', fontFamily: "'Inter', sans-serif" }}>

      {/* ── Left panel ── */}
      <div style={{
        flex: 1,
        background: `linear-gradient(160deg, #0A0440 0%, ${NAVY} 55%, #1C1280 100%)`,
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
        padding: '64px 72px', position: 'relative', overflow: 'hidden',
      }}>

        {/* Decorative glows — laranja e roxo da marca */}
        <div style={{ position: 'absolute', top: '-100px', left: '-80px', width: 500, height: 500, borderRadius: '50%', background: `radial-gradient(circle, rgba(234,107,0,0.13) 0%, transparent 65%)`, pointerEvents: 'none' }} />
        <div style={{ position: 'absolute', bottom: '-80px', right: '-60px', width: 380, height: 380, borderRadius: '50%', background: 'radial-gradient(circle, rgba(123,53,200,0.13) 0%, transparent 65%)', pointerEvents: 'none' }} />
        <div style={{ position: 'absolute', top: '42%', right: '10%', width: 240, height: 240, borderRadius: '50%', background: `radial-gradient(circle, rgba(234,107,0,0.08) 0%, transparent 65%)`, pointerEvents: 'none' }} />

        {/* Grid sutil */}
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          backgroundImage: 'linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)',
          backgroundSize: '48px 48px',
        }} />

        {/* Logo Promoup — imagem real */}
        <div style={{ marginBottom: 56, position: 'relative', zIndex: 1 }}>
          <img src="logo.png" alt="Promoup 360°" style={{ height: 110, objectFit: 'contain', filter: 'drop-shadow(0 2px 12px rgba(0,0,0,0.4))' }} />
        </div>

        {/* Headline */}
        <div style={{ position: 'relative', zIndex: 1, marginBottom: 44 }}>
          <h1 style={{ fontSize: 44, fontWeight: 800, color: '#fff', lineHeight: 1.1, margin: '0 0 18px', letterSpacing: '-0.03em' }}>
            Gestão de eventos<br />
            <span style={{
              background: `linear-gradient(135deg, ${OG} 0%, #F59E0B 100%)`,
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            }}>inteligente.</span>
          </h1>
          <p style={{ fontSize: 15, color: '#94A3B8', lineHeight: 1.7, margin: 0, maxWidth: 390 }}>
            Experiências que conectam. Centralize agenda, orçamentos, freelancers e clientes numa plataforma premium.
          </p>
        </div>

        {/* Features */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 52, position: 'relative', zIndex: 1 }}>
          {features.map(f => (
            <div key={f.label} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{
                width: 34, height: 34, borderRadius: 9, flexShrink: 0,
                background: 'rgba(234,107,0,0.12)',
                border: '1px solid rgba(234,107,0,0.25)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name={f.icon} size={15} color={OG} />
              </div>
              <span style={{ fontSize: 13.5, color: '#CBD5E1', fontWeight: 500 }}>{f.label}</span>
            </div>
          ))}
        </div>


      </div>

      {/* ── Right panel — form ── */}
      <div style={{ width: 520, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#fff', padding: '64px 56px' }}>
        <div style={{ width: '100%', maxWidth: 390 }}>

          {/* Header */}
          <div style={{ marginBottom: 40 }}>
            <img src="logo.png" alt="Promoup 360°" style={{ height: 80, objectFit: 'contain', marginBottom: 20, display: 'block' }} />
            <h2 style={{ fontSize: 26, fontWeight: 800, color: '#0F172A', letterSpacing: '-0.02em', margin: '0 0 8px' }}>Bem-vindo de volta</h2>
            <p style={{ fontSize: 14, color: '#64748B', margin: 0 }}>Entre na sua conta Promoup para continuar</p>
          </div>

          {/* Fields */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div>
              <label style={{ fontSize: 12, fontWeight: 600, color: '#475569', display: 'block', marginBottom: 7, letterSpacing: '0.01em' }}>E-mail</label>
              <input type="email" value={email} onChange={e => setEmail(e.target.value)} onKeyDown={onKey} placeholder="seu@email.com" style={inputStyle}
                onFocus={e => { e.target.style.borderColor = OG; e.target.style.boxShadow = 'rgba(234,107,0,0.15) 0 0 0 3px'; }}
                onBlur={e => { e.target.style.borderColor = '#E2E8F0'; e.target.style.boxShadow = 'none'; }} />
            </div>

            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 7 }}>
                <label style={{ fontSize: 12, fontWeight: 600, color: '#475569', letterSpacing: '0.01em' }}>Senha</label>
                <a href="#" style={{ fontSize: 12, color: OG, textDecoration: 'none', fontWeight: 500 }}
                  onMouseEnter={e => e.target.style.textDecoration = 'underline'}
                  onMouseLeave={e => e.target.style.textDecoration = 'none'}>Esqueci a senha</a>
              </div>
              <div style={{ position: 'relative' }}>
                <input type={showPass ? 'text' : 'password'} value={password} onChange={e => setPassword(e.target.value)} onKeyDown={onKey} placeholder="••••••••" style={{ ...inputStyle, paddingRight: 44 }}
                  onFocus={e => { e.target.style.borderColor = OG; e.target.style.boxShadow = 'rgba(234,107,0,0.15) 0 0 0 3px'; }}
                  onBlur={e => { e.target.style.borderColor = '#E2E8F0'; e.target.style.boxShadow = 'none'; }} />
                <button onClick={() => setShowPass(s => !s)}
                  style={{ position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)', border: 'none', background: 'transparent', cursor: 'pointer', padding: 4, borderRadius: 6, display: 'flex', alignItems: 'center' }}>
                  <Icon name="eye" size={16} color={showPass ? OG : '#94A3B8'} />
                </button>
              </div>
            </div>

            {error && (
              <div style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '10px 14px', background: '#FEF2F2', borderRadius: 9, border: '1px solid #FECACA', animation: 'fadeIn 0.2s ease' }}>
                <Icon name="alert" size={14} color="#EF4444" />
                <span style={{ fontSize: 13, color: '#DC2626', fontWeight: 500 }}>{error}</span>
              </div>
            )}

            <button onClick={handleLogin} disabled={loading} style={{
              width: '100%', padding: '13px 0', borderRadius: 10, border: 'none', marginTop: 4,
              background: loading ? '#FDD9B5' : `linear-gradient(135deg, ${OG} 0%, #C45508 100%)`,
              color: '#fff', fontSize: 14, fontWeight: 700,
              cursor: loading ? 'not-allowed' : 'pointer',
              fontFamily: 'Inter, sans-serif', transition: 'all 0.18s',
              boxShadow: loading ? 'none' : '0 4px 16px rgba(234,107,0,0.38)',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            }}
              onMouseEnter={e => { if (!loading) { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = '0 6px 20px rgba(234,107,0,0.48)'; } }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = loading ? 'none' : '0 4px 16px rgba(234,107,0,0.38)'; }}>
              {loading ? (
                <>
                  <div style={{ width: 16, height: 16, borderRadius: '50%', border: '2px solid rgba(255,255,255,0.35)', borderTopColor: '#fff', animation: 'spin 0.7s linear infinite' }} />
                  Entrando…
                </>
              ) : 'Entrar na plataforma'}
            </button>
          </div>

          {/* Footer */}
          <div style={{ marginTop: 44, paddingTop: 24, borderTop: '1px solid #F1F5F9', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <img src="logo.png" alt="Promoup" style={{ height: 36, objectFit: 'contain' }} />
              <span style={{ fontSize: 12, color: '#94A3B8' }}>· Gestão de Eventos</span>
            </div>
            <div style={{ fontSize: 11, color: '#CBD5E1', letterSpacing: '0.03em' }}>
              Desenvolvido por{' '}
              <span style={{ fontWeight: 700, color: '#EA6B00' }}>JuFlow Digital</span>
              {' '}· © 2026
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Login });