// Login.jsx
'use strict';
const { useState } = React;

// Imagem de fundo: foto tech (Unsplash). Se a URL falhar, o gradient navy abaixo cobre.
const BG_IMAGE = 'https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=2400&q=80';

function Login({ onLogin }) {
  const [email, setEmail] = useState('');
  const [pass, setPass]   = useState('');
  const [err, setErr]     = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = e => {
    e.preventDefault();
    setErr('');
    if (!email || !pass) { setErr('Preencha e-mail e senha.'); return; }
    setLoading(true);
    setTimeout(() => {
      if (email === 'demo@juflow.com' && pass === 'demo123') {
        onLogin({ name: 'Ademir Machado', email: 'demo@juflow.com', role: 'Administrador' });
      } else {
        setErr('Credenciais inválidas. Use o acesso demo abaixo.');
        setLoading(false);
      }
    }, 900);
  };

  const fillDemo = () => { setEmail('demo@juflow.com'); setPass('demo123'); setErr(''); };

  return (
    <div className="relative min-h-screen flex items-center justify-center overflow-hidden"
      style={{
        backgroundColor: '#0A1F44',
        backgroundImage: `linear-gradient(135deg, rgba(6,21,45,0.93) 0%, rgba(10,31,68,0.88) 50%, rgba(13,40,85,0.93) 100%), url("${BG_IMAGE}")`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        paddingTop:    'max(1rem, env(safe-area-inset-top))',
        paddingBottom: 'max(1rem, env(safe-area-inset-bottom))',
        paddingLeft:   'max(1rem, env(safe-area-inset-left))',
        paddingRight:  'max(1rem, env(safe-area-inset-right))',
      }}>

      {/* Glow blobs */}
      <div aria-hidden style={{
        position:'absolute', top:-160, right:-120, width:520, height:520, borderRadius:'50%',
        background:'radial-gradient(circle, rgba(255,107,53,0.32) 0%, transparent 70%)',
        filter:'blur(70px)', pointerEvents:'none',
      }} />
      <div aria-hidden style={{
        position:'absolute', bottom:-180, left:-140, width:540, height:540, borderRadius:'50%',
        background:'radial-gradient(circle, rgba(126,87,255,0.30) 0%, transparent 70%)',
        filter:'blur(70px)', pointerEvents:'none',
      }} />
      <div aria-hidden style={{
        position:'absolute', top:'40%', left:'50%', width:360, height:360, borderRadius:'50%',
        background:'radial-gradient(circle, rgba(59,130,246,0.18) 0%, transparent 70%)',
        filter:'blur(70px)', transform:'translate(-50%,-50%)', pointerEvents:'none',
      }} />

      {/* Subtle grid pattern */}
      <div aria-hidden className="absolute inset-0 pointer-events-none" style={{
        backgroundImage: 'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)',
        backgroundSize: '48px 48px',
        maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(ellipse at center, black 30%, transparent 75%)',
      }}/>

      <div className="relative w-full max-w-md anim-fade z-10">
        {/* Logo + marketing copy */}
        <div className="flex flex-col items-center mb-7 text-center">
          <img src="assets/juflow-logo.png" alt="Juflow Digital" className="block mb-5"
            style={{ height: 44, width: 'auto', objectFit: 'contain',
              filter: 'drop-shadow(0 8px 24px rgba(126,87,255,0.45)) drop-shadow(0 0 2px rgba(255,255,255,0.25))' }} />

          <h1 className="text-2xl sm:text-[1.7rem] font-extrabold text-white leading-tight tracking-tight"
            style={{ textShadow:'0 2px 20px rgba(0,0,0,0.4)' }}>
            Sua assistência técnica,<br/>
            <span style={{ background:'linear-gradient(90deg,#FF8A62 0%,#FF6B35 100%)', WebkitBackgroundClip:'text', backgroundClip:'text', color:'transparent' }}>profissional do início ao fim.</span>
          </h1>
          <p className="text-sm mt-3 max-w-sm leading-relaxed" style={{ color:'rgba(255,255,255,0.6)' }}>
            Do primeiro orçamento ao recibo final, tudo em um só sistema. OSs, agenda, financeiro e clientes integrados.
          </p>
        </div>

        {/* Form card — glass */}
        <div className="relative rounded-2xl p-7 sm:p-8"
          style={{
            background:'rgba(255,255,255,0.96)',
            backdropFilter:'blur(20px)',
            WebkitBackdropFilter:'blur(20px)',
            boxShadow:'0 24px 60px -12px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.7)',
          }}>
          <h2 className="text-xl font-bold mb-1" style={{ color:'#0A1F44' }}>Bem-vindo de volta</h2>
          <p className="text-sm text-slate-400 mb-6">Entre com suas credenciais para acessar o sistema.</p>

          <form onSubmit={handleSubmit} className="flex flex-col gap-4">
            <div>
              <label className="block text-sm font-semibold mb-1.5" style={{ color:'#374151' }}>E-mail</label>
              <div className="relative">
                <Icon name="Mail" size={16} color="#94A3B8" style={{ position:'absolute', left:12, top:'50%', transform:'translateY(-50%)' }} />
                <input type="email" value={email} onChange={e=>setEmail(e.target.value)}
                  placeholder="seu@email.com" autoComplete="email"
                  className="w-full pl-10 pr-4 py-3 rounded-xl border border-slate-200 text-sm transition-colors hover:border-slate-300 focus:border-blue-400 focus:ring-2 focus:ring-blue-100"
                  style={{ color:'#1E293B' }} />
              </div>
            </div>

            <div>
              <label className="block text-sm font-semibold mb-1.5" style={{ color:'#374151' }}>Senha</label>
              <div className="relative">
                <Icon name="Lock" size={16} color="#94A3B8" style={{ position:'absolute', left:12, top:'50%', transform:'translateY(-50%)' }} />
                <input type="password" value={pass} onChange={e=>setPass(e.target.value)}
                  placeholder="••••••••" autoComplete="current-password"
                  className="w-full pl-10 pr-4 py-3 rounded-xl border border-slate-200 text-sm transition-colors hover:border-slate-300 focus:border-blue-400 focus:ring-2 focus:ring-blue-100"
                  style={{ color:'#1E293B' }} />
              </div>
            </div>

            {err && (
              <div className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-red-50 border border-red-100">
                <Icon name="AlertCircle" size={15} color="#EF4444" />
                <p className="text-sm text-red-600">{err}</p>
              </div>
            )}

            <button type="submit" disabled={loading}
              className="w-full py-3 rounded-xl font-bold text-white text-sm transition-all hover:opacity-95 active:scale-[0.98] disabled:opacity-60 flex items-center justify-center gap-2 mt-1"
              style={{
                background:'linear-gradient(135deg, #FF7E47 0%, #FF6B35 50%, #E5541F 100%)',
                boxShadow:'0 8px 20px -4px rgba(255,107,53,0.55), inset 0 1px 0 rgba(255,255,255,0.25)',
              }}>
              {loading ? (
                <><Icon name="RefreshCw" size={15} color="white" className="anim-pulse" />Entrando...</>
              ) : (
                <><Icon name="ChevronDoubleRight" size={15} color="white" />Entrar no Sistema</>
              )}
            </button>
          </form>

          {/* Demo credentials */}
          <div className="mt-5 p-4 rounded-xl border-2 border-dashed cursor-pointer group transition-colors hover:border-orange-300"
            style={{ borderColor:'#FF6B3540', background:'#FFF8F6' }} onClick={fillDemo}>
            <div className="flex items-center gap-2 mb-2">
              <Icon name="Zap" size={14} color="#FF6B35" />
              <span className="text-xs font-bold" style={{ color:'#FF6B35' }}>ACESSO DEMO</span>
              <span className="ml-auto text-xs text-slate-400 group-hover:text-orange-500 transition-colors">clique para preencher</span>
            </div>
            <div className="grid grid-cols-2 gap-2 text-xs">
              <div><span className="text-slate-400">E-mail:</span><br/><span className="font-mono font-semibold text-slate-700">demo@juflow.com</span></div>
              <div><span className="text-slate-400">Senha:</span><br/><span className="font-mono font-semibold text-slate-700">demo123</span></div>
            </div>
          </div>
        </div>

        {/* Trust signals */}
        <div className="mt-6 flex items-center justify-center gap-5 text-[11px] flex-wrap" style={{ color:'rgba(255,255,255,0.5)' }}>
          <span className="flex items-center gap-1.5"><Icon name="Shield" size={12} color="rgba(255,255,255,0.5)"/>Dados protegidos</span>
          <span className="opacity-30">•</span>
          <span className="flex items-center gap-1.5"><Icon name="Zap" size={12} color="rgba(255,255,255,0.5)"/>Acesso instantâneo</span>
          <span className="opacity-30">•</span>
          <span className="flex items-center gap-1.5"><Icon name="CheckCircle" size={12} color="rgba(255,255,255,0.5)"/>Sem instalação</span>
        </div>

        <p className="text-center text-xs mt-5" style={{ color:'rgba(255,255,255,0.35)' }}>
          Desenvolvido pela <span style={{ color:'rgba(255,255,255,0.55)' }}>JuFlow Digital</span> — Soluções em Software para Pequenas Empresas
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { Login });