// Login screen

function Login({ onLogin, onBack }) {
  const [email, setEmail] = React.useState('carol@estudia.es');
  const [pass, setPass]   = React.useState('········');

  return (
    <div style={{
      minHeight: '100vh',
      background: 'var(--bg-canvas)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 24,
    }}>
      <div style={{
        width: 380,
        background: 'var(--bg-surface)',
        border: '1px solid var(--line)',
        borderRadius: 'var(--r-xl)',
        padding: '32px 32px 28px',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, marginBottom: 22 }}>
          <img src="../../assets/mark.svg" alt="" style={{ width: 72, height: 72 }} />
          <img src="../../assets/wordmark.svg" alt="estudia con carol" style={{ height: 24, marginTop: 4 }} />
        </div>

        <h2 style={{ font: 'var(--type-h3)', margin: '0 0 4px', textAlign: 'center' }}>Área privada</h2>
        <p style={{ font: 'var(--type-body-sm)', color: 'var(--ink-2)', margin: '0 0 22px', textAlign: 'center' }}>
          Pronto podrás guardar tu progreso, marcar logros y dejar notas.
        </p>

        <form onSubmit={e => { e.preventDefault(); onLogin({ initials: 'CG' }); }}
              style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <Label>Email</Label>
            <input value={email} onChange={e => setEmail(e.target.value)}
              style={{
                background: 'var(--bg-surface)', border: '1px solid var(--line)',
                borderRadius: 'var(--r-md)', padding: '10px 12px',
                font: 'var(--type-body-sm)', color: 'var(--ink)',
              }}/>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <Label>Contraseña</Label>
            <input type="password" value={pass} onChange={e => setPass(e.target.value)}
              style={{
                background: 'var(--bg-surface)', border: '1px solid var(--line)',
                borderRadius: 'var(--r-md)', padding: '10px 12px',
                font: 'var(--type-code)', color: 'var(--ink)',
              }}/>
          </div>

          <Button type="submit" variant="primary" style={{ justifyContent: 'center', marginTop: 6 }} iconRight="arrow">
            Entrar
          </Button>
        </form>

        <div style={{
          marginTop: 22, paddingTop: 18,
          borderTop: '1px solid var(--line)',
          font: 'var(--type-body-sm)', color: 'var(--ink-3)', textAlign: 'center',
        }}>
          El registro estará disponible pronto.{' '}
          {onBack && (
            <a onClick={onBack} style={{ cursor: 'pointer' }}>Volver al inicio</a>
          )}
        </div>
      </div>
    </div>
  );
}

window.Login = Login;