// LinkPass — Login Page

function LoginPage({ onNavigate }) {
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [showPw, setShowPw] = React.useState(false);
  const [remember, setRemember] = React.useState(true);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');
  const isMobile = useMobile();

  const handleSubmit = (e) => {
    e.preventDefault();
    setError('');
    if (!email || !password) {
      setError('Preencha e-mail e senha para continuar.');
      return;
    }
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      setError('Credenciais não reconhecidas. Verifique e tente novamente.');
    }, 1400);
  };

  return (
    <section style={{ minHeight: '100vh', display: 'flex', position: 'relative', overflow: 'hidden', paddingTop: 68 }}>
      {/* Background pattern */}
      <div style={{ position: 'absolute', inset: 0, backgroundImage: `linear-gradient(${T.border} 1px, transparent 1px), linear-gradient(90deg, ${T.border} 1px, transparent 1px)`, backgroundSize: '60px 60px', opacity: 0.35 }} />
      <div style={{ position: 'absolute', top: '20%', left: '15%', width: 500, height: 400, background: 'radial-gradient(ellipse, rgba(6,182,212,0.15) 0%, transparent 70%)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', bottom: '10%', right: '10%', width: 500, height: 400, background: 'radial-gradient(ellipse, rgba(129,140,248,0.12) 0%, transparent 70%)', pointerEvents: 'none' }} />

      <div style={{
        maxWidth: 1200, margin: '0 auto',
        padding: isMobile ? '40px 20px' : '60px 40px',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
        gap: isMobile ? 40 : 64,
        alignItems: 'center',
        position: 'relative',
        width: '100%',
      }}>

        {/* ─── Brand panel (hidden on mobile or shown below form) ─── */}
        {!isMobile && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <img src="assets/linkpass-icon.png" alt="LinkPass" style={{ height: 54, width: 'auto' }} />
              <div>
                <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: 28, lineHeight: 1, color: T.white, letterSpacing: '-0.02em' }}>
                  <span style={{ color: T.white }}>Link</span><span style={{ color: T.cyan }}>Pass</span>
                </div>
                <div style={{ fontSize: 12, color: T.muted, marginTop: 4, fontWeight: 600, letterSpacing: '0.06em' }}>CONECTA · INTEGRA · ACESSA</div>
              </div>
            </div>

            <div>
              <h1 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: 44, lineHeight: 1.1, color: T.white, letterSpacing: '-0.03em', marginBottom: 16, textWrap: 'balance' }}>
                Bem-vindo de volta.
              </h1>
              <p style={{ fontSize: 17, color: T.mutedLt, lineHeight: 1.65, maxWidth: 440 }}>
                Acesse sua plataforma e gerencie sua escola, condomínio ou empresa em um só lugar.
              </p>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[
                { icon: '🛡', title: 'Seguro por padrão', desc: 'Autenticação 2FA e criptografia ponta-a-ponta.' },
                { icon: '⚡', title: 'Em tempo real', desc: 'Notificações instantâneas e dashboard ao vivo.' },
                { icon: '🔗', title: 'Tudo integrado', desc: 'Acessos, eventos, visitantes — em uma única plataforma.' },
              ].map(h => (
                <div key={h.title} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '12px 16px', background: T.bgCard, border: `1px solid ${T.border}`, borderRadius: 12 }}>
                  <div style={{ width: 36, height: 36, borderRadius: 9, background: T.bgSurface, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18 }}>{h.icon}</div>
                  <div>
                    <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 700, fontSize: 14, color: T.white }}>{h.title}</div>
                    <div style={{ fontSize: 12.5, color: T.muted }}>{h.desc}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* ─── Form card ─── */}
        <div style={{ display: 'flex', justifyContent: isMobile ? 'center' : 'flex-end', width: '100%' }}>
          <div style={{
            width: '100%', maxWidth: isMobile ? 480 : 440,
            background: T.bgCard, border: `1px solid ${T.border}`,
            borderRadius: 20, padding: isMobile ? 24 : 40,
            boxShadow: '0 24px 60px rgba(0,0,0,0.4), 0 0 40px rgba(6,182,212,0.08)',
          }}>
            {/* Mobile logo */}
            {isMobile && (
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24 }}>
                <img src="assets/linkpass-icon.png" alt="LinkPass" style={{ height: 36, width: 'auto' }} />
                <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: 20, color: T.white, letterSpacing: '-0.02em' }}>
                  <span>Link</span><span style={{ color: T.cyan }}>Pass</span>
                </div>
              </div>
            )}

            <div style={{ marginBottom: 24 }}>
              <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 20 : 24, color: T.white, marginBottom: 6 }}>Entrar na plataforma</div>
              <div style={{ fontSize: 14, color: T.muted }}>Use suas credenciais corporativas para acessar o painel.</div>
            </div>

            <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {/* Email */}
              <Field
                label="E-mail"
                type="email"
                placeholder="voce@instituicao.com.br"
                value={email}
                onChange={setEmail}
                icon={
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <rect x="2" y="3.5" width="12" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.4"/>
                    <path d="M2.5 4.5L8 8.5L13.5 4.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
                  </svg>
                }
              />

              {/* Password */}
              <Field
                label="Senha"
                type={showPw ? 'text' : 'password'}
                placeholder="••••••••"
                value={password}
                onChange={setPassword}
                icon={
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <rect x="3" y="7" width="10" height="7" rx="1.5" stroke="currentColor" strokeWidth="1.4"/>
                    <path d="M5 7V5a3 3 0 0 1 6 0v2" stroke="currentColor" strokeWidth="1.4"/>
                  </svg>
                }
                trailing={
                  <button type="button" onClick={() => setShowPw(!showPw)} style={{ background: 'transparent', border: 'none', cursor: 'pointer', padding: 4, color: T.muted, display: 'flex', alignItems: 'center' }}>
                    {showPw ? (
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M2 8s2.5-5 6-5 6 5 6 5-2.5 5-6 5-6-5-6-5z" stroke="currentColor" strokeWidth="1.3"/>
                        <circle cx="8" cy="8" r="2" stroke="currentColor" strokeWidth="1.3"/>
                        <path d="M2 2l12 12" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
                      </svg>
                    ) : (
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M2 8s2.5-5 6-5 6 5 6 5-2.5 5-6 5-6-5-6-5z" stroke="currentColor" strokeWidth="1.3"/>
                        <circle cx="8" cy="8" r="2" stroke="currentColor" strokeWidth="1.3"/>
                      </svg>
                    )}
                  </button>
                }
              />

              {/* Remember + forgot */}
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 2 }}>
                <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 13, color: T.mutedLt }}>
                  <div onClick={() => setRemember(!remember)} style={{
                    width: 16, height: 16, borderRadius: 4,
                    border: `1.5px solid ${remember ? T.cyan : T.border}`,
                    background: remember ? T.cyan : 'transparent',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    transition: 'all 0.15s',
                  }}>
                    {remember && (
                      <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
                        <path d="M2 5l2 2 4-5" stroke="#07091A" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                    )}
                  </div>
                  Lembrar de mim
                </label>
                <a href="#" onClick={e => e.preventDefault()} style={{ fontSize: 13, color: T.cyan, fontWeight: 600, textDecoration: 'none' }}>
                  Esqueci a senha
                </a>
              </div>

              {/* Error */}
              {error && (
                <div style={{ background: 'rgba(239,68,68,0.1)', border: '1px solid rgba(239,68,68,0.3)', borderRadius: 9, padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: '#FCA5A5' }}>
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0 }}>
                    <circle cx="8" cy="8" r="6.5" stroke="currentColor" strokeWidth="1.4"/>
                    <path d="M8 5v3.5M8 11v.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
                  </svg>
                  {error}
                </div>
              )}

              {/* Submit */}
              <button type="submit" disabled={loading} style={{
                background: loading ? '#0891B2' : T.cyan,
                color: '#07091A', fontWeight: 700, fontSize: 15,
                border: 'none', borderRadius: 10, padding: '14px 18px',
                cursor: loading ? 'wait' : 'pointer', marginTop: 4,
                fontFamily: 'Inter, sans-serif',
                boxShadow: '0 0 20px rgba(6,182,212,0.3)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                transition: 'all 0.15s',
              }}>
                {loading ? (
                  <>
                    <div style={{ width: 14, height: 14, border: '2px solid rgba(7,9,26,0.3)', borderTopColor: '#07091A', borderRadius: '50%', animation: 'lp-spin 0.7s linear infinite' }} />
                    Verificando...
                  </>
                ) : (
                  <>Entrar <span style={{ fontSize: 16 }}>→</span></>
                )}
              </button>
              <style>{`@keyframes lp-spin { to { transform: rotate(360deg) } }`}</style>

            </form>

            <div style={{ textAlign: 'center', marginTop: 24, paddingTop: 20, borderTop: `1px solid ${T.border}`, fontSize: 14, color: T.muted }}>
              Sua instituição ainda não usa LinkPass?{' '}
              <a href="#" onClick={e => { e.preventDefault(); onNavigate('contato'); }} style={{ color: T.cyan, fontWeight: 600, textDecoration: 'none' }}>
                Solicite uma demonstração
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Field({ label, type, placeholder, value, onChange, icon, trailing }) {
  const [focused, setFocused] = React.useState(false);
  return (
    <div>
      <label style={{ fontSize: 12, fontWeight: 600, color: T.muted, textTransform: 'uppercase', letterSpacing: '0.07em', display: 'block', marginBottom: 6 }}>{label}</label>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        background: T.bgSurface,
        border: `1px solid ${focused ? T.cyan : T.border}`,
        borderRadius: 10, padding: '0 14px',
        transition: 'border 0.15s, box-shadow 0.15s',
        boxShadow: focused ? `0 0 0 3px ${T.cyanDim}` : 'none',
      }}>
        <span style={{ color: focused ? T.cyan : T.muted, display: 'flex', transition: 'color 0.15s' }}>{icon}</span>
        <input
          type={type}
          placeholder={placeholder}
          value={value}
          onChange={e => onChange(e.target.value)}
          onFocus={() => setFocused(true)}
          onBlur={() => setFocused(false)}
          style={{
            flex: 1, background: 'transparent', border: 'none', outline: 'none',
            padding: '12px 0', fontSize: 14, color: T.white,
            fontFamily: 'Inter, sans-serif',
          }}
        />
        {trailing}
      </div>
    </div>
  );
}

function SSOButton({ icon, label }) {
  const [hov, setHov] = React.useState(false);
  return (
    <button type="button" onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} style={{
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      background: hov ? T.bgCardHov : T.bgSurface,
      border: `1px solid ${T.border}`, borderRadius: 9,
      padding: '11px 14px', cursor: 'pointer',
      fontSize: 13.5, fontWeight: 600, color: T.white,
      fontFamily: 'Inter, sans-serif', transition: 'all 0.15s',
    }}>
      {icon} {label}
    </button>
  );
}

Object.assign(window, { LoginPage });