// Login screen — split editorial layout per brand book (cover language)
const Login = ({ onEnter }) => {
  const [email, setEmail] = useState('adrian@blueways.es');
  const [pwd, setPwd] = useState('••••••••••••');

  return (
    <div style={{
      minHeight: '100vh',
      display: 'grid',
      gridTemplateColumns: '1.05fr 1fr',
      background: 'var(--color-bg)',
    }}>
      {/* ─── Brand panel ─── */}
      <div style={{
        position: 'relative',
        background: 'var(--brand-navy)',
        color: 'white',
        padding: '48px 56px',
        display: 'flex',
        flexDirection: 'column',
        overflow: 'hidden',
      }}>
        {/* Top stripe — brand cover accent */}
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 4,
          background: 'linear-gradient(90deg, #6FA6FF 0%, #2563EB 50%, #1E3A5F 100%)',
        }} />

        {/* Brand lockup */}
        <div style={{ position:'relative', display:'flex', alignItems:'center', gap: 12 }}>
          <img src="assets/blueways-logo-white.png" alt="Blueways" style={{ width: 32, height: 32, objectFit:'contain' }} />
          <div style={{ fontWeight: 600, fontSize: 17, letterSpacing:'-0.01em' }}>Blueways</div>
        </div>

        {/* Editorial hero */}
        <div style={{ position:'relative', flex: 1, display:'flex', flexDirection:'column', justifyContent:'center', maxWidth: 540 }}>
          <h1 style={{
            margin: 0,
            fontFamily:'var(--font-ui)',
            fontWeight: 600,
            fontSize: 56, lineHeight: 1.05,
            letterSpacing:'-0.03em',
          }}>
            La gestión<br/>
            de propiedades<br/>
            del <span style={{ color:'#6FA6FF' }}>futuro</span><br/>
            en Europa.
          </h1>
        </div>

        {/* Bottom — empty space */}
        <div style={{ height: 24 }}></div>
      </div>

      {/* ─── Form panel ─── */}
      <div style={{
        background:'var(--color-surface)',
        display:'grid', placeItems:'center',
        padding: 48,
        position:'relative',
      }}>
        <div style={{ width: 380, display:'flex', flexDirection:'column' }}>
          <h2 style={{
            margin: 0,
            fontFamily:'var(--font-ui)', fontWeight: 400,
            fontSize: 38, lineHeight: 1,
            letterSpacing:'-0.025em',
            color:'var(--brand-navy)',
          }}>
            Bienvenido<br/>de nuevo.
          </h2>
          <div style={{ width: 36, height: 3, background:'var(--color-accent)', borderRadius: 2, margin:'18px 0 14px' }} />
          <p style={{ margin: 0, fontSize: 13.5, color:'var(--color-text-secondary)', lineHeight: 1.55 }}>
            Ementil Grupo Inmobiliario · 1.284 propiedades sincronizadas.
          </p>

          <div style={{ display:'flex', flexDirection:'column', gap: 14, marginTop: 32 }}>
            <div>
              <label className="label-text">Email corporativo</label>
              <input className="input" value={email} onChange={e=>setEmail(e.target.value)} />
            </div>
            <div>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
                <label className="label-text">Contraseña</label>
                <a style={{ fontSize: 11.5, color:'var(--color-accent)', textDecoration:'none', cursor:'pointer', fontWeight: 500 }}>¿Olvidaste tu contraseña?</a>
              </div>
              <input className="input" type="password" value={pwd} onChange={e=>setPwd(e.target.value)} />
            </div>
            <button className="btn btn-primary btn-md" style={{ width:'100%', marginTop: 8, justifyContent:'center', height: 46, fontSize: 14, fontWeight: 600 }} onClick={onEnter}>
              Acceder a Blueways
            </button>

            <div style={{ display:'flex', alignItems:'center', gap: 12, marginTop: 6 }}>
              <div style={{ flex: 1, height: 1, background:'var(--color-border)' }} />
              <span style={{ fontSize: 10.5, color:'var(--color-text-muted)', textTransform:'uppercase', letterSpacing:'0.14em' }}>o</span>
              <div style={{ flex: 1, height: 1, background:'var(--color-border)' }} />
            </div>

            <button className="btn btn-md" style={{ width:'100%', justifyContent:'center', height: 44, background:'white' }}>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7 8.18c0-.56-.05-1.1-.14-1.62H8v3.07h4.32a3.7 3.7 0 0 1-1.6 2.42v2.02h2.6c1.51-1.39 2.38-3.45 2.38-5.89z" fill="#4285F4"/><path d="M8 16c2.16 0 3.97-.72 5.3-1.93l-2.6-2.02c-.72.49-1.64.78-2.7.78a4.7 4.7 0 0 1-4.4-3.24H.9v2.08A8 8 0 0 0 8 16z" fill="#34A853"/><path d="M3.6 9.59A4.78 4.78 0 0 1 3.34 8c0-.55.1-1.09.26-1.59V4.33H.9A8 8 0 0 0 0 8c0 1.29.31 2.51.9 3.67l2.7-2.08z" fill="#FBBC05"/><path d="M8 3.17c1.18 0 2.23.41 3.06 1.2L13.4 2.04A8 8 0 0 0 8 0 8 8 0 0 0 .9 4.33L3.6 6.41A4.7 4.7 0 0 1 8 3.17z" fill="#EA4335"/></svg>
              Continuar con Google Workspace
            </button>
          </div>

          <div style={{ marginTop: 32, paddingTop: 18, borderTop:'1px solid var(--color-border)', fontSize: 11.5, color:'var(--color-text-muted)', lineHeight: 1.6 }}>
            El acceso lo crea tu administrador. ¿Sin cuenta? Contacta con{' '}
            <span style={{ color:'var(--color-accent)', fontWeight: 500 }}>adrian@blueways.es</span>
          </div>
        </div>

        {/* Footer legal */}
        <div style={{
          position:'absolute', bottom: 24, left: 48, right: 48,
          display:'flex', justifyContent:'space-between',
          fontSize: 10.5, color:'var(--color-text-muted)',
          textTransform:'uppercase', letterSpacing:'0.12em',
        }}>
          <span>© 2026 Ementil Technologies S.L.</span>
          <span style={{ display:'flex', gap: 16 }}>
            <span>RGPD</span>
            <span>Privacidad</span>
            <span>Cookies</span>
          </span>
        </div>
      </div>
    </div>
  );
};

window.LoginPage = Login;